Home Forums Chart Support dynamic data points

dynamic data points

Viewing 2 posts - 1 through 2 (of 2 total)
  • #6333

    var chart = new CanvasJS.Chart(“chartContainer”, {

    text: “Fruits sold in First Quarter”
    data: [//array of dataSeries
    { //dataSeries object

    /*** Change type “column” to “bar”, “area”, “line” or “pie”***/
    type: “column”,
    dataPoints: [
    { label: “banana”, y: 18 },
    { label: “orange”, y: 29 },
    { label: “apple”, y: 40 },
    { label: “mango”, y: 34 },
    { label: “grape”, y: 24 }


    here orange,apple are not dynamically buliding, if i want some dynamical data in chart how can i pass


    Here you have already passed the dataPoints value and hence the chart will be rendered with all the dataPoints.

    To create a dynamic chart, you will have to create and assign dataPoints to a pre-defined variable (Eg: dps). After which you will have to create a function which adds the next dataPoint and call chart.render(). Then you can call the function at regular intervals which adds the dataPoint and renders the chart.
    Please take a look at the code snippet below,

    var xVal = dps.length + 1;
    var yVal = 100;	
    var updateInterval = 1000;
    var updateChart = function () {
    		yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
    		dps.push({x: xVal,y: yVal,});
    setInterval(function(){updateChart()}, updateInterval); 

    Please take a look at this documentation page link for a step-by-step tutorial to create a dynamic chart that updates dataPoints at regular intervals.

    dynamic line chart

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.