baseddata.io/layouts/partials/chart.html

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
<script>
  chartData = [];
  function createChart(
    id,
    endpoint,
    chartType,
    xAxisField,
    yAxisField,
    sortField = null,
    scaleChart = false,
    xAxisType = "time",
    formatValueDecimalPlaces = null
  ) {
    async function fetchDataForChart(query, valueId) {
      try {
        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
        const response = await fetch(apiEndpoint);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const fetchedData = await response.json();
        const newData = fetchedData.reduce((acc, item) => {
          const objectId = item[valueId];
          if (!acc[objectId]) {
            acc[objectId] = [];
          }
          acc[objectId].push([item[xAxisField], item[yAxisField]]);
          return acc;
        }, {});
        chartData = { ...chartData, ...newData };
        updateChart();
      } catch (error) {
        console.error("Fetching data failed:", error);
      }
    }

    function updateChart() {
      let chartDataMap = new Map();
      for (let objectId in chartData) {
        chartDataMap.set(objectId, chartData[objectId]);
      }
      var chartDom = document.getElementById(`${id}`);
      var myChart = echarts.init(chartDom);

      var option = {
        tooltip: {
          ...tooltip,
          valueFormatter(value, index) {
            return formatValueDecimalPlaces == null ? value : nFormatter(value, formatValueDecimalPlaces);
          },
        },
        xAxis: {
          type: xAxisType,
        },
        yAxis: {
          scale: scaleChart,
          type: "value",
        },
        series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
          name,
          type: chartType,
          data,
          showSymbol: false,
        })),
      };

      myChart.setOption(option, true);
    }

    // listen for filter events for this target
    document.addEventListener("filterChange", function (event) {
      tableId = document.getElementById(id).id;
      console.log(event.detail);
      eventDetail = event.detail;
      if (eventDetail.filterActions.includes("refresh")) {
        chartData = [];
        updateChart();
      } else {
        if (eventDetail.filterTargets.includes(tableId)) {
          if (eventDetail.filterActions.includes("selected")) {
            valueId = eventDetail.filterId;
            let selectedRow = {
              [valueId]: eventDetail.filterValue,
            };
            query = queryConstructor(selectedRow);
            fetchDataForChart(query, valueId);
          } else {
            delete chartData[eventDetail.filterValue];
            updateChart();
          }
        }
      }
    });
  }
</script>