For a long time I have been using Amcharts3. For many reasons I am currently rewriting my application and "upgrading" various things, so it made sense to upgrade AmCharts too.
Except it is so slow....
This fiddle:
https://jsfiddle.net/jhartnoll/e1g25y8v/
Here I have a set of charts showing shipping receipts for 5 locations over a 12 month period, so 60 data points.
If you click each button it will render charts using the same data and almost the same config for Amcharts 3 and 4 respectively.
Firstly Amcharts 4 is much slower to do anything, there's what feels like a few seconds after clicking the button before anything shows at all.
Secondly, when it does show, the way my time logging is working it suggests that the "ready" event on Amcharts4 is not fired until all the charts are loaded. This must be something to do with the way it daisy-chains charts.
Of course the binding to events is slightly different:
events: {
"ready": function(ev) {
var total = performance.now() - start;
$("#shippingReceipts").append($("<div/>").text("took: " + total + "ms"))
console.log("chart_" + name + " ready", );
}
}
"listeners": [{
"event": "rendered",
"method": handleRender
}]
This is for a Admin Dashboard which will show this plus about 4 other charts, not only does it result in a load of blank boxes on startup, it also seems to tie up the browser for a second or so whilst writing these charts.
I've always been very impressed with AmCharts so can't believe that what I am seeing here is correct - I must have done something wrong, but I have wasted two days on it so far and whatever I do its always desperately slow!
Any ideas?
EDIT/Update:
I have messed around with the createDeferred function suggested here: https://www.amcharts.com/docs/v4/concepts/performance/#Deferred_daisy_chained_instantiation
New jsFiddle here:
https://jsfiddle.net/jhartnoll/4587a0q3/
Whilst this provides a slightly better user experience, I am still disappointed at how slow each chart is to render.