Chart.js showing different graphs with select

by

1👍

✅

It sounds like you need to update the chart data whenever the user selects a value from the dropdown. So, add an event listener to the location selector dropdown element, then replace the chart data with the data for the selected location, then call chart update. That part is very simple. It’s explained in the chart.js docs under Updating Charts. https://www.chartjs.org/docs/latest/developers/updates.html

For example, if you had location data in an object and a transformData function to convert it to x/y coordinates, you might do something like this for a line chart:

    const defaultLocation = 'munchen';
    const chart = new Chart(chartCanvas,
      {
        type: 'line',
        data: transformData(locationData[defaultLocation]),
        options: {
          animation: false,
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
            },
            x: {
              type: 'timeseries',
            },
          },
        },
      });

    const locationSelector = document.getElementById("location-selector");
    locationSelector.addEventListener('change', ({ target }) => {
      chart.data = transformData(locationData[target.value]);
      chart.update();
    });

Leave a comment