To achieve a real-time values per minute chart, the last bar value is to be incremented every minute after its addition. Additionally, a new bar with a value of 1 will be added each minute while removing the oldest bar.
All these changes need to be animated similar to the example provided below.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": generateChartData(),
"graphs": [{
"valueField": "value",
"type": "column",
"fillAlphas": 1,
"alphaField": "alpha1"
}, {
"valueField": "value2",
"fillAlphas": 1,
"type": "column",
"alphaField": "alpha2"
}],
"valueAxes": [{
"minimum": 0,
"maximum": 400
}],
"chartCursor": {},
"categoryAxis": {
"parseDates": true,
"minPeriod": "mm"
},
"zoomOutOnDataUpdate": false,
"categoryField": "date"
});
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, Math.floor(Math.random() * 10), 0, 0);
for (var i = 0; i < 10; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = Math.round(Math.random() * (200 + i)) + 100 + i;
var b = Math.round(Math.random() * (200 + i)) + 100 + i;
chartData.push({
date: newDate,
value: a,
value2: b,
alpha1: (Math.random() < 0.5 ? 0 : 1),
alpha2: (Math.random() < 0.5 ? 0 : 1)
});
}
return chartData;
}
function loop() {
var data = generateChartData();
chart.animateData(data, {
duration: 1000,
complete: function () {
setTimeout(loop, 2000);
}
});
}
chart.addListener("init", function () {
setTimeout(loop, 1000);
});html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script>
<div id="chartdiv"></div>I have set up the codepen with a bar chart and its data update here. I am using the animateData() method as shown in the example, but the chart does not animate. What might be the issue?