Highcharts - Highstock - User Parameter Example

by bizamajig

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 500px"></div>

JavaScript

// where my separated values are
$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function(data) {

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

            rangeSelector: {
                selected: 1
            },

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

            series: [{
                type: 'bar',
                name: 'Bar1',
                composition: {
                    'Water': '7.86%'
                },
                data: [41]
            }, {
                type: 'bar',
                name: 'Bar2',
                composition: {
                    'Salt': '5.2%',
                    'Water': '80%'
                },
                data: [33]
            }, {
                type: 'bar',
                name: 'Bar3',
                composition: {
                    'Caffeine': '51%',
                    'Alcohol': '31%',
                    'Water': '4%'
                },
                data: [35]
            }],

        tooltip: {
            shared: false,
            formatter: function() {
                var serie = this.series;
                var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b><br>';
                s += '<span style="color:' + serie.color + '">' + serie.options.name + '</span>: <b>' + this.y + '</b><br/>';
                $.each(serie.options.composition, function(name, value) {
                    s += '<b>' + name + ':</b> ' + value + '<br>';
                });
                return s;
            }
        }
        });
    });
});