I have some JSON data as follows with country name(KEY) and backlog count(VALUE).
JSON Data:
{"United States":"50","Western Europe":"100","Canada":"150","Germany":"200","France":"250","Mexico":"300"}
Chart:
Now i want to plot this values in chart like,
Country Name --> X Axis
Backlog Count --> Y Axis
How can i achieve this ?
Code:
<html>
<head>
<title>RESTful Webservice JQuery client </title>
</head>
<body>
<table id="results" border="1"></table>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
//When DOM loaded we attach click event to button
$(document).ready(function() {
//after button is clicked we download the data
//$('.button').click(function(){
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as json
dataType: "json",
success: function(data) {
//Stringify the Json
var strigifyJson=JSON.stringify(data);
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(strigifyJson);
//print it to the firebug console for troubleshooting
console.log(json);
//parse description and value using each function
var tr;
var country,backlog;
jQuery.each(json, function(i, val) {
tr += "<tr><td>"+i+"</td><td>" +val+"</td></tr>";
console.log(i+" "+val);
});
console.log(country+" "+backlog);
//now json variable contains data in json format
//let's display a few items in webpage using html function
$('#results').html(tr);
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
title:{
text: 'Country'
},
categories: ["United States", "Western Europe", "Canada",
"Germany", "France", "Mexico"]
},
yAxis: {
title:{
text: 'Backlog Count'
}
},
series: [{
data: [50, 100, 150, 200, 250, 300]
}],
title: {
text: 'Backlog Trend'
}
});
}
});
//});
});
</script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
</body>
</html>
Here i want to pass the Xaxis and Yaxis value dynamically from a JSON file?