InkStitch - data visualization/highcharts area chart: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<source lang="javascript"> // This was made to create SVG for embroidery with InkStitch // See: https://edutechwiki.unige.ch/en/InkStitch_-_data_visualization // Original: ht...") |
(No difference)
|
Revision as of 11:39, 21 August 2018
// This was made to create SVG for embroidery with InkStitch
// See: https://edutechwiki.unige.ch/en/InkStitch_-_data_visualization
// Original: https://www.highcharts.com/demo/area-stacked
// Daniel K. Schneider, University of Geneva, Aug 2018
Highcharts.chart("container", {
chart: {
type: "area",
spacingTop: 20,
width: 670, //pixels only. That will be DPI dependant.
height: "72%"
},
title: {
text: "Worldwide Population Growth",
align: "left",
style: { fontSize: "27pt", fontWeight: "bold", color: "black" }
},
legend: {
itemStyle: {
fontSize: "20pt"
}
},
// subtitle: {text: 'Source: Wikipedia.org'},
xAxis: {
categories: ["1750", "1800", "1850", "1900", "1950", "1999", "2050"],
tickmarkPlacement: "on",
title: {
enabled: false
},
labels: {
// padding: 10,
align: "center",
// reserveSpace: true,
style: {
fontSize: "20pt",
fontWeight: "bold",
color: "red"
}
}
},
yAxis: {
title: {
text: "Billions",
style: {
fontSize: "24pt",
fontWeight: "bold",
color: "black",
whiteSpace: "nowrap"
}
},
labels: {
formatter: function() {
return this.value / 1000;
},
style: {
fontSize: "20pt",
fontWeight: "bold",
color: "red"
}
}
},
tooltip: {
split: true,
valueSuffix: " millions"
},
Options: {
area: {
stacking: "normal",
lineColor: "#666666",
lineWidth: 1,
marker: {
// little markers cannot be stitched easily
enabled: false,
lineWidth: 1,
lineColor: "#666666"
}
}
},
series: [
{
name: "Asia",
data: [502, 635, 809, 947, 1402, 3634, 5268]
},
{
name: "Africa",
data: [106, 107, 111, 133, 221, 767, 1766]
},
{
name: "Europe",
data: [163, 203, 276, 408, 547, 729, 628]
},
{
name: "America",
data: [18, 31, 54, 156, 339, 818, 1201]
},
// {name: "Oceania",data: [2, 2, 2, 6, 13, 30, 46] }
]
});