High chart stack column date time usage - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

High chart stack column date time usage

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {//  w ww. ja  va 2  s .  c  om
        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'
            },
            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: {
            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), ],
    }
    ]
});

      </script>  
   </body>
</html>

Related Tutorials