Optimizing multi-chart, periodically-updated dashboards

Problem

Having a lot of charts on the same page can put a significant strain on the browser. Especially if those charts are updated dynamically.

Typically, in dynamic dashboards, you'd update chart's dataProvider and call its validateData() method. While the operation is hardly noticeable for one chart, on multi-chart dashboards they can pile up, especially if there are many dashboards, updating at the same time. This can even bring your dashboards to a crawl.

While you can amCharts has some thread simulation in place, to give your browser some breathing space across updates, it can still put a lot of burden on it.

Solution

The solution in this case could be "daisy-chaining" of chart data updates. What this basically means is that instead of updating all charts at once, we queue updates so at any give time, only one chart is updating. When it's done -- dataUpdated event kicks in -- we jump onto the next one in the queue, and so on.

This alone will ensure, that your dashboard page becomes much more responsive.

This demo shows how you can add functions, queue and events required for daisy-chained chart updates.