Google Charts | AreaCharts | PieCharts by populating data from JSON

Using AJAX to load JSON Data for Google Visualization Charts

This post describes how to load data from server-side code using AJAX for Google Visualization Charts. This example fetching the data from external JSON file which contains the Chart data in JSON format.
Here are the files we are using in this example -

• GoogleChart.html
• data.txt

GoogleChart.html

This is the file that the user browses to. The drawChart() function calls the jQuery ajax() function to send a query to a URL and get back a JSON string. The URL here is of the local data.txt file. The returned data is actually a DataTable defined in the local data.txt file. This DataTable is used to populate a pie chart, area chart which is then rendered on the page.

data.txt

{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}