Javascript generate code inside

Question

I am beginner, I have this javascript function:

function draw() {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Title of graph"
            },
            axisX: {
                interval: 0.05
            },
            data: [{
                type: "line",
                dataPoints: [
                    { x: xa[0], y: ya[0] },
                    { x: xa[1], y: ya[1] },
                    { x: xa[2], y: ya[2] },
                    { x: xa[3], y: ya[3] },
                    { x: xa[4], y: ya[4] },
                    { x: xa[5], y: ya[5] },
                ]
            }]
        });
        chart.render();
    }   

It is long time to manually generate axis (x and y), I was tried to take there a while loop. but it not works for me, I think, that I made some mistake.

var i = 0;
while (i < 10)
{

{ x: xa[i], y: ya[i] },

i++;

}

How to make it works inside? To generate axis in code... I was use CanvasJS library to generate charts and I want to make it automatically...

xa and ya are arrays... And on every index is a different value. And with loop I want to show each one.

Thank you for help.

Answer 1

I believe this will work for you. Didn't test it but I feel like it looks ok.

function draw() {
    var i = 0;
    var pointArray = []; 

    while (i < 10)
    {
        pointArray.push({ x: xa[i], y: ya[i] });
        i++;

    }

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Title of graph"
        },
        axisX: {
            interval: 0.05
        },
        data: [{
            type: "line",
            dataPoints: pointArray
        }]
    });
    chart.render();
} 

Answer 2

You can define your chart and then push each point to it like you tried to do:

function draw() {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Title of graph"
        },
        axisX: {
            interval: 0.05
        },
        data: [{
            type: "line",
            // Define as an empty array to use the Array.prototype.push() method
            dataPoints: [] 
        }]
    });

    // Iterate through all x data points
    // This follows the assumption that xa.length === ya.length
    // This also will scale with the size of xa
    for(var i = 0; i < xa.length; i++) {
        // Push a new {x, y} object to the dataPoints array of the first data set
        chart.data[0].dataPoints.push({x: xa[i], y: ya[i]});
    }

    chart.render();
}  

MDN Array.prototype.push()