<!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>