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).

TypeScript

let queue = [];
let delay = 1000;

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

JavaScript

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:

TypeScript

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

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

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

JavaScript

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.

TypeScript

nextChart();

JavaScript

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

Open in CodePen