Highcharts Demo

author(s): Torstein Hønsi

by Marina Mitasova

HTML

<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

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

// Create the chart
var my_chart = Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                    var yy1 = Math.round(Math.random() * 50+50),
                    		yy2 = Math.round(Math.random() * 50);
                    my_chart.yAxis[0].userOptions.plotLines[0].value=yy1;
                    my_chart.yAxis[0].userOptions.plotLines[1].value=yy2;
                    
                }, 1000);
            }
        }
    },

    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },

    title: {
        text: 'Live random data'
    },
    
     yAxis: {
            title: {
                text: 'Exchange rate'
            },
            plotLines: [{
                value: 20,
                color: 'green',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Last quarter minimum'
                }
            }, {
                value: 70,
                color: 'red',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Last quarter maximum'
                }
            }]
        },

    exporting: {
        enabled: false
    },

    series: [{
        name: 'Random data',
        data: (function () {
 ...