rendering small dataset - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

rendering small dataset

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 ww  . j av  a  2 s .  c  o  m
window.chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },
rangeSelector: {
    selected: 1
},
title: {
    text: 'AAPL Stock Price'
},
xAxis: {
    type: 'datetime',
    pointInterval: 1000
},
series: [{
    name: 'AAPL Stock Price',
    data: [
            [Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
            [Date.UTC(2006, 0, 29, 0, 0, 0), 33.11],
            [Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
            [Date.UTC(2006, 0, 29, 1, 0, 0), 23.12],
            [Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
            [Date.UTC(2006, 0, 29, 2, 0, 0), 34.48],
            [Date.UTC(2006, 0, 29, 3, 0, 0), 33.9],
            [Date.UTC(2006, 0, 29, 3, 0, 0), 14.72]
        ]
}]
});
    });

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

Related Tutorials