reversed in Xaxis - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

reversed in Xaxis

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from w  ww.  j av a2 s .co  m*/
    var yourstartDate = (new Date()).getTime() - 1 * 24 * 3600 * 1000;
var yourInterval = 1 * 3600 * 1000;
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    xAxis: {
        type: 'datetime',
        reversed: true,
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%m/%d/%y', this.value, true);
            }
        },
        showLastLabel: true
    },
    series: [{
        data: [
            [yourstartDate, 29.9],
            [yourstartDate + (yourInterval * 1), 71.5],
            [yourstartDate + (yourInterval * 2), 106.4],
            [yourstartDate + (yourInterval * 3), 129.2],
            [yourstartDate + (yourInterval * 4), 144.0],
            [yourstartDate + (yourInterval * 5), 176.0],
            [yourstartDate + (yourInterval * 6), 135.6],
            [yourstartDate + (yourInterval * 7), 148.5],
            [yourstartDate + (yourInterval * 8), 216.4],
            [yourstartDate + (yourInterval * 9), 194.1],
            [yourstartDate + (yourInterval * 10), 95.6],
            [yourstartDate + (yourInterval * 11), 54.4]]
    }]
});
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials