have equal year distance on x-axis for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

have equal year distance on x-axis for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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 w w.  j ava2 s  .  c  om
    $('#container').highcharts({
            chart:
            {
               renderTo: "container",
               type: "line",
            },
            title:
            {
               text: "Amphibians - Number of Threatened Species",
               align: "center",
            },
            xAxis:
            {
               //categories: ['1996','2000','2002','2003','2004','2005'],
               labels:
               {
                  //step: 1
               },
               tickWidth: 0,
                  type: "datetime"
            },
            yAxis:
            {
               title:
               {
                  text: "Number of Threatened Species",
                  align: "high"
               },
               min: 0
            },
            tooltip:
            {
               shared: true,
               crosshairs: true
            },
            plotOptions:
            {
               series:
               {
                  connectNulls: true,
                  shadow: false,
                  lineWidth: 2
               }
            },
            series:
            [   {
                     data: [[820472400000,124],
                                   [946702800000,146],
                                   [1009861200000,157],
                                   [1041397200000,157],
                                   [1072933200000,1770],
                                   [1104555600000,1811]],
                     name: "Global"
                  }]
         });
});

      </script> 
   </head> 
   <body> 
      <script src="http://geodev.grid.unep.ch/etc/js/Highcharts-3/js/highcharts.js"></script> 
      <div id="container" style="height: 550px"></div>  
   </body>
</html>

Related Tutorials