TheLazy.Dev
Portfolio GitHub

Blog

vizzu |javascript |dataviz |animatedgif

Customizing Vizzu Charts - GIF export using gif.js

simzer

Simon L谩szl贸

Posted on April 11, 2023

Customizing Vizzu Charts - GIF export using gif.js

Vizzu is a JavaScript library that allows you to create interactive and animated charts. In this tutorial, we'll show you how to create a Vizzu chart and export it as a GIF using the gif.js library that you can use in your presentations, reports, or any other project.

In the first part of the article, we will show how to import GIF.js from CDN, and then in the second part, we will connect it to our Vizzu chart.

Prerequisites

Before you start this tutorial, it's best that you have a basic understanding of JavaScript, Vizzu, and GIF.js. You can find the corresponding documentation here:

Step 0: Getting Started

To get started, create a new HTML file and include the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vizzu Chart to GIF</title>
  </head>
  <body>
    <div id="vizzu-container" style="width:500px; height:350px;"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This new HTML file contains an empty div element that will be used to render the Vizzu chart. You can set the div's width and height style parameters to control the size of the exported GIF. We also include the JavaScript file called 'index.js' that we'll create next.

You'll need to have Vizzu and GIF.js imported into your project. You can do this by adding the following code to your JavaScript file:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
import 'https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js';
Enter fullscreen mode Exit fullscreen mode

Step 1: Set up the GIF.js instance.

Get the container element that will hold your visualizations.

let container = document.getElementById("vizzu-container");
Enter fullscreen mode Exit fullscreen mode

Now we need to fetch the worker script manually from the CDN because modern web browsers have security restrictions that require the worker script to be loaded from the same origin as the web page. So, we fetch the worker script and use URL.createObjectURL to create a Blob URL, which ensures that the worker script is loaded from the same origin as the web page.

let gifLoading = fetch('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.worker.js')
  .then((response) => {
    if (!response.ok)
      throw new Error("Network response was not OK");
    return response.blob();
  })
Enter fullscreen mode Exit fullscreen mode

Create a new GIF instance and configure it.

  .then(workerBlob => {
    let gif = new GIF({
      workers: 4,
      workerScript: URL.createObjectURL(workerBlob),
      quality: 10,
      width: container.clientWidth,
      height: container.clientHeight
    });
Enter fullscreen mode Exit fullscreen mode

Set up the 'finished' event listener for the GIF.js instance. This will open the GIF in a new tab when the GIF is completed.

    gif.on('finished', function(blob) {
      window.open(URL.createObjectURL(blob));
    });

    return gif;
  });
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the Vizzu Chart

First, you will need some data to visualize:

let data = {
  series: [
    { name: 'Foo', values: ['Alice', 'Bob', 'Ted'] },
    { name: 'Bar', values: [15, 32, 12] },
    { name: 'Baz', values: [5, 3, 2] }
  ]
};
Enter fullscreen mode Exit fullscreen mode

Next, you need to initialize the Vizzu chart and wait for it along with GIF renderer to finish loading. You can do this using the following code:

let vizzu = new Vizzu(container, { data });

Promise.all([vizzu.initializing, gifLoading])
.then(([chart, gif]) => {
  // ...
});
Enter fullscreen mode Exit fullscreen mode

Once the Vizzu chart and GIF renderer are loaded, you can add content to your chart. We will use a simple example chart shown in the README of Vizzu.

But first. You have to set up rendering the chart frames as GIF frames. You can do this by adding a callback function to the logo-draw event of the chart, which is fired every time the chart is redrawn. The callback function adds the current rendering context of the chart as a new frame to the GIF renderer with a delay of 25 milliseconds between frames.

chart.on('logo-draw', event => {
  gif.addFrame(event.renderingContext, {copy: true, delay: 25});
});
Enter fullscreen mode Exit fullscreen mode

Finally, you need to create and animate the Vizzu chart and render the GIF. In this example, we'll create a simple bar chart with two series, 'Foo' and 'Bar':

chart.animate({
  x: 'Foo',
  y: 'Bar'
})
Enter fullscreen mode Exit fullscreen mode

Then we will animate the chart to a scatterplot:

.then(chart => chart.animate({
  color: 'Foo',
  x: 'Baz',
  geometry: 'circle'
}))
Enter fullscreen mode Exit fullscreen mode

Finally, when the Vizzu chart has finished animating, we call the gif.render() method to create the final GIF animation.

.then(() => { gif.render(); });
Enter fullscreen mode Exit fullscreen mode

Experience a live example by running this Pen! You're free to edit the code and rerun it as many times as you'd like. However, please keep in mind that it may take up to 25 seconds for the 'Download GIF' button to appear, as gif.js is actively generating the GIF during this time.

That's it! Now, when you load your web page, you should see a Vizzu chart animated as a GIF. You can customize the chart and the GIF options to fit your needs.

馃挅 馃挭 馃檯 馃毄
simzer
Simon L谩szl贸

Posted on April 11, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Customizing Vizzu Charts - GIF export using gif.js
vizzu Customizing Vizzu Charts - GIF export using gif.js

April 11, 2023