Create candlestick chart with areaspline chart data in stock chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Create candlestick chart with areaspline chart data in stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </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: 400px; min-width: 310px"></div> 
      <script type="text/javascript">
Highcharts.setOptions({//from  w  ww . j  ava2s. com
    global: {
        useUTC: false
    }
});
// Create the chart
Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint(fakeOHLC(x, y), true, true);
                }, 1000);
            }
        }
    },
    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },
    title: {
        text: 'Live random data'
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        type: 'candlestick',
        dataGrouping: {
              forced: true,
              units: [['second', [10]]]
        },
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;
            for (i = -999; i <= 0; i += 1) {
                var point = fakeOHLC(time + i * 1000, Math.round(Math.random() * 100));
                data.push(point);
            }
            return data;
        }())
    }]
});
function fakeOHLC(time, value) {
      time = Math.floor(time/10000) * 10000;
     return [time, value, value, value, value];
}

      </script>  
   </body>
</html>

Related Tutorials