I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.

When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart bees blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:

mainChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'linegraph'
  },

  rangeSelector: {
    buttons: [{
      type: 'day',
      count: 1,
      text: '1 d'
    }, {
      type: 'week',
      count: 1,
      text: '1 wk'
    }, {
      type: 'month',
      count: 1,
      text: '1 mo'
    }, {
      type: 'year',
      count: 1,
      text: '1 yr'
    }, {
      type: 'all',
      text: 'All'
    }],
    selected: 2
  },

  series: [{
    name: 'Electricity usage (kWh)',
    data: graphData,
    tooltip: {
      valueDecimals: 2,
      valueSuffix: "kWh"
    }
  }],
});

I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.

When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart bees blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:

mainChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'linegraph'
  },

  rangeSelector: {
    buttons: [{
      type: 'day',
      count: 1,
      text: '1 d'
    }, {
      type: 'week',
      count: 1,
      text: '1 wk'
    }, {
      type: 'month',
      count: 1,
      text: '1 mo'
    }, {
      type: 'year',
      count: 1,
      text: '1 yr'
    }, {
      type: 'all',
      text: 'All'
    }],
    selected: 2
  },

  series: [{
    name: 'Electricity usage (kWh)',
    data: graphData,
    tooltip: {
      valueDecimals: 2,
      valueSuffix: "kWh"
    }
  }],
});

• javascript
• data-visualization
• highcharts

• 1 I'm having a very similar bug (>=1.2 years for my data to show up) and I posted a thread on the Highcharts forum. See highslide./forum/… . – FloppyDisk Commented Jun 28, 2012 at 19:02

2 Answers 2

I had the same issue, but it was everything normal with timestamps on X axis.

Resolved it by sorting data by ascending (provided firstly in reversed order).

It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.