create combo chart to combine column chart and water fall chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

create combo chart to combine column chart and water fall 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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*  www .ja v a2  s  .com*/
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
        var ohlc = [],
            volume = [],
            dataLength = data.length,
            groupingUnits = [[
                'week',                         // unit name
                [1]                             // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]],
            i = 0;
        for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);
            volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }
        var maxVolume = Math.max.apply(Math, volume.map(function(v) { return v[1]}))
        // create the chart
        $('#container').highcharts('StockChart', {
            navigator: {
                enabled: false
            },
            rangeSelector: {
                selected: 1,
                inputEnabled: false
            },
            credits: {
                enabled: false
            },
            yAxis: [{
                lineWidth: 0
            }, {
                max: maxVolume * 3,
                offset: 0,
                lineWidth: 0,
               // gridLineWidth: 0,
                labels:
                {
                  enabled: false
                }
            }],
           series: [{
                type: 'candlestick',
                name: 'AAPL',
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
                dataGrouping: {
                    units: groupingUnits
                }
            }]
        });
    });
});

      </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: 400px; min-width: 310px"></div>  
   </body>
</html>

Related Tutorials