Time Chart - stacked area
World population since 1960's
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);
});