p0nts
Posts: 5
Joined: Sat Nov 20, 2021 12:10 pm

multiple series with summed single area

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 708 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?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: multiple series with summed single area

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!
Magdalena Gut
Developer and Highcharts Support Engineer
p0nts
Posts: 5
Joined: Sat Nov 20, 2021 12:10 pm

Re: multiple series with summed single area

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.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: multiple series with summed single area

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!
Magdalena Gut
Developer and Highcharts Support Engineer
p0nts
Posts: 5
Joined: Sat Nov 20, 2021 12:10 pm

Re: multiple series with summed single area

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+)
p0nts
Posts: 5
Joined: Sat Nov 20, 2021 12:10 pm

Re: multiple series with summed single area

I guess I have found a way, is this proper?

https://jsfiddle.net/6jk4ox9v/
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: multiple series with summed single area

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!
Magdalena Gut
Developer and Highcharts Support Engineer
p0nts
Posts: 5
Joined: Sat Nov 20, 2021 12:10 pm

Re: multiple series with summed single area

That seems like a better choice, thank you so much!

case closed.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: multiple series with summed single area

You're welcome! In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Stock”