Candlestick Chart Example

An example of a Google Candlestick Chart.

by ksumarine

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

CSS

#chart_div {
    width:500px !important;
    height:320px !important;
    padding:0;
    margin:0;
}

JavaScript

google.setOnLoadCallback(drawChart);

function drawChart() {
    var Data = new google.visualization.DataTable();
        Data.addColumn('string','Category');
        Data.addColumn('number','Min');
        Data.addColumn('number','Average');
        Data.addColumn({type: 'string', role: 'annotation'});
        Data.addColumn('number','Max');
        Data.addRows([
            ['2011', 268.5, 273.6,'273.6', 278.4],
            ['2012', 270.0, 274.8,'274.8', 281.0],
            ['2013', 260.9, 266.3,'266.3', 274.9],
            ['2014', 258.8, 265.2,'265.2', 268.6],
            ['2015', 252.4, 258.1,'258.1', 266.0]
        ]);
var view = new google.visualization.DataView(Data);
    // duplicate 1 column as a dummy data series, and add intervals to it
    view.setColumns([0, 1, {
        id: 'min',
        type: 'number',
        role: 'interval',
        calc: function (dt, row) {
            return dt.getValue(row, 1);
        }
    }, {
        id: 'avg',
        type: 'number',
        role: 'interval',
        calc: function (dt, row) {
            return dt.getValue(row, 2);
        }
    }, {
        id: 'max',
        type: 'number',
        role: 'interval',
        calc: function (dt, row) {
            return dt.getValue(row, 4);
        }
    }, 1, 2, 3, 4]);
    
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 320,
        width: 500,
        lineWidth: 0,
        intervals: {
            style: 'boxes'
        },
        legend: {
            position: 'none'
        },
        series: {
            0:{
                // dummy data series, controls color of intervals
                visibleInLegend: false,
                color: 'blue',
                enableInteractivity: false
            },
            2:{
                pointShape:'circle',
                pointSize:2,
                color:'red'
            }
        },
        vAxis: {
            title:...