Bar Chart Race

This interactive bar chart is rendered within the browser using SVG.

* Click on the chart to stop the race. Click again to restart it.


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/pixicharts.min.css">
    <script src="./js/pixicharts.min.js"></script>
    <style>
      #chart { width: 620px; height: 300px; padding: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Defines the series.
        const series = [
          { title: { label: 'Albania' }, data: null },
          { title: { label: 'Andorra' }, data: null },
          { title: { label: 'Austria' }, bar: { style: { fillColor: 'olive' }}, data: null },
          { title: { label: 'Belgium' }, bar: { style: { fillColor: 'cyan' }}, data: null },
          { title: { label: 'Bulgaria' }, bar: { style: { fillColor: 'indigo' }}, data: null },
          { title: { label: 'Bosnia and Herzegovina' }, data: null },
          { title: { label: 'Belarus' }, data: null },
          { title: { label: 'Switzerland' }, data: null },
          { title: { label: 'Czech Republic' }, bar: { style: { fillColor: 'tomato' }}, data: null },
          { title: { label: 'Germany' }, bar: { style: { fillColor: 'lightskyblue' }}, data: null },
          { title: { label: 'Denmark' }, data: null },
          { title: { label: 'Spain' }, bar: { style: { fillColor: 'darkviolet' }}, data: null },
          { title: { label: 'Estonia' }, data: null },
          { title: { label: 'Finland' }, data: null },
          { title: { label: 'France'}, bar: { style: { fillColor: 'deepskyblue' }}, data: null },
          { title: { label: 'Faroe Islands' }, data: null },
          { title: { label: 'United Kingdom'}, bar: { style: { fillColor: 'blue' }}, data: null },
          { title: { label: 'Gibraltar' }, data: null },
          { title: { label: 'Greece' }, bar: { style: { fillColor: 'gold' }}, data: null },
          { title: { label: 'Croatia' }, data: null },
          { title: { label: 'Hungary' }, bar: { style: { fillColor: 'orange' }}, data: null },
          { title: { label: 'Isle of Man' }, data: null },
          { title: { label: 'Ireland' }, data: null },
          { title: { label: 'Iceland' }, data: null },
          { title: { label: 'Italy' }, bar: { style: { fillColor: 'navy' }}, data: null },
          { title: { label: 'Liechtenstein' }, data: null },
          { title: { label: 'Lithuania' }, data: null },
          { title: { label: 'Luxembourg' }, data: null },
          { title: { label: 'Latvia' }, data: null },
          { title: { label: 'Monaco' }, data: null },
          { title: { label: 'Moldova' }, data: null },
          { title: { label: 'Macedonia, FYR' }, data: null },
          { title: { label: 'Malta' }, data: null },
          { title: { label: 'Montenegro' }, data: null },
          { title: { label: 'Netherlands' }, bar: { style: { fillColor: 'teal' }}, data: null },
          { title: { label: 'Norway' }, data: null },
          { title: { label: 'Poland' }, bar: { style: { fillColor: 'turquoise' }}, data: null },
          { title: { label: 'Portugal' }, bar: { style: { fillColor: 'greenyellow' }}, data: null },
          { title: { label: 'Romania' }, bar: { style: { fillColor: 'lime' }}, data: null },
          // { title: { label: 'Russian Federation', style: { fillColor: 'red' }}, data: null },
          { title: { label: 'San Marino' }, data: null },
          { title: { label: 'Serbia' }, data: null },
          { title: { label: 'Slovak Republic' }, data: null },
          { title: { label: 'Slovenia' }, data: null },
          { title: { label: 'Sweden' }, bar: { style: { fillColor: 'red' }}, data: null },
          { title: { label: 'Ukraine' }, bar: { style: { fillColor: 'fuchsia' }}, data: null },
        ];

        // Sets the options.
        const options = {
          chart: {
            width: window.innerWidth < (620 * 0.8) ? (window.innerWidth * 0.8) : 620,
            height: window.innerHeight < 440 ? window.innerHeight : 440,
          },
          title: { label: 'Urban Population in Europe' },
          subtitle: { label: '(from 1960 to 2017)' },
          footer: { label: 'source: World Bank' },
          bars: {
            number: 15,
            height: 20,
            interval: 3,
          },
          counter: {
            duration: 0.5, // in seconds,
            values: [],
          }
        };

        // Loads the data from the server.
        Pixi.load('/db/worldurbanpopulation.json', (err, xhr, resp) => {

          // Fills the series with the downloaded data.
          const data = JSON.parse(resp);
          for (let i = 0; i < series.length; i++) {
            for (let j = 0; j < data.data.length; j++) {
              if (series[i].title.label === data.data[j].country) {
                series[i].data = data.data[j].data;
                break;
              }
            }
          }
          options.counter.values = data.years;

          // Fix the chart dimensions:
          const el = document.getElementById('chart');
          el.style.width = options.chart.width + 'px';
          el.style.height = options.chart.height + 'px';

          // Draws the series.
          const chart = Pixi.Chart('#chart', 'barchartrace', series, options);

          // Listens for a click on the chart active area.
          chart.on('click', (status) => {
            if (status === 'running') { // status is 'halted' or 'running',
              chart.stop();
            } else {
              chart.start();
            }
          });

          // This is listening an event from 'loadinc.js' to stop the race
          // before this section is 'unloaded'. It is required otherwise the
          // race is still running in the background. If this section is reloaded,
          // we get two races running concurrently.
          $('.titledoc').on('click', () => {
            chart.stop();
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>
          

Methods

Main Methods

Name Return Description
.Chart (id, 'barchartrace', series, options) this Creates, draws and returns the Chart object.

Event Methods

Name Return Description
.addEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on.
.addOneTimeEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on for a one-time event.
.removeEventListener (type, listener) this Removes the event listener previously registered with addEventListener ().
.on (type, listener) this Alias on addEventListener ().
.one (type, listener) this Alias on addOneTimeEventListener ().
.off (type, listener) this Alias on removeEventListener ().

Event Types

Attribute Type Object Info
'click' String ClickEvent Fired when a mouse click occurs on the chart.

Event Objects

ClickEvent
Attribute Type Info
status String returns "running" if the race is running, "halted" if the race is stopped.

Series Options

The series are specified in an array of objects. The serie object has the following attributes:

Attribute Type Default Info
title Object empty The title object for the serie.
title.label String undefined The name of the serie.
title.style Object undefined The style associated to the title.
title.style.fillColor String undefined The fill color attribute.
title.style.fillOpacity Number undefined The color opacity attribute.
title.style.stroke String undefined The stroke color attribute.
title.style.strokeOpacity Number undefined The stroke color opacity attribute.
title.style.strokeWidth Number undefined The stroke width attribute.
bar Object undefined The bar object.
bar.style Object undefined The style associated to the bar.
bar.style.fillColor String undefined The fill color attribute.
bar.style.fillOpacity Number undefined The color opacity attribute.
bar.style.stroke String undefined The stroke color attribute.
bar.style.strokeOpacity Number undefined The stroke color opacity attribute.
bar.style.strokeWidth Number undefined The stroke width attribute.
value Object undefined The value object.
value.prefix String empty The prefix attribute.
value.suffix String empty The suffix attribute.
value.style Object undefined The style associated to the value of the bar.
value.style.fillColor String undefined The fill color attribute.
value.style.fillOpacity Number undefined The color opacity attribute.
value.style.stroke String undefined The stroke color attribute.
value.style.strokeOpacity Number undefined The stroke color opacity attribute.
value.style.strokeWidth Number undefined The stroke width attribute.
data Array empty Array of values.

Chart Options

Attribute Type Default Info
chart Object The attributes of the chart.
chart.width Number 620 The outer width of the chart.
chart.height Number 300 The outer height of the chart.
title Object The title attributes.
title.label String The name of the title.
title.x Number - The horizontal anchor position of the title.
title.y Number - The vertical anchor position of the title.
subtitle Object The subtitle attributes.
subtitle.label String The text for the subtitle.
subtitle.x Number - The horizontal anchor position of the subtitle.
subtitle.y Number - The vertical anchor position of the subtitle.
bars Object The bars attributes.
bars.number Number 1 The number of the bars visible on the chart.
bars.height Number 20 The height of the bars.
bars.interval Number 3 The interval between two bars.
counter Object The counter attributes.
counter.duration Number 1 The speed of the counter in seconds.
counter.values Array empty The counter values.

- means a computed value.