load json data - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

load json data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
      <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
      <script type="text/javascript">
    jQuery(document).ready(function(){
            var data=[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4}];
            var chart = new Highcharts.Chart(
              {/*from ww w  .  ja  v  a2s  . c om*/
                chart:{
                    renderTo: "container", 
                    type: 'column',        
                    height: 300
                },
                title: {
                    text: "Numbers on two different dates"
                },
                xAxis: {
                    categories: [data[0]["date"],data[1]["date"]]
                },
                yAxis: {
                    title: {
                        text: 'Numbers on date'
                    }
                },
                series: [{name:"numbers",data:[data[0]["number"],data[1]["number"]]}]
            }
        );
    });
    
      </script> 
   </head> 
   <body> 
      <div id="container"> 
      </div>  
   </body>
</html>

Related Tutorials