XRange chart datetime format - Javascript highcharts

Javascript examples for highcharts:Chart Range

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

Description

XRange chart datetime format

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {//  w  w w .ja  va 2  s.  co  m
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/xrange.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: [0, 1, 2, 3, 4, 5]
    },
    series: [{
        name: 'Schedule',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        data: [{"y":1,"x":1516349457000,"x2":1516357084000},{"y":3,"x":1516347595000,"x2":1516350061000},{"y":2,"x":1516367206000,"x2":1516372249000},{"y":4,"x":1516357424000,"x2":1516362888000},{"y":2,"x":1516349405000,"x2":1516353312000},{"y":4,"x":1516352416000,"x2":1516356200000},{"y":4,"x":1516349449000,"x2":1516351853000},{"y":5,"x":1516349235000,"x2":1516352661000},{"y":3,"x":1516350622000,"x2":1516354105000}],
        dataLabels: {
            enabled: true
        }
    }]
});

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

Related Tutorials