dynamically toggling the stock chart navigator to get vertical space for the chart? - Javascript highcharts

Javascript examples for highcharts:Stock Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Stock Chart

Description

dynamically toggling the stock chart navigator to get vertical space for the chart?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from   w w w .  jav  a 2 s .  c o  m*/
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        // Create the chart
        var chart = $('#container').highcharts('StockChart', {
            chart: {
                reflow: false
            },
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'AAPL Stock Price'
            },
            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        }, function (chart) {
            window.chart = chart;
            $('#btn').toggle(function () {
                chart.scroller.xAxis.labelGroup.hide();
                chart.scroller.xAxis.gridGroup.hide();
                chart.scroller.series.hide();
                chart.scroller.scrollbar.hide();
                chart.scroller.scrollbarGroup.hide();
                chart.scroller.scrollbarRifles.hide();
                chart.scroller.navigatorGroup.hide();
                $.each(chart.scroller.elementsToDestroy, function (i, elem) {
                    elem.hide();
                });
                // reduce chart height as well
                var navHeight = chart.scroller.navigatorGroup.getBBox().height;
                var chartHeight = $('#container').height();
                $('#container').height(chartHeight - navHeight);
                $('.highcharts-container').height(chartHeight - navHeight);
            }, function () {
                chart.scroller.xAxis.labelGroup.show();
                chart.scroller.xAxis.gridGroup.show();
                chart.scroller.series.show();
                chart.scroller.navigatorGroup.show();
                chart.scroller.scrollbar.show();
                chart.scroller.scrollbarGroup.show();
                chart.scroller.scrollbarRifles.show();
                $.each(chart.scroller.elementsToDestroy, function (i, elem) {
                    elem.show();
                });
                // restore original chart height
                var navHeight = chart.scroller.navigatorGroup.getBBox().height;
                var chartHeight = $('#container').height();
                $('#container').height(chartHeight + navHeight);
                $('.highcharts-container').height(chartHeight + navHeight);
            });
        });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container" style="height: 500px; min-width: 500px"></div> 
      <button id="btn">Show / hide</button>  
   </body>
</html>

Related Tutorials