drawing start and end time as interval in one line - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

drawing start and end time as interval in one line

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  ww .  j av a  2  s.  com
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var color = '#7cb5ec';
Highcharts.chart('container', {
    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },
    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },
    xAxis: {
       type: 'datetime',
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            pointStart: 2010
        }
    },
    series: [{
          id: 'Installation',
        name: 'Installation',
        color: color,
        data: [[Date.UTC(1970, 9, 21), 1], [Date.UTC(1970, 9, 22), 1]]
    }, {
        name: 'Manufacturing',
        linkedTo: 'Installation',
        color: color,
        data: [[Date.UTC(1970, 9, 23), 1], [Date.UTC(1970, 9, 24), 1]]
    }, {
        name: 'Sales & Distribution',
        linkedTo: 'Installation',
        color: color,
        data: [[Date.UTC(1970, 9, 25), 1], [Date.UTC(1970, 9, 30), 1]]
    }, {
        name: 'Project Development',
        linkedTo: 'Installation',
        color: color,
        data: [[Date.UTC(1970, 10, 5), 1], [Date.UTC(1970, 10, 10), 1]]
    }, {
        name: 'Other',
        linkedTo: 'Installation',
        color: color,
        data: [[Date.UTC(1970, 10, 12), 1], [Date.UTC(1970, 10, 30), 1]]
    }]
});

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

Related Tutorials