Adding New Series on Button Click - CanvasJS

Adding New Series on Button Click - CanvasJS

by Melony Barrett

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%; margin-left:auto; margin-right:auto;"></div>
<button id="addNewSeries">Add New Series</button>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", { 
    title: {
        text: "Adding New Series on Button Click"
    },
    axisX: {
        interval: 1
    },
    data: [
        {
            type: "spline",
            dataPoints: [
                { y: 1 },
                { y: 4 },
                { y: 3 },
                { y: 4 }	
            ]
        }
    ]
});
chart.render();	

$("#addNewSeries").click(function () {
   
    var type= "column";
    var fillOpacity= .4;    
    var dataPoints = [];
    for ( var i = 0; i < 4; i ++ ) {
        dataPoints.push({ y: Math.random() * 10 -5 });
    }
    chart.options.data.push( {type: type, fillOpacity: fillOpacity, dataPoints: dataPoints} );
    chart.render();
    
});