It is currently Mon Sep 24, 2018 6:52 am Advanced search

Two Graphs within the navigator using highstocks

Technical support for the Highcharts Stock package

Two Graphs within the navigator using highstocks

Postby Vats_nsdq » Tue Jun 12, 2018 11:22 am

Hi Team,

I have a requirement to show two graphs in my navigator. I am using highstocks 2.5 version and their are lot of dependencies so I cant update the version. Can you please tell me if there is a possibility to show two graph in my single chart in the navigator bar too..
Vats_nsdq
 
Posts: 2
Joined: Tue Jun 05, 2018 8:50 am

Re: Two Graphs within the navigator using highstocks

Postby daniel_s » Tue Jun 12, 2018 2:22 pm

hi Vats_nsdq,

Welcome on forum, appreciate you contacting us.
Of course the best option would be to update the Highcharts version, because there is no such feature in the old version like that, but all is not lost. You can achieve very similar effect by adding the same series and assigning it to navigator axis. This is little tricky and custom solution, but it works. I prepared an example to show you how to achieve it and you can find it below. I tried to leave comments on code, but If you don't understand some part of it, I remain at your disposal.

Live example: https://jsfiddle.net/t62j0qvo/1/

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: Two Graphs within the navigator using highstocks

Postby Vats_nsdq » Wed Jun 13, 2018 8:28 am

Hi Daniel,

Thank you so much for the quick reply. I tried to add the code snippet in my code.But this doesnt seem to work. Can you please look into it. I have given below. Also I want to show one graph only starting from Jan 15th 2018. and others from whatever date is been fetched from the response.

Code: Select all
self.highchartsBuilder.addOptions({
                    xAxis: {
                        ordinal: false,
                        type: 'datetime'
               },
               plotOptions: {
                    series: {
                        pointStart: Date.UTC(2018, 0, 15)
                    } //include space for weekends
                    }
                });
                var series = [],seriesOptions = [];
                $.each(resp.data, function (k, v) {
                    series.push({
                        data: v.chartData.cp,
                        dataGrouping: {
                            enabled: false
                        },
                        name: "CP "
                    });               
                });
                $.each(resp.data, function (k, v) {
                    series.push({
                        data: v.chartData.atap,
                        dataGrouping: {
                            enabled: false
                        },
                        name: "CPH"
                    });               
                });
               
                self.highchartsBuilder.addOptions({
                    series: series,
                    navigator: {
                        adaptToUpdatedData: false,
                        series:[ {
                            data: resp.data[0].chartData.atap
                        },{
                            data: resp.data[0].chartData.cp
                        }]
                    }
                });
                 //Add all series to navigator
                 seriesOptions.forEach(function(series, i) {
                    chart.addSeries(Object.assign({}, series, {
                    name: "",
                    xAxis: 0,
                    yAxis: 1,
                    type: "line",
                    enableMouseTracking: false,
                    showInLegend: false
                    }))
                });
Vats_nsdq
 
Posts: 2
Joined: Tue Jun 05, 2018 8:50 am

Re: Two Graphs within the navigator using highstocks

Postby daniel_s » Wed Jun 13, 2018 12:17 pm

hi Vats_nsdq,

I tried to add the code snippet in my code.But this doesnt seem to work.


First, I have to notice that is not a snippet, but an example which shows how to implement multiple series in old Highstock versions, so you need to adjust it to your code, your data and your whole project. The code you provide me with is not enough to deduce what is happening. Could you provide me with reproduced live example (e.g JSFiddle, Files, URL) where I would be able to see the problem?

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 0 guests