Daisy-chain multiple chart rendering

This tutorial shows how we can implement a simple daisy-chain to render multiple charts one at a time, with a custom delay. This approach might help ease the initial load on a chart-heavy pages.

Implementing the queue

The idea is this: instead of creating a chart instantly, we wrap it into a function and push the function reference into an array (queue).

let queue = [];
let delay = 1000;

function nextChart() {
  let nextFunc = queue.shift();
  nextFunc.call();
  if (queue.length) {
    setTimeout(nextChart, delay);
  }
}

var queue = [];
var delay = 1000;

function nextChart() {
  var nextFunc = queue.shift();
  nextFunc.call();
  if (queue.length) {
    setTimeout(nextChart, delay);
  }
}

Queueing the charts

We can now start adding charts to the queue:

queue.push(function() {
  // Create chart #1
});

queue.push(function() {
  // Create chart #2
});

queue.push(function() {
  // Create chart #3
});

queue.push(function() {
  // Create chart #1
});

queue.push(function() {
  // Create chart #2
});

queue.push(function() {
  // Create chart #3
});

Processing the queue

Once we're ready, we start picking one function at a time, calling it, and waiting a bit, before repeating.

nextChart();

nextChart();

The nextChart() function should be called only once. It will check if there are other charts in the queue and will schedule next run of itself automatically.

Demo

See the Pen Daisy-chaining charts by amCharts team (@amcharts) on CodePen.