While zooming my Bar amchart is rendering very slow when data is large, that is, 2975 points. Although, rendering is fine but it is lagging while zooming in/out using drag icon. The code is as below:
for(var i=0; i<title.length; i++) {
var graphElem = {
"title":title[i],
"valueField":valueFields[i],
"valueAxis":"v1",
"type": "column",
"fillAlphas": 0.8,
"lineAlpha": 0.2
};
graph.push(graphElem);
}
var chart = AmCharts.makeChart(graphType, {
"type": "serial",
"theme": "light",
"pathToImages": "/grm/images/",
"legend": {
"equalWidths": false,
"position": "bottom",
"spacing": 3,
"markerSize":8,
},
"dataProvider": dataProvider,
"valueAxes": [ {
"id":"v1",
"axisThickness": 1,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "left",
"integersOnly" : true
} ],
"columnSpacing" : 0,
"graphs": graph,
"chartScrollbar": {
"dragIconHeight" : 25,
"dragIconWidth" : 25
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN"
},
"categoryField": "linkTimestamp",
"categoryAxis": {
"parseDates": true,
"axisColor": "#000000",
"minPeriod": "mm"
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS"
} );
chart.addListener("dataUpdated", zoomChart);
zoomChart();
function zoomChart(){
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}
if i use graph other than the bar(column) chart, zoom in/out is fast but it is lagging only in case of "type": "column"
. Please help where am i making mistake. Thanks
Try to only allow the re-rendering to happen after the zoom by setting updateOnReleaseOnly to
true
.