Chartjs-How to add data to chart.js with a for loop

4👍

Yes it’s possible. The code below add 10 objects to your dataset.

var LINECHART = $('#lineModal'); 
window.myLineChart=new Chart(LINECHART, 
{ 
type: 'line',
    options: {
    elements: {
         point:{
            radius: 0
                }
    },
    scales: {
        xAxes: [{
            display: true,
            ticks: {
                autoSkip: true,
                maxTicksLimit: 2,
                maxRotation: 0,
                minRotation: 0
            },
            gridLines: {
                display: false
            }
        }],
        yAxes: [{
            ticks: {
                suggestedmax: 13000,
                suggestedmin: 13000
            },
            display: true,
            gridLines: {
                display: false
            }
        }]
    },
    legend: {
        display: legendState
    }
},
data: {
    labels: modalChartDates[0],
    datasets: [
        {
            label: "Asset Price",
            fill: true,
            lineTension: 0.2,
            backgroundColor: "transparent",
            borderColor: "rgba(134, 77, 217, 0.57)",
            pointBorderColor: "rgba(134, 77, 217, 0.57)",
            pointHoverBackgroundColor: "rgba(134, 77, 217, 0.57)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            borderWidth: 2,
            pointBackgroundColor: "#fff",
            pointBorderWidth: 0,
            pointHoverRadius: 3,
            pointHoverBorderColor: "#fff",
            pointHoverBorderWidth: 3,
            pointRadius: 0,
            pointHitRadius: 5,
            data: modalChartData[0],
            spanGaps: false
        },
      {
            label: "Moving Average",
            fill: true,
            lineTension: 0.2,
            backgroundColor: "transparent",
            borderColor: "rgba(75, 75, 75, 0.7)",
            pointBorderColor: "rgba(75, 75, 75, 0.7)",
            pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            borderWidth: 2,
            pointBackgroundColor: "#fff",
            pointBorderWidth: 0,
            pointHoverRadius: 3,
            pointHoverBorderColor: "#fff",
            pointHoverBorderWidth: 3,
            pointRadius: 0,
            pointHitRadius: 5,
            data: modalMovingAverageData[0],
            spanGaps: false
        }
  
    ]
}
});
for(let i=0;i<10;i++){
     myLineChart.data.datasets.push({
            label: "item "+i,
            fill: true,
            lineTension: 0.2,
            backgroundColor: "transparent",
            borderColor: "rgba(75, 75, 75, 0.7)",
            pointBorderColor: "rgba(75, 75, 75, 0.7)",
            pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            borderWidth: 2,
            pointBackgroundColor: "#fff",
            pointBorderWidth: 0,
            pointHoverRadius: 3,
            pointHoverBorderColor: "#fff",
            pointHoverBorderWidth: 3,
            pointRadius: 0,
            pointHitRadius: 5,
            data: modalMovingAverageData[0],
            spanGaps: false
        });
 }
 //Use the window object to update myLineChart
 window.myLineChart.update();

Based on the official docs and the github repo of Chart.js

Leave a comment