Solutions Engineer
Published
Edited
Feb 10, 2020
2 forks
1 star
md`# Stacked Area Chart`
html`<div id='container' style="height:400px;position:relative;"></div>`
picasso = require("picasso.js")
data = {
var arr = [['Year', 'Month', 'Sales']];
var months = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'June',
'July',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
];
for (var i = 0; i < 6; i++) {
for (var m = 0; m < months.length; m++) {
arr.push([
String(2010 + i),
months[m],
parseFloat((Math.random() * 10000).toFixed(0)),
parseFloat((Math.random() * 100).toFixed(0))
]);
}
}
return [
{
type: 'matrix',
data: arr
}
];
}
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
collections: [
{
key: 'stacked',
data: {
extract: {
field: 'Month',
props: {
line: { field: 'Year' },
end: { field: 'Sales' }
}
},
stack: {
stackKey: d => d.value,
value: d => d.end.value
}
}
}
],
scales: {
y: {
data: {
collection: {
key: 'stacked'
}
},
invert: true,
expand: 0.2,
min: 0
},
t: { data: { extract: { field: 'Month' } } },
color: { data: { extract: { field: 'Year' } }, type: 'color' }
},
components: [
{
type: 'axis',
dock: 'left',
scale: 'y'
},
{
type: 'axis',
dock: 'bottom',
scale: 't'
},
{
key: 'lines',
type: 'line',
data: {
collection: 'stacked'
},
settings: {
coordinates: {
major: { scale: 't' },
minor0: { scale: 'y', ref: 'start' },
minor: { scale: 'y', ref: 'end' },
layerId: { ref: 'line' }
},
layers: {
curve: 'monotone',
line: {
show: true
},
area: {
fill: { scale: 'color', ref: 'line' }
}
}
}
}
]
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
