Highcharts Demo

author(s): Torstein Hønsi

by Nick Karnik

HTML

<script src="http://github.highcharts.com/rambera/highstock.js"></script>
<script src="http://github.highcharts.com/rambera/highcharts-more.js"></script>
<script src="http://github.highcharts.com/rambera/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 600px"></div>

<button id="markers">Toggle point markers</button>
<button id="color">Toggle color</button>

<button id="line" style="margin-left: 2em">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Area spline</button>
<button id="arearange">Arearange</button>
<button id="columnrange">Column range</button>
<button id="ohlc">OHLC</button>
<button id="candlestick">Candlestick</button>

JavaScript

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function(data) {

        // The data point configurations are arrays on the form [x, open, high, low, close].
        // In order to make this understandable for different series types like line, column
        // and ranges, we need to transform it to objects. Single-value series types like
        // line will use the y option, ranges will use low and high, and OHLC will
        // use all.
        data = Highcharts.map(data, function (config) {
            return {
                x: config[0],
                open: config[1],
                high: config[2],
                low: config[3],
                close: config[4],
                y: config[4] // let the closing value represent the data in single-value series
            };
        });

        // create the chart
        var chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL Stock Price',
                data : data,
                threshold: null,
                turboThreshold: 2000 // to accept point object configuration
            }]
        });

    
        // Toggle point markers
        var enableMarkers = true;
        $('#markers').click(function() {
            chart.series[0].update({
                marker: {
                    enabled: enableMarkers
                }
            });
            enableMarkers = !enableMarkers;
        });

        // Toggle point markers
        var color = false;
        $('#color').click(function() {
            chart.series[0].update({
                color: color ? null : Highcharts.getOptions().colors[1]
            });
            color = !color;
        });

     ...