Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sleep Graph'
    },
    xAxis: {
        categories: ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', ]
    },
    yAxis: {
            title: {
                text: 'Data-Time'
            },
            type: 'datetime',
            dateTimeLabelFormats: {
              minute: '%H:%M:%S',
              hour: '%H:%M:%S',
              day: '%H:%M:%S',
              week: '%H:%M:%S',
              month: '%H:%M:%S',
              year: '%H:%M:%S'             
            },            
            // labels: {
            //   format: '{value:%Y-%b-%e}'
            // },
            min : Date.UTC(2017,0,1,18,0),
        },
    tooltip: {
        formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                Highcharts.dateFormat('%H:%M:%S', this.y) +': '+ this.x;
        }
    },
    plotOptions: {
        column: {
            //stacking: 'normal',
            grouping: false,
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Awake',
        data: [Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,08,00), ],  
    }, {
        name: 'Sleep',
        data: [Date.UTC(2017,0,2,08,20), Date.UTC(2017,0,2,08,20), Date.UTC(2017,0,2,06,15), Date.UTC(2017,0,2,06,15), Date.UTC(2017,0,2,08,25), Date.UTC(2017,0,2,08,10), Date.UTC(2017,0,2,06,35), ],
    }, {
        name: 'Bed Time',
        data: [Date.UTC(2017,0,1,21,00), Date.UTC(2017,0,1,20,00), Date.UTC(2017,0,1,22,00), Date.UTC(2017,0,1,19,00), Date.UTC(2017,0,1,20,00), Date.UTC(2017,0,1,22,00), Date.UTC(2017,0,1,21,00), ],
    }    
    ]
});