create column chart dynamically from json data - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

create column chart dynamically from json data

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.10.1.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from www.  java2 s.  c o  m
$(document).ready(function () {
  var json= {
"PFTs_likely_to_change": [
    [16]
],
"PFTs_likely_to_remain_unchanged": [
    [2]
]
 }
var seriesData=[];
   $.each(json,function(key,val){
    console.log(key+"----key----and value"+val);
    seriesData.push({name:key,data:val});
    });
chart1 = new Highcharts.Chart({
 chart: {
  renderTo: 'container',
  type: 'column'
 },
 title: {
  text: 'Change in Plant Functional Types'
 },
 xAxis: {
  categories: ['Change in Plant Functional Types']
 },
 yAxis: {
  title: {
   text: 'Percentage(%)'
  }
 },
 series: seriesData
});
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container" width="500px"></div>  
   </body>
</html>

Related Tutorials