How to read data in json file in javascript to use it for google charts?
Question
I have data in a path static/data.json.I am trying to plot chart using google charts.I want to take out data in data.json file and use it for google charts.
data.json is given below
data = '[{"k": "RAM" , "v":0.515625},{"k": "Camera" , "v":0.515625},{"k": "Design" , "v":0.05},{"k": "Processor" , "v":0},]';
my html code is in template/isworked.html.
Below code is isworked.html
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="application/json" src="static/d.json"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. var mydata = JSON.parse(data); function drawChart() { // Create the data table. //loading data from json var data = new google.visualization.DataTable(); data.addColumn('string', 'Feature'); data.addColumn('number', 'Positive'); var f,n; for(var i = 0 ; i<data.length;i++){ f = data[i].k n = data[i].v data.addRows([[f,n]]) } // Set chart options var options = {'title':'Pie Chart', 'width':800, 'height':700}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head>
I am not able to plot graph. This data.json is generated from a python script. I am running everyting using flask framework in Ubuntu
I have no experience in this topic. Can anybody help me?
3 answers
solution1
1 2015-04-25 11:49:19
UberKaeL is correct.
update: corrected multiple problems with the code and data, eg, the trailing comma in the data. It works now ... click the "Run Code Snippet" button.
"mydata" is the problem. You are attempting to use data before the json file has loaded. That triggers the error. And mydata is not used for anything. You also need to add a DIV to hold the pie chart. The code snippet below works, but the json data is incorrect for drawing a pie chart. Correct the data and it should work for you.
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> var mydata = [{"k": "RAM" , "v":0.515625},{"k": "Camera" , "v":0.515625},{"k": "Design" , "v":0.05},{"k": "Processor" , "v": 0}]; </script> <script type="text/javascript"> google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Feature'); data.addColumn('number', 'Positive'); var f,n; for(var i = 0 ; i<mydata.length;i++){ f = mydata[i].k n = mydata[i].v data.addRows([[f,n]]) } var options = {'title':'Pie Chart', 'width':800, 'height':700}; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
solution2
1 2015-04-25 12:06:17
After a while it seems like your page runs the code before loading the json file. Reading json like that is not a good practice, is better to do an AJAX request like jQuery.getJSON()
so if your are using jQuery do this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON</title>
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
var mydata=jQuery.getJSON("static/d.json");
if(mydata) {
alert("yay worked");
}
else {
alert("something is wrong");
}
//rest of your code
//function drawChart() { ...
</script>
</body>
</html>
Also is a good practice to enclose your program inside a $(document).ready and remember to remove last comma in your JSON:
data = '[{"k": "RAM" , "v":0.515625},{"k": "Camera" , "v":0.515625},{"k": "Design" , "v":0.05},{"k": "Processor" , "v":0}]';
@Robert gives you a good answer about how to draw the chart
solution3
0 2015-04-25 11:12:59
You are not using mydata where you put json read values.
data contains an empty new google.visualization.DataTable() and the loop are reading values from it, not from mydata .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.