DEMO

highcharts

by tin nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container1" style="height: 300px; display: lock"></div>

JavaScript

$(document).ready(function(){
var datazzz = [
        [makeNumber(5), null, makeNumber(5), null, makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5)],
        [makeNumber(5), makeNumber(5), null, null, makeNumber(5), null, makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5)],
        [makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), null, makeNumber(5), null, makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5)],
        [73934, 42503, 17177, 19658, 17031, 119931, null, 54175, makeNumber(5), makeNumber(5), makeNumber(5), makeNumber(5)]
    ];
create_highchart_multiple('container1', 'Title 1', 'Metric1', datazzz);
});
   
   function makeid(length) {
        var result = '';
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for (var i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }

    function makeNumber(length) {
        var result = '';
        var characters = '1234567890';
        var charactersLength = characters.length;
        for (var i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return Number(result);
    }
    
    function create_highchart_multiple(label, title, ylabel, path) {
        var option = {
            chart: {
                renderTo: label,
                zoomType: 'x',
                defaultSeriesType: 'line',
                events: {}
            },

            title: {
                text: title
            },

            xAxis: {
                type: 'datetime',

                title: {
                    text: 'Timestamp'
                },
                categories: ['January', 'February', 'March', 'April',...