I need to make a chart on which xAxis is of type 'datetime', but have irregular intervals:

/

this is the code:

$(function () {
  $('#chart1').highcharts({
      chart: {
      zoomType: 'x',
      spacingRight: 20
      },
      title: {
      text: 'Ines/Outes'
      },
      subtitle: {
      text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' :
          'Pinch the chart to zoom in'
      },
      xAxis: {
      type: 'datetime',
      minRange: 15 * 24 * 3600000,

      title: {
          text: null
      }
      },
      yAxis: {
      title: {
          text: 'Euro(€)'
      }
      },
      tooltip: {
      shared: true
      },
      legend: {
      enabled: true
      },
      plotOptions: {
      area: {
          fillColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
          stops: [
              [0, Highcharts.getOptions().colors[9]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
          ]
          },
          //lineWidth: 1,
          marker: {
          enabled: false
          },
          shadow: false,
          states: {
          hover: {
              lineWidth: 1
          }
          },
          threshold: null
      }
      },

      series: [{
      type: 'area',

      pointInterval: 24 * 3600 * 1000,
      pointStart: Date.UTC(2014, 0, 01),
      data: [["31/12/2013", 345.2], ["09/01/2014", 494.79999999999995], ["20/01/2014", 137.2], ["22/01/2014", 210.0], 
      ["23/01/2014", 220.4], ["24/01/2014", 871.0], ["28/01/2014", 420.0], ["30/01/2014", 420.0], ["31/01/2014", 2057.15], 
      ["05/02/2014", 191.2], ["06/02/2014", 81.6], ["07/02/2014", 295.2], ["11/02/2014", 135.12], ["12/02/2014", 189.2], 
      ["13/02/2014", 210.0], ["14/02/2014", 315.2], ["17/02/2014", 462.79999999999995], ["18/02/2014", 544.4], 
      ["19/02/2014", 715.4399999999999], ["20/02/2014", 971.2], ["21/02/2014", 418.0], ["02/02/2015", 366.0]]
      }]
  });     
  });

you can see that series values do not correspond to xAxis values. How can I fix it: having same days on xAxis or having months corresponding to series values days?

thanks Luke

I need to make a chart on which xAxis is of type 'datetime', but have irregular intervals:

http://jsfiddle/cz6rL/

this is the code:

$(function () {
  $('#chart1').highcharts({
      chart: {
      zoomType: 'x',
      spacingRight: 20
      },
      title: {
      text: 'Ines/Outes'
      },
      subtitle: {
      text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' :
          'Pinch the chart to zoom in'
      },
      xAxis: {
      type: 'datetime',
      minRange: 15 * 24 * 3600000,

      title: {
          text: null
      }
      },
      yAxis: {
      title: {
          text: 'Euro(€)'
      }
      },
      tooltip: {
      shared: true
      },
      legend: {
      enabled: true
      },
      plotOptions: {
      area: {
          fillColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
          stops: [
              [0, Highcharts.getOptions().colors[9]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
          ]
          },
          //lineWidth: 1,
          marker: {
          enabled: false
          },
          shadow: false,
          states: {
          hover: {
              lineWidth: 1
          }
          },
          threshold: null
      }
      },

      series: [{
      type: 'area',

      pointInterval: 24 * 3600 * 1000,
      pointStart: Date.UTC(2014, 0, 01),
      data: [["31/12/2013", 345.2], ["09/01/2014", 494.79999999999995], ["20/01/2014", 137.2], ["22/01/2014", 210.0], 
      ["23/01/2014", 220.4], ["24/01/2014", 871.0], ["28/01/2014", 420.0], ["30/01/2014", 420.0], ["31/01/2014", 2057.15], 
      ["05/02/2014", 191.2], ["06/02/2014", 81.6], ["07/02/2014", 295.2], ["11/02/2014", 135.12], ["12/02/2014", 189.2], 
      ["13/02/2014", 210.0], ["14/02/2014", 315.2], ["17/02/2014", 462.79999999999995], ["18/02/2014", 544.4], 
      ["19/02/2014", 715.4399999999999], ["20/02/2014", 971.2], ["21/02/2014", 418.0], ["02/02/2015", 366.0]]
      }]
  });     
  });

you can see that series values do not correspond to xAxis values. How can I fix it: having same days on xAxis or having months corresponding to series values days?

thanks Luke

• javascript
• charts
• highcharts
• time-series
• linechart

1 Answer 1

You can remove the pointStart assignment, highcharts will determine the range based on trhe values you provide it. Highcharts will take a look at the range of data you supply it and auto generate the tick marks based on your tickInterval settings, and the available dimensions of your chart. If you need the tick marks on the axis to be specifically the dates you have in you data, you should not used the datetime type axis.

Highcharts handles all date data value in unix/epoch time (number of seconds since 1/1/1970). If you want to use datetime axis, you must supply your data in that format.

Change all your date values such as

["31/12/2013", 345.2]

to

[Date.UTC(2013, 11, 31), 345.2]