CODEWITHSUNDEEP
javascriptcanvas
user3911183
user3911183

Reputation: 797

How to set datapoint dynamically in a canvas?

I need some help setting a datapoint dynamically in a javascript canvas.

Here's the code I have right now:

var dps = [{x: 1, y: 100}, {x: 2, y: 50}, {x: 3, y: 250}, {x: 4, y: 120}, {x: 5, y: 400}];  
window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer",
        {               
         data: [
                {        
                type: "line",
                lineThickness:3,
                axisYType:"primary", // for align the y to right 
                showInLegend: true,           
                name: "India", 
                dataPoints: dps
            }
            ],
        });

chart.render();
}

This works fine, but I would like to make the data setting part dynamic, like this:

    data: [
for( var i = 0 ; i < array.length ; i++ ){
                {        
                type: "line",
                lineThickness:3,
                axisYType:"primary", // for align the y to right 
                showInLegend: true,           
                name: array[i]['title'], 
                dataPoints: array[i]['data']
            }
}
            ],

How can I do this?

Upvotes: 2

Views: 1670

Answers (1)

Raghavendra
Raghavendra

Reputation: 3580

Here is the correct way to do this.

var dps = [{x: 1, y: 100}, {x: 2, y: 50}, {x: 3, y: 250}, {x: 4, y: 120}, {x: 5, y: 400}];  
window.onload = function () {
var data = [];
for( var i = 0 ; i < array.length ; i++ ){
              data.push(  {        
                type: "line",
                lineThickness:3,
                axisYType:"primary", // for align the y to right 
                showInLegend: true,           
                name: array[i]['title'], 
                dataPoints: array[i]['data']
            });
}

        var chart = new CanvasJS.Chart("chartContainer",
        {               
         data: data,
        });

chart.render();
}

Upvotes: 2

Related Questions