title: Show X-Axis Gaps -- Highstocks
body: <p>I am having an issue with getting my data to show a lapse in data being sent on the X-axis. What should be seen as a gap in the line is just being merged into the same line, for example in this img the data goes from 4am to 9am due to internet being out yet there is no lapse in the line. <img src="https://i.stack.imgur.com/soFq3.jpg" alt="enter image description here"></p>
  
  <p>This is the code for the example that I have at the moment.</p>
  
  <pre><code>$.getJSON('mkjson.php?device=&lt;?echo $device_name;?&gt;&amp;sensor=&lt;?echo $sensor_name;?&gt;&amp;pin=&lt;?echo $pin;?&gt;&amp;user=&lt;?echo $_SESSION['user'];?&gt;', function(data) {
      // Create the chart
      window.chart = new Highcharts.StockChart({
      credits : {
              enabled : false
          },
          chart : {
              renderTo : 'container',
              zoomType: 'x'
          },
  
          rangeSelector : {
              selected : 1
          },
  
          title : {
  
              text : 'Device:&lt;?echo $device_name;?&gt;'
          },
          subtitle : {
              text : 'Sensor:&lt;?echo $sensor_name;?&gt;'
  
          },
  
          xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
              second: '%m-%d&lt;br/&gt;%l:%M:%S%p',
              minute: '%m-%d&lt;br/&gt;%l:%M%p',
              hour: '%m-%d&lt;br/&gt;%l:%M%p',
              day: '%m-%d',
              week: '%m-%d',
              month: '%Y-%m',
              year: '%Y'
          }
      },
  
          yAxis : {
              min: &lt;?echo $yaxis_min;?&gt;,
              max: &lt;?echo $yaxis_max;?&gt;,
              title : {               
                  text : '&lt;?echo $unit?&gt;'
              },
              &lt;?if(isset($alert1) ||isset ($alert2)){?&gt;
              plotLines: [{
                  color: '#FF0000',
                  width: 1,
                  value: &lt;?echo $alert1;?&gt;
              }, {
                  color: '#FF0000',
                  width: 1,
                  value: &lt;?echo $alert2;?&gt;
              }]
              &lt;?}?&gt;
  
          },
  
          rangeSelector : {
              buttons : [{
                  type : 'minute',
                  count : 10,
                  text : '10m'
              }, {
                  type : 'hour',
                  count : 1,
                  text : '1H'
              }, 
              {
                  type : 'day',
                  count : 1,
                  text : '1D'
              },
              {
                  type : 'day',
                  count : 3,
                  text : '3D'
              }],
              selected : 3,
              inputEnabled : false
          },          
  
          series : [{
              name : '&lt;?echo $unit;?&gt;',
              data : data,
              tooltip: {
              valueDecimals: 2,
          formatter: function() {
              return Highcharts.numberFormat(this.y, 2);
          }},
              dataGrouping: {
              enabled: true
              }
          }]
      });
  });
  </code></pre>
  
  <p>Also this is the example from highstocks in jsfiddle that I am trying to use to see how they were able to accomplish it.</p>
  
  <p><a href="http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/data-grouping/" rel="nofollow noreferrer">http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/data-grouping/</a></p>