I have a question for understanding the chart.js library. There is an example of plotting https://jsfiddle.net/red_stapler/u5aanta8/1/

var canvas = document.getElementById('myChart'); var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, pointHitRadius: 10, data: [65, 59, 0, 56, 55, 40], }, { label: "My Second dataset", fill: false, lineTension: 0.1, backgroundColor: "rgba(95,192,192,0.4)", borderColor: "rgba(95,75,75,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,75,75,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, pointHitRadius: 10, data: [55, 49, 100, 10, 65, 13, 100], } ] }; function adddata(){ myLineChart.data.datasets[0].data.push(65) //myLineChart.data.labels[7] = "Newly Added"; myLineChart.data.labels.push("Newly Added") myLineChart.update(); } var option = { showLines: true }; var myLineChart = Chart.Line(canvas,{ data:data, options:option });

In the example, the labels array is statically packed and the data property is populated further in the datasets property. As I understand it, labels are located on the X axis, and points are put according to the data. That is, roughly speaking, labels [0] will correspond to the value data [0]. But what if I receive data dynamically? for example, I get data from the backend as an array of objects of the form:

 { name: "Sam Dow" date: "2019-02-12T13:57:41.381Z" summ: 80 }

I will fill in the labels array with dates, but how do I know which date corresponds to which amount? The trouble begins when I want to dynamically form two graphs, as in the example above. Roughly speaking what data binding from datasets.data to labels?

Guys help please!

    1 answer 1

    If the data comes in the form of an array of objects, then the correspondence between the dates and the sum is determined by these objects. From the input data array, you can make two separate arrays with dates and amounts, and transfer dates as labels and corresponding amounts as datasets.data

     var inputData=[ { name: "Sam Dow", date: "2019-02-10T13:57:41.381Z", summ: 80, }, { name: "Sam Dow", date: "2019-02-11T13:57:41.381Z", summ: 40, }, { name: "Sam Dow", date: "2019-02-12T13:57:41.381Z", summ: 50, }, { name: "Sam Dow", date: "2019-02-13T13:57:41.381Z", summ: 70, }, { name: "Sam Dow", date: "2019-02-14T13:57:41.381Z", summ: 80, }]; var dates=[]; var summs=[]; inputData.forEach(function(item){ dates.push(item.date); summs.push(item.summ); }); var canvas = document.getElementById('myChart'); var data = { labels: dates, datasets: [ { label: "My First dataset", data: summs, } ] }; var option = { showLines: true }; var myLineChart = Chart.Line(canvas,{ data:data, options:option }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> <canvas id="myChart" width="400" height="250"></canvas>