Page 1 of 1

multiple series with summed single area

Posted: Sat Nov 20, 2021 12:15 pm
by p0nts
Currently the graphs code is looking like this:

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);
                        }
                    }
                },
            });
        });
Screenshot 2021-11-20 at 13.14.11.png
Screenshot 2021-11-20 at 13.14.11.png (89.48 KiB) Viewed 743 times
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?

Re: multiple series with summed single area

Posted: Mon Nov 22, 2021 8:50 am
by magdalena
Hello p0nts,

Welcome to our forum and thanks for contacting us with your question!

I'm not sure if I understand correctly what exactly would you like to achieve. Would you like to create a additional line series based on the summed values of each tick of all series right?

If that is the case, could you please provide some data or reproduce your example in an online editor that I could work on? You can start here: https://jsfiddle.net/BlackLabel/0pbeym97

Regards!

Re: multiple series with summed single area

Posted: Wed Nov 24, 2021 11:26 am
by p0nts
Hi Magdalena,

Thank you so much for your answer.

Here is the jsfiddle of my case:

https://jsfiddle.net/p42bgr39/

Here you can see multiple series in one graph, all plotted apart from eachother.

What i'd like to see, is one line with for each tick (epoch timestamp) a summed value of all the included series.

For example if at the 29th of March the series had: 5 - 10 - 11 - 12
The graph should show one line where it gives 38 on the 29th of March.

So, a summed value per time tick of each included series.

Hopefully I explain good now :)

Thanks in advance.

Re: multiple series with summed single area

Posted: Thu Nov 25, 2021 12:05 pm
by magdalena
Hi,

Thank you for preparing the demo!

Here is an example of how to add series based on the summed other series data.

Demo:
https://jsfiddle.net/BlackLabel/v38t4c07/

To update the sum series follow that parsing logic. In case of any trouble feel free to ask for assistance!

Regards!

Re: multiple series with summed single area

Posted: Thu Nov 25, 2021 9:24 pm
by p0nts
Thank you so much, this looks great! Is it also possible to remove all the single lines and only show the summed line so it does not look like a mess when you combine loads of series (like 20+)

Re: multiple series with summed single area

Posted: Fri Nov 26, 2021 7:37 am
by p0nts
I guess I have found a way, is this proper?

https://jsfiddle.net/6jk4ox9v/

Re: multiple series with summed single area

Posted: Fri Nov 26, 2021 9:51 am
by magdalena
Hi,

I'm not sure if this method will be optional during updating data. You can also try to "hide" series by setting the colour to transparent and disabling mouse tracking on them.

Demo:
https://jsfiddle.net/BlackLabel/u9ywejb8/

Let me know if you have any further questions,
Regards!

Re: multiple series with summed single area

Posted: Fri Nov 26, 2021 10:37 am
by p0nts
That seems like a better choice, thank you so much!

case closed.

Re: multiple series with summed single area

Posted: Fri Nov 26, 2021 11:30 am
by magdalena
You're welcome! In case of any further questions, feel free to contact us again.