Multiple Charts Latency Issue, Svg Or Html5 Canvas?

I'm looking to build a dynamic and interactive multiple charts using Javascript. In this exercise involves moving/panning multiple charts simultaneously. I've implemented this exe

Solution 1:

Since you mentioned amCharts, my answer is going to be related to this vendor. I strongly suggest you revise your question so it's not a request for recommendation (which is against SO rules), but rather a specific question about implementation details.

In any case, every chart, regardless of vendor or rendering technology used, takes up resources. Having many charts will add up and will bring down your web application sooner or later.

That being said there is a number of ways you can work around that.

Lazy-loading

It works by delaying chart initialization until it is actually visible.

Here's a good example and comment about how lazy-loading can be implemented in amCharts.

https://www.amcharts.com/kbase/lazy-loading-120-charts-page/

You'll see that having 120 charts on a single page works flawlessly.

Daisy-chaining chart init/update

The biggest issue is not that a computer can't handle 100 charts, but that they all start initializing at once. Init is a very resource-heavy operation. Multiply it by 100 and you get a lockup.

The solution is to "daisy-chain" chart initialization. It works by queuing chart inits and updates. The chart build is started only when the build of the previous chart is finished.

Something like this:

var chartQueue = [];

functionaddChart( container, config ) {
  chartQueue.push( {
    container: container,
    config: config;
  } )
}

functionprocessChart() {
  var chart;
  if ( chart = chartQueue.shift() ) {
    var chartObj = AmCharts.makeChart( chart.container, chart.config );
    chartObj.addListener( "rendered", function() {
      setTimeout( processChart, 100 );
    } );
  }
}

addChart( "chart1", {/* config */} );
addChart( "chart2", {/* config */} );
addChart( "chart3", {/* config */} );
addChart( "chart4", {/* config */} );
addChart( "chart5", {/* config */} );

processChart();

And here's another tutorial/demo of daisy-chained chart updates:

https://www.amcharts.com/kbase/optimizing-multi-chart-periodically-updated-dashboards/

I hope that helps.