Highstock panning asynchronously loading data - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

Highstock panning asynchronously loading data

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() {/*  ww  w .j  a v  a 2  s . c o  m*/
   $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function(data) {
      // Add a null value for the end date
      data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
      // create the chart
      window.chart = new Highcharts.StockChart({
         chart : {
            renderTo : 'container',
            type: 'candlestick'
         },
         navigator : {enabled: false},
            scrollbar : {enabled: false},
         rangeSelector : {
            buttons: [{
               type: 'hour',
               count: 1,
               text: '1h'
            }, {
               type: 'day',
               count: 1,
               text: '1d'
            }, {
               type: 'month',
               count: 1,
               text: '1m'
            }, {
               type: 'year',
               count: 1,
               text: '1y'
            }, {
               type: 'all',
               text: 'All'
            }],
            inputEnabled: false, // it supports only days
            selected : 3 // all
         },
            xAxis: {
                ordinal: false
            },
         series : [{
            data : data,
            dataGrouping: {
               enabled: false
            }
         }]
        }, function (chart) {
            var report = document.getElementById('report'),
                xAxis = chart.xAxis[0],
                startX;
            function drag(e) {
                e = chart.tracker.normalizeMouseEvent(e);
                startX = e.chartX;
            }
            function drop(e) {
                e = chart.tracker.normalizeMouseEvent(e);
                var delta = e.chartX - startX,
                    extremes = xAxis.getExtremes(),
                    newMin = Math.round(extremes.min - delta),
                    newMax = Math.round(extremes.max - delta);
                report.innerHTML = "<b>From:</b> " + new Date(newMin) + " <b>to:</b> " + new Date(newMax);
            }
            Highcharts.addEvent(chart.container, 'mousedown', drag);
            Highcharts.addEvent(chart.container, 'mouseup', drop);
        });
   });
});

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

Related Tutorials