You must be logged in to post your query.
Home › Forums › Chart Support › dynamic data points
var chart = new CanvasJS.Chart(“chartContainer”, {
title:{ 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 } ] } ] });
chart.render();
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,}); xVal++; chart.render(); }; 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.
You must be logged in to reply to this topic. Login/Register