use json loaded from url as data in chart - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

use json loaded from url as data in 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> 
      <style id="compiled-css" type="text/css">

select {/*from   w  w w .j  a va 2 s . c o m*/
   float:right;
}


      </style> 
      <script type="text/javascript">
$(function() {
   $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
      $('#container').highcharts('StockChart', {
         rangeSelector : {
            selected : 1
         },
         title : {
            text : 'AAPL Stock Price'
         },
         series : [{
            name : 'AAPL',
            data : data,
            tooltip: {
               valueDecimals: 2
            }
         }]
      });
   });
});

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

Related Tutorials