use date type data in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

use date type data in 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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//from  w w w. jav a  2s  .  c o  m
    $('#container').highcharts({
        chart: {
            type: 'spline',
            zoomType: 'x'
        },
        title: {
            text: ' frequency'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b %y, %Y',
                year: '%Y'
            },
            title: {
                text: 'Date Published'
            }
        },
        yAxis: {
            title: {
                text: 'Price ($USD)'
            },
            min: 0
        },
        credits: {
            enabled: false
        },
        tooltip: {
            // headerFormat: '<b>{series.name}</b><br>',
            // pointFormat: '{point.x:%b %e, %Y}: {point.y:.2f} m'
            enabled: false
        },
        series: [{
            name: 'Car Price',
            color: '#CC0000',
            data:  [{x:Date.UTC(2012, 10, 9), y:37000,url:'http://www.google.com'},
                [Date.UTC(2012, 11, 1), 39000],
                [Date.UTC(2012, 11, 1), 10500],
                [Date.UTC(2012, 11, 13), 20000],
                [Date.UTC(2012, 11, 18), 33000],
                [Date.UTC(2013, 5, 22), 24995],
                [Date.UTC(2013, 5, 31), 15000],
                [Date.UTC(2013, 6, 13), 19000],
                [Date.UTC(2013, 8, 20), 4000],
                [Date.UTC(2013, 9, 1), 17900],
                [Date.UTC(2013, 9, 30), 2500],
                [Date.UTC(2013, 11, 18), 25000],
                [Date.UTC(2014, 4, 14), 15900],
                [Date.UTC(2014, 5, 16), 6900]],
            point: {
                events: {
                    click: function () {
                        x = this;
                        window.open(this.url);
                    }
                }
            }
        }]
    });
});

      </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