CODEWITHSUNDEEP
highcharts
Kab
Kab

Reputation: 63

HighStock doesn't work with gapsize the same way

I have some data that was taken every minute. But there are irregular gaps in it. I'm using stockchart (v6.0.5) with the 'line' chart type and my xAxis is 'datetime'. I want that the gaps don't cut the xAxis in pieces but rather reflect the time that has passed as in http://jsfiddle.net/VwkHu/177/ . I don't really want to fill in Null values in my dataset as the gaps can be large. How can I get this behavior with stockchart?

BTW: If I change in the upper mentioned fiddle to stock chart by adding StockChart the following way

...
$('#container').highcharts('StockChart',{
...

then the gaps don't reflect the size of the actual gap in the data but are constant or equal the gapsize.

Upvotes: 1

Views: 721

Answers (1)

ewolden
ewolden

Reputation: 5803

Using highstock, you need to set ordinal: false to keep missing times in the chart.

In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.

Like this:

xAxis: {
  ordinal: false,
  ...
},


$(function() {
  $('#container').highcharts('StockChart',{
    chart: {
      type: 'line'
    },
    title: {
      text: 'Snow depth at Vikjafjellet, Norway'
    },
    subtitle: {
      text: 'Irregular time data in Highcharts JS'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
      },
      title: {
        text: 'Date'
      },
      ordinal: false
    },
    yAxis: {
      title: {
        text: 'Snow depth (m)'
      },
      min: 0
    },
    tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

    series: [{
      name: 'Winter 2007-2008',
      gapSize: 5,
      //connectNulls: true,
      // Define the data points. All series have a dummy year
      // of 1970/71 in order to be compared on the same x axis. Note
      // that in JavaScript, months start at 0 for January, 1 for February etc.
      data: [
        [Date.UTC(1970, 9, 27), 0],
        [Date.UTC(1970, 10, 10), 0.6],
        [Date.UTC(1970, 10, 18), 0.7],
        [Date.UTC(1970, 11, 2), 0.8],
        [Date.UTC(1970, 11, 9), 0.6],
        [Date.UTC(1970, 11, 16), 0.6],
        [Date.UTC(1970, 11, 28), 0.67],
        [Date.UTC(1971, 0, 1), 0.81],
        [Date.UTC(1971, 0, 8), 0.78],
        [Date.UTC(1971, 0, 10), 0.98],
        [Date.UTC(1971, 0, 27), 1.84],
        [Date.UTC(1971, 1, 10), 1.80],
        [Date.UTC(1971, 1, 18), 1.80],
        [Date.UTC(1971, 1, 24), 1.92],
        [Date.UTC(1971, 2, 4), 2.49],
        [Date.UTC(1971, 2, 11), 2.79],
        [Date.UTC(1971, 2, 15), 2.73],
        [Date.UTC(1971, 2, 25), 2.61],
        [Date.UTC(1971, 3, 2), 2.76],
        [Date.UTC(1971, 3, 6), 2.82],
        [Date.UTC(1971, 3, 13), 2.8],
        [Date.UTC(1971, 4, 3), 2.1],
        [Date.UTC(1971, 4, 26), 1.1],
        [Date.UTC(1971, 11, 9), 0.25],
        [Date.UTC(1971, 11, 12), 0]
      ]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Working JSFiddle example: http://jsfiddle.net/ewolden/VwkHu/183/

Upvotes: 1

Related Questions