Load different data source for same charts in Google Charts

Question

Overall Problem: I have year-wise data in different JSON files. For each JSON file, I generate 3 charts that are displayed on the webpage. Now the user should be able to select a different year, and the charts should update based on that particular year's data.

What I have Done: I wrote a function called initialize_charts() which parses the given JSON, prepares data as per google chart requirements and draws those charts. I am calling this function from google.setOnLoadCallback. (as of now I have hardcoded the json file name).

Main Issue: Now, I am not sure how do I re-render the charts when the user selects some other year's JSON file? Somehow, I should be able to pass-on filename parameter to google.setOnLoadCallback or google.load, such that my initialize_chart reads this new data and re-renders the charts. But I am not sure how.

What I tried: I tried writing a wrapper function called initialize like this:

google.setOnLoadCallback(initialize);

function initialize()
{
  initialize_charts("year1.json");
}

So, when it loads first, it loads year1.json data. Then for onclick event i called onclick="initialize_charts("year2.json"). But that doesn't work. I suppose that the placeholders for the charts (div elements) are replaced by the charts itself. So, it can't find those placeholders.

I would greatly appreciate any sort of help with this. If you need more information or my code, I would be happy to provide. I am stuck on this from the last 2 days :-(

user1936037 user1936037 · Accepted Answer · 2013-01-08T01:01:18

Solved it. Using this piece of code:

google.setOnLoadCallback(function() {
    initialize_charts('year1.json');
});

function initialize_charts(filename)
{
   ..... 
}

After the first load, if you have to change the data source, just call initialize_charts with some other json file (for example: year2.json)

Load different data source for same charts in Google Charts

1 Answers