Add New DataPoint on click of a button - CanvasJS

Add New DataPoint on click of a button - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width:100%; height:300px;"></div>
<button id="button">Add DataPoints</button>

JavaScript

var x = 5;
var y = 5;
var dataPoints = [];

function addDataPoint() {
    for(var i = 0 ; i < 1; i++) {
        x += 1;
        y += Math.random() + 1;
        dataPoints.push({x: x, y: y});  
    }
    chart.render();
}  


dataPoints = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}, {x: 4, y: 4}, {x: 5, y: 5}];

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Click on the button to add new DataPoints",
    },
    axisX: {
        interval: 1,
    },
    data: [
        {
            type: "line",
            showInLegend: true,			
            dataPoints: dataPoints,
        }
    ]
});
chart.render();


var click = document.getElementById("button");
button.addEventListener("click",addDataPoint);