Published
Edited
Aug 1, 2018
1 star
options = ({
chart: {
height: 380,
type: "area",
stacked: true,
scroller: {
enabled: true
},
events: {
selection: function(chart, e) {
console.log(new Date(e.xaxis.min));
}
}
},
colors: ["#008FFB", "#00E396", "#CED4DC"],
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth"
},
series: [
{
name: "South",
data: generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 20, {
min: 10,
max: 60
})
},
{
name: "North",
data: generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 20, {
min: 10,
max: 20
})
},
{
name: "Central",
data: generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 20, {
min: 10,
max: 15
})
}
],
fill: {
gradient: {
enabled: true,
opacityFrom: 0.6,
opacityTo: 0.8
}
},
legend: {
position: "top",
horizontalAlign: "left"
},
xaxis: {
type: "datetime"
}
})
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
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.
