Stacked area chart example: Population over time
Stacked time series chart that compares population change across multiple countries. The tooltip will display the value of each series, allowing the user to see the population of each country when hovering over a specific year or decade.
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
function success(data){
t = new TimeChart(
{
container: document.getElementById("demo"),
data:[
{
units:["y"],
id: "spain",
preloaded: {unit: "y", values:data.Spain.values, dataLimitFrom: data.Spain.dataLimitFrom, dataLimitTo:data.Spain.dataLimitTo}
},
{
units:["y"],
id: "russia",
preloaded: {unit: "y", values:data["Russian Federation"].values, dataLimitFrom: data["Russian Federation"].dataLimitFrom, dataLimitTo:data["Russian Federation"].dataLimitT}
},
{
units:["y"],
id: "italy",
preloaded: {unit: "y", values:data.Italy.values, dataLimitFrom: data.Italy.dataLimitFrom, dataLimitTo:data.Italy.dataLimitT}
},
{
units:["y"],
id: "germany",
preloaded: {unit: "y", values:data.Germany.values, dataLimitFrom: data.Germany.dataLimitFrom, dataLimitTo:data.Germany.dataLimitT}
},
{
units:["y"],
id: "france",
preloaded: {unit: "y", values:data.France.values, dataLimitFrom: data.France.dataLimitFrom, dataLimitTo:data.France.dataLimitT}
},
{
units:["y"],
id: "poland",
preloaded: {unit: "y", values:data.Poland.values, dataLimitFrom: data.Poland.dataLimitFrom, dataLimitTo:data.Poland.dataLimitT}
}
],
valueAxisDefault:{ title: "Population, count" },
series:[
{
name:"Spain",
id:"series1",
type:"line",
data:{
index:1,
aggregation:"avg",
source:"spain"
},
style:{
fillColor:"#ba0606",
lineColor:"#ba0606"
},
stack: "default"
},
{
name:"Russian Federation",
id:"series2",
type:"line",
data:{
index:1,
aggregation:"avg",
source:"russia"
},
style:{
fillColor:"red",
lineColor:"red"
},
stack: "default"
},
{
name:"Italy",
id:"series3",
type:"line",
data:{
index:1,
aggregation:"avg",
source:"italy"
},
style:{
fillColor:"#2092e2",
lineColor:"#2092e2"
},
stack: "default"
},
{
name:"Germany",
id:"series4",
type:"line",
data:{
index:1,
aggregation:"avg",
source:"germany"
},
style:{
fillColor:"#4c4c4c",
lineColor:"#4c4c4c"
},
stack: "default"
},
{
name:"France",
id:"series5",
type:"line",
data:{
index:1,
aggregation:"avg",
source:"france"
},
style:{
fillColor:"#0a3ccc",
lineColor:"#0a3ccc"
},
stack: "default"
},
{
name:"Poland",
id:"series6",
type:"line",
data:{
index:1,
aggregation:"avg",
source:"poland"
},
style:{
fillColor:"#aaaaaa",
lineColor:"#aaaaaa"
},
stack: "default"
}
],
navigation: {
initialDisplayUnit: "1 y",
initialDisplayPeriod: "50 y",
initialDisplayAnchor: "newestData"
},
area: {
displayUnits: [
{name: "year", unit: "1 y"},
{name: "10 years", unit: "10 y"}
]
},
currentTime: {enabled: false}
}
);
}
// using a custom library to load CSV data
loadCSV("/dvsl/data/time-chart/world-population-since-1960.csv", "y", [
{type: "string"},
{type: "string"},
{type: "date", format:"([0-9]+)", fields: [1,2,3], process: [null, null, function(a){return 0;}, function(a){return 1;}]},
{type: "decimal"}
], ",",function(data){
var countries = {};
for (var x in data.values){
var r = data.values[x];
if (!countries[r[0]]){
countries[r[0]] = {};
countries[r[0]].values = [];
}
if (!countries[r[0]].dataLimitFrom) {
countries[r[0]].dataLimitFrom = r[2];
countries[r[0]].dataLimitTo = 0;
}
countries[r[0]].dataLimitFrom = countries[r[0]].dataLimitFrom > r[2] ? r[2] : countries[r[0]].dataLimitFrom;
countries[r[0]].dataLimitTo = countries[r[0]].dataLimitTo < r[2] ? r[2] : countries[r[0]].dataLimitTo;
countries[r[0]].values.push([r[2],r[3]]);
}
success(countries);
});