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

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';

let container = document.getElementById("vizzu-container");

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();
  })
  .then(workerBlob => {
    let gif = new GIF({
      workers: 4,
      workerScript: URL.createObjectURL(workerBlob),
      quality: 10,
      width: container.clientWidth*window.devicePixelRatio,
      height: container.clientHeight*window.devicePixelRatio
    });
    gif.on('finished', function(blob) {
     		let button = document.createElement("button");
      		button.innerText = "Download GIF";
      		button.style.position = 'absolute';
    		  button.style.top = '30px'; 
	      	button.style.left = '30px';
      		container.parentElement.appendChild(button);
      		button.addEventListener('click', event => {
            let link = document.createElement('a');
            link.download = 'vizzu.gif';
            link.href = URL.createObjectURL(blob);
            link.click();
            URL.revokeObjectURL(link.href);
          });   
		});
    return gif;
  });

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

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

Promise.all([vizzu.initializing, gifLoading])
.then(([chart, gif]) => {

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

  chart.animate({
    x: 'Foo',
    y: 'Bar'
  })
  .then(chart => chart.animate({
    color: 'Foo',
    x: 'Baz',
    geometry: 'circle'
  }))
  .then((chart) => {
    gif.render(); 
  });

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.