简体   繁体   中英

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();
}

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();

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM