CODEWITHSUNDEEP
javascriptjqueryhighcharts
ABH
ABH

Reputation: 119

Highcharts multiple graphs stacked in seperate "<div>" with combine zooming

I am looking for a basic example from Highcharts where the following is done

a. 3 separate graphs windows stacked on top of each other b. combine zoom option where all three separate graphs can bee zoomed for data.

what I was looking is "highstock" data where i can add more windows.

thanks, Bilal

Upvotes: 1

Views: 343

Answers (3)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

@Bial I have created a fiddle for your use-case, view the fiddle at https://jsfiddle.net/Nishith/4b33pvc2/ Its having 3 series with navigator.

code for each series is like below : 

{
                      name : 'critical alarm',
                      data :data.criticalAlarmCountTimeseries,
                      id : 'critical',
                      zIndex : 1,
                      lineWidth:3,
                      color:'red',
                      yAxis: 0 ,
                      marker : {
                          enabled : false

                      } 
                  }

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can catch afterSetExtremes on xAxis chart and call setExtremes on the other charts to "zoom".

                    events: {
                         afterSetExtremes: function() {
                             if (controllingChart == "chart3") {
                                    var xMin = this.chart.xAxis[0].min;
                                    var xMax = this.chart.xAxis[0].max;
                                    chart1.xAxis[0].setExtremes(xMin,
                                                                xMax,
                                                                true);
                                    chart2.xAxis[0].setExtremes(xMin,
                                                                xMax,
                                                                true);
                                }
                           }
                     }

Example: http://jsfiddle.net/Gv7Tg/33/

Upvotes: 0

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

You can refer this example 

  yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '60%',
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
                units: groupingUnits
            }
        }]

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

You may use any number of y-axis i.e stacked graphs

Upvotes: 1

Related Questions