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='.10.2/jquery.min.js'></script>
<script src=".8.2/jquery.min.js"></script>
<script src=".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?
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./ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts./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?
Share Improve this question edited Dec 9, 2013 at 6:32 Thirunavukkarasu Muthuswamy asked Dec 7, 2013 at 13:53 Thirunavukkarasu MuthuswamyThirunavukkarasu Muthuswamy 1952 gold badges4 silver badges18 bronze badges 4- What is the format of data in data.json? – Grynn Commented Dec 9, 2013 at 22:45
- {"United States":"50","Western Europe":"100","Canada":"150","Germany":"200","France":"250","Mexico":"300"} this is the content of data.json file .. – Thirunavukkarasu Muthuswamy Commented Dec 10, 2013 at 6:23
- jsfiddle/xPSXQ/1 : example with data being loaded dynamically – Grynn Commented Dec 10, 2013 at 10:37
- Hey Grynn, that worked like a charm ! Thanks a lot for the quick help ! – Thirunavukkarasu Muthuswamy Commented Dec 11, 2013 at 5:37
6 Answers
Reset to default 6Highcharts is nice. For your example:
HTML:
<script src="http://code.highcharts./highcharts.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
JS:
$('#container').highcharts({
xAxis: {
categories: ["United States", "Western Europe", "Canada",
"Germany", "France", "Mexico"]
},
series: [{
data: [50, 100, 150, 200, 250, 300]
}]
});
JSFiddle: http://jsfiddle/LLExL/2075/
Since the title of the publication says HTML table to chart, using this library can help: HTMLtable2chart
If you have a HTML table like this:
<table id="tableConten">
<thead>
<tr>
<th></th>
<th>Backlog Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td>50</td>
</tr>
<tr>
<td>Western Europe</td>
<td>100</td>
</tr>
<tr>
<td>Canada</td>
<td>150</td>
</tr>
<tr>
<td>Germany</td>
<td>200</td>
</tr>
<tr>
<td>France</td>
<td>250</td>
</tr>
<tr>
<td>Mexico</td>
<td>300</td>
</tr>
</tbody>
</table>
You add between head tags:
<script type="text/javascript" src="js/HTMLtable2chart/graficarBarras.js"></script>
<script type="text/javascript" src="js/HTMLtable2chart/tabla2array.js"></script>
You add a canvas object
<canvas id="chart" width="750" height="480" style="border: 1px solid black;">Canvas is not supported</canvas>
Finally add javascript code at end of document
<script type="text/javascript">
var misParam ={
miMargen : 0.80,
separZonas : 0.05,
tituloGraf : "Title of Chart",
tituloEjeX : "Country",
tituloEjeY : "Backlog Count",
nLineasDiv : 10,
mysColores :[
["rgba(93,18,18,1)","rgba(196,19,24,1)"], //red
["rgba(171,115,51,1)","rgba(251,163,1,1)"], //yellow
],
anchoLinea : 2,
};
obtener_datos_tabla_convertir_en_array('tableConten',graficarBarras,'chart','750','480',misParam,true);
</script>
And you will have:
So, you can build a chart from HTML table code
You can use highcharts., u will have to modify your json a bit for the right format.
I use kendo ui data viz and it works perfect for me.
You need to parse your json to correct form. You can use loop and iterate on each element, pushing in new table. What is important you need to use parseFloat() to transform strings to numbers, in data array.
if you have a json data you can try any java script charting library to draw chart.
-ExtJS4 has a great set of charts.
-D3.js supports loading data through json.
-highCharts is also great.
-dygraphs
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743697603a4492020.html
评论列表（0条）