Creating line charts with irregular time intervals

The main difference between line charts with irregular time intervals and those with regular time intervals is that the latter has a fixed point interval. The problem with the charts with irregular intervals is that we can't define a single point interval, hence we have to manually provide the date/time against each data point in the series.

Consider the example of conversion rates of USD to Euros at the end of each month. Months fall in the category of irregular time intervals because each month can be 28 (leap year), 29, 30, or 31 days.

In the following example, we will create a line chart with irregular time intervals (months) to analyze the conversion rate of Euros to US Dollars for a period of 7 months starting from September 2013 to March 2014:

(function() {
  $( '#chart_container' ).highcharts({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Historical Conversion Rates of Euro to USD'
    },
    subtitle: {
      text: 'Source: <a href="http://www.oanda.com/">www.oanda.com</a>',
      useHTML: true
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: 'USD'
      }
    },
    series: [{
      name: 'Euro',
      data: [
        [Date.UTC(2013, 08, 01), 1.3343],
        [Date.UTC(2013, 09, 01), 1.3634],
        [Date.UTC(2013, 10, 01), 1.3694],
        [Date.UTC(2013, 11, 01), 1.3633],
        [Date.UTC(2014, 00, 01), 1.3644],
        [Date.UTC(2014, 01, 01), 1.3825],
        [Date.UTC(2014, 02, 01), 1.3806]
      ]
    }]
  });
})();

Here, we passed the first of each month in the Unix timestamp against each date point using the Date.UTC() method, which we learned in the earlier examples. This will produce the following chart:

Creating line charts with irregular time intervals

Let's quickly format the tooltip using the formatter() function:

tooltip: {
  formatter: function() {
    var string = Highcharts.dateFormat( '%b'%y', this.x ) + '<br>';
    string += '1 Euro = ' + this.y + ' USD';
    return string;
  },
  useHTML: true
}

By using the formatter() function, we will get the following result:

Creating line charts with irregular time intervals

The tooltip is now formatted to show the conversion rates of both currencies along with their units.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.174.204