Highcharts x axis date full range for not enough data - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Highcharts x axis date full range for not enough data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from w  w  w .j  a v a 2  s .  co m*/
var chartingOptions = {
    xAxis: {
        type: 'datetime'
    },
    series: [{
        name: 'Test',
        data: [
            [Date.UTC(2012, 0, 31), 1.9],
            [Date.UTC(2012, 1, 29), 1.2],
            [Date.UTC(2012, 2, 31), 2.0],
            [Date.UTC(2012, 3, 30), 2.5],
            [Date.UTC(2012, 4, 31), null],
            [Date.UTC(2012, 5, 30), null],
            [Date.UTC(2012, 6, 31), null],
            [Date.UTC(2012, 7, 31), null],
            [Date.UTC(2012, 8, 30), null],
            [Date.UTC(2012, 9, 31), null],
            [Date.UTC(2012, 10, 30), null],
            ]}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
    }

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script> 
      <script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/modules/exporting.src.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials