multiple series with summed single area
Posted: Sat Nov 20, 2021 12:15 pm
Currently the graphs code is looking like this:
It will show a graph with multiple lines stacked on top of each other, which is what I want in general... But the only thing I'd like to see different is that all the separate lines are moved to one line with the summed value of each line on each tick.
Is this possible?
Code: Select all
Highcharts.getJSON('/bulk-graph-data', function (data) {
var chart = Highcharts.stockChart('highcharts-test', {
xAxis: {
gapGridLineWidth: 0,
},
yAxis: {
opposite: false,
},
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
buttonTheme: {
width: 60,
},
allButtonsEnabled: true,
inputBoxWidth: 120,
inputBoxHeight: 18,
buttons: [{
type: 'all',
count: 3,
text: 'Daily',
dataGrouping: {
approximation: 'sum',
forced: true,
units: [['day', [1]]]
}
}, {
type: 'all',
count: 1,
text: 'Weekly',
dataGrouping: {
approximation: 'sum',
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
approximation: 'sum',
forced: true,
units: [['month', [1]]]
}
}],
selected: 0
},
title: {
text: ''
},
series: data,
tooltip: {
pointFormat: '<b>{series.name}</b>: {point.y}',
changeDecimals: 4,
valueDecimals: 4
},
plotOptions: {
series: {
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['day', [1]]
]
}
}
},
subtitle: {
text: 'Last updated at: '+new Date().toUTCString(),
},
credits: {
enabled: false
},
chart: {
events: {
load: function () {
// update chart data every 10 seconds
var series = this.series[0];
setInterval(function () {
$.getJSON('/bulk-graph-data', function (data) {
series.setData(data)
});
// update subtitle
chart.setSubtitle({ text: "Last updated at: "+new Date().toUTCString()});
}, 5000);
}
}
},
});
});
Is this possible?