Highcharts Demo

author(s): Torstein Hønsi

by remguif

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

JavaScript

//dynamically add data
var flags={
            type: 'flags',
            data: [{
                x:1285027200000,
                y:41.05,
                title: 'UP'
            },{
                x:1283817600000,
                y:34,
                title: 'DN'
            }],
            onSeries: 'dataseries',
            shape: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
        },
        data=[
[1283385600000,35.89,36.02,35.51,36.02],
[1283472000000,36.44,36.97,36.36,36.97],
[1283817600000,36.66,37.08,36.61,36.83],
[1283904000000,37.11,37.77,37.01,37.56],
[1283990400000,37.86,38.07,37.56,37.58],
[1284076800000,37.60,37.79,37.34,37.63],
[1284336000000,37.97,38.33,37.97,38.15],
[1284422400000,38.03,38.45,37.93,38.29],
[1284508800000,38.31,38.63,38.26,38.60],
[1284595200000,38.61,39.52,38.50,39.51],
[1284681600000,39.67,39.71,39.10,39.34],
[1284940800000,39.44,40.54,39.41,40.46],
[1285027200000,40.55,41.05,40.40,40.54],
[1285113600000,40.39,41.14,40.34,41.11],
[1285200000000,40.90,41.82,40.86,41.27],
[1285286400000,41.73,41.93,41.51,41.76],
[1285545600000,42.00,42.10,41.57,41.60]
], 
candle={
            type: 'candlestick',
            name: 'AAPL Stock Price',
            data: data,
            dataGrouping: {
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
        };
        

//*************************        
// create the chart
//*************************        
    Highcharts.stockChart('container',{
        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'AAPL Stock'
        },
        series: [candle,flags]
 });