dynamically update Chart.js draw line chart dataset data

Question

How do i pass back the value after retrieved into the dataset data? Currently it is return empty in value. I know the var durationChartData return in empty due to the intialization of array are empty, how could i update it and display the right value after i got the value from ajax?

var durationChartData = [];
var lineChartData = {
      labels: ["Jan","Feb", "Mar","Apr","May","Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [
          {
              label: "My Second dataset",
              fillColor: "rgba(124,181,236,0.4)",
              strokeColor: "rgba(124,181,236,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [durationChartData[0],durationChartData[1],durationChartData[2],durationChartData[3],durationChartData[4],durationChartData[5],durationChartData[6],durationChartData[7],durationChartData[8],durationChartData[9],durationChartData[10],durationChartData[11]]
          }
      ]
    };
window.onload = 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;
            }
        },
        error: function (data) {
            console.log('duration Chart Data: ' + data);
        }
    });

    var linegraph = document.getElementById("linegraph");
    var bargraph = document.getElementById("bargraph"); 

    if(linegraph !== null){
        var ctx = linegraph.getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> min",
            responsive: true
        });
    };

Answer 1

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