Mixing linear and datetime x-axes in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Mixing linear and datetime x-axes in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>datetime+linear mixed x-axes</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//from   w  w  w .ja v  a 2  s.com
  $('#container').highcharts({
    chart: {
      type: 'spline',
      alignTicks: false
    },
    title: {
      text: 'Snow depth at Vikjafjellet, Norway'
    },
    subtitle: {
      text: 'Irregular time data in Highcharts JS'
    },
    xAxis: [{ // 0
      type: 'datetime',
      dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
      },
      title: {
        text: 'Date'
      }
    }, { // 1
      type: 'linear',
      dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
      },
      title: {
        text: null
      },
      labels: {
        enabled: false
      },
      tickLength: 0
    }],
    yAxis: {
      title: {
        text: 'Snow depth (m)'
      },
      min: 0
    },
    tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },
    plotOptions: {
      spline: {
        marker: {
          enabled: true
        }
      }
    },
    series: [{
      name: 'Winter 2013-2014',
      data: [
        [Date.UTC(1970, 9, 29), 0],
        [Date.UTC(1970, 10, 9), 0.4],
        [Date.UTC(1970, 11, 1), 0.25],
        [Date.UTC(1971, 0, 1), 1.66],
        [Date.UTC(1971, 0, 10), 1.8],
        [Date.UTC(1971, 1, 19), 1.76],
        [Date.UTC(1971, 2, 25), 2.62],
        [Date.UTC(1971, 3, 19), 2.41],
        [Date.UTC(1971, 3, 30), 2.05],
        [Date.UTC(1971, 4, 14), 1.7],
        [Date.UTC(1971, 4, 24), 1.1],
        [Date.UTC(1971, 5, 10), 0],
        [Date.UTC(1971, 5, 13), 1.65],
        [Date.UTC(1971, 5, 15), 1.29],
        [Date.UTC(1971, 5, 23), .88]
      ],
      type: 'line',
      step: true,
      xAxis: 0
    }, {
      name: 'Winter 2014-2015',
      data: [
        2.63,
        2.77,
        2.68,
        2.56,
        2.39,
        2.3,
        2,
        1.85,
        1.49,
        1.08,
        2.4,
        1.8,
        1.9,
        1.9,
        2.3
      ],
      xAxis: 1,
      type: 'spline'
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials