Date range in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Date range 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.12.4.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from w  w  w  . j av  a 2s.com*/
var seriesOptions = [
    {
        "data":[
            [1447793679000, 7.8494623656],
            [1450913358000, 5.4140127389],
            [1460475392000, 6.015037594],
            [1460648544000, 3.75],
            [1460753244000, 2.1015761821],
            [1460985174000, 3.0141843972],
            [1460988174000, 5.2264808362],
            [1461874589000, 1.5100671141]
        ],
        "name":"Product 1"
    },
    {
        "data":[
            [1450729647000, 2.9850746269],
            [1452184898000, 4.1666666667],
            [1454616863000, 4.1749502982],
            [1455206741000, 2.6717557252],
            [1458062356000, 2.4],
            [1459868909000, 3.8461538462],
            [1459882015000, 3.3955857385],
            [1459968893000, 4.1832669323],
            [1460574864000, 4.973357016],
            [1460665314000, 5.2032520325]
        ],
        "name":"Product 2"
    }
]
document.getElementById('is_date_correct_box').innerText = Date(1447793679000)
function createChart() {
  $('#container').highcharts('StockChart', {
    yAxis: {
      labels: {
        formatter: function () {return (this.value > 0 ? ' + ' : '') + this.value + '%';}
      }
    },
    xAxis: {
      type: 'datetime'
    },
    plotOptions: {spline: {marker: {enabled: true}}},
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
      valueDecimals: 2
    },
    chart: {
      type: 'spline'
    },
    series: seriesOptions
  });
}
createChart();
    }

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

Related Tutorials