Search code examples
javascriptchartschart.jschartjs-2.6.0

Chart js: Update line chart having two data sets


I want to update a line chart in chart js with two data sets. I've somehow managed to empty the chart and then able to fill in one of the data set. but unable to make both data sets working. here's the code.

ajaxRequest(
    {
        url: 'reports/updateChart/?filter=true',
        method: 'post',
        data: data
    }, function (response)
        {
            /*refresh the tables with the new data sets*/
            removeData(myChart);
            let label = [1, 234, 234, 234, 234, 234, 234, 34, 234, 23, 23, 41, 3, 2, 4];
            let data = [234, 234, 5, 23, 34, 234, 234, 234],[22, 1, 123, 14, 2]
        }; addData(myChart, label, data);
    });

});

functions:

function removeData(chart) {
    chart.data.labels = [];
    chart.data.datasets.forEach((dataset) => {
        dataset.data = [];
    });
    chart.update();
}

function addData(chart, label, data) {
    $.each(label, function (index, value) {
        chart.data.labels.push(value);
    });

    chart.data.datasets.forEach((dataset) => {
        $.each(data, function (index, value) {
            dataset.data.push(value);
        });
    });
    chart.update();
}

Solution

  • I am not able to find out the issue with your code, but you can refer the below way of updating charts which is very similar to what you have tried but this is working. You can refer the fiddle also -> http://jsfiddle.net/cuzx3L7j/4/

    Hope it helps!

    function clearAndAddNewDataSets() {
      myChart.config.data.datasets = [];
      myChart.config.data.labels = [];
    
      var labels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5', 'Label6', 'Label8', 'Label8'];
      var data = [
        [234, 234, 5, 23, 34, 234, 234, 234],
        [22, 1, 123, 14, 2]
      ]
    
      var colors = ['Red', 'Green'];
    
      myChart.config.data.labels = labels;
    
      for (i = 0; i < data.length; i++) {
        var dataSet = {
          label: 'testLabel' + i,
          data: data[i],
          backgroundColor: colors[i]
        }
    
        myChart.config.data.datasets.push(dataSet);
      }
    
      myChart.update();
    
    }