Chartjs-Dynamically update Chart.js draw line chart dataset data

by

3👍

✅

Change the part of the dataset that you receive from the ajax response, then call the chart’s update() function. This is done with the 2 additional lines at the end of the $.ajax success function.

$.ajax({
        url: '/rest/analytical/home/viewed/line',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            dataLength = (data + '').length;
            for(var i=0; i<dataLength; i++){
            durationChartData[i] = data.ret[i].all;
            }

            window.myLine.data.datasets[0].data = durationChartData;
            // 1.x compatible answer (comment out line above):
            // for(i=0; i <durationChartData.length; i++) {
            // window.myLine.datasets[0].points[i].value = durationChartData[i];
            // }
            window.myLine.update();                   
        },
        error: function (data) {
            console.log('duration Chart Data: ' + data);
        }
    });

Leave a comment