Google Visualization API as Ajax response

[MyInfoland]

Dear Team,

I am fetching the Google Visualization API as Ajax response and am
adding it to the page as an innerHTML to a DIV. After doing this, the
chart is not loaded. From my understanding, this is because drawChart
will be called only when we call the Google Visualization API load
because I am using "google.setOnLoadCallback(drawChart);"

I could and understand, how can I make it work. Any help would be
great.

Thanks,
Kiran

[Roni Biran]

I think that your BL logic might be wrong.

You might want to look at this sample:  http://code.google.com/apis/chart/interactive/docs/php_example.html 

It uses a jQuery ajax request and draws a pie chart at its end.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[MyInfoland]

Dear Roni Biran,

Thank you for your reply.

I have checked the example you have sent. In that he is just fetching
the data in Ajax Request. In my case, the whole script that is
rendering the chart will be fetched as a Ajax response. That response
will be added in to a DIV within my webpage.

Ex.

var div = document.getElementById("someid");
div.innerHTML = response.responseText;

In the above the case, response will have the complete google chart.
If I have added the response to some html file and loaded, it is
perfectly working. But when I have added the same response as
innerHTML, it is not working. Hope you understand.

Thanks,
Kiran

[Roni Biran]

Hi Kiran,

Can you post a small sample of your code. I want to see your structured code and figure out what's the correct approach.

Maybe you can write a function that holds everything and then eval() the output string.... I don't know.... I need to see for my self.

This all I can do for now. Sorry,

[MyInfoland]

Dear Roni,
Thank you for your response.
Due to some reasons, I can not post my data to this forum. Why I am
going for this approach is to bring the dril down (Not exactly but
almost) functionality to my charts. This is how my code should work,
In my first page, I have some charts that will tell us the Country
Wide Sales, Product Wise Sales, Product Category Wise Sales ...etc
If one clicks on any of the pie slice of the charts, say one of the
country in the chart "Country wide Sales", I have to bring the
remaining two charts say Product Wise Sales (Within the selected
Country), Product Category Wise Sales (Within the selected country).
In reverse, If the one clicks on any of the pie slice (Product) of the
chart Product Wise Sales, I need to bring the remaining two charts Say
Country Wise Sales (for the selected product), Product Category Wise
Sales (For that product. Of course, in this case, we will not bring
this chart. Because, the selected product belongs to a single
category).
In the next screen (Second stage), if user clicks on any of the pie
sector, that criteria will be and-ed to the existing criteria and the
remaining charts has to be fetched. Say with the first example, user
clicks on any of the Product Category (pie slice) in the second
screen, in the third stage, I have to show a chart Product Wise Sales
( Within the selected country (first stage) and Within the selected
Product Category (2nd Stage) ) .
Here, I have taken the example with just three charts, but we will
keep increase. This can be easily achieved by loading the URL with the
criteria (Sending the parameters via URL), but we want to make it
seamless. So, we are doing with Ajax (Post request.I can pass any
number of parameter which can scale the greater levels of
navigation.). Most of the remaining data in the website will remain
untouched. So I need to just reload the charts area with one less
chart compared to it's earlier stage.
I can fetch the response properly. Say if I copied and pasted the
response in to a new HTML file and loaded the page in a browser,
charts are loading perfectly. But if I added the same response as a
innerHTML to a DIV, charts are not loaded. As per my understanding,
the drawChart method has not called, so the chart not loaded. I have
tried to force call the drawChart method, which is of no use.
I believe that, I have explained to you my scenario well. I will  be
thankful for any help.
Thanks,Kiran

[asgallant]

Try using AJAX to fetch just the data, not the javascript that builds a chart.  You can have a generic function that draws a chart based on the data fetched from AJAX; as a basic example:

function drawChart (params) {
    $.ajax({
        data: params,
        dataType: 'json',
        success: function (json) {
            var data = new google.visualization.DataTable(json.dataTable);
            if (json.chartType == 'barChart') {
                var chart = new google.visualization.BarChart($('#'+json.divId)[0]);
            }
            else if (json.chartType == 'columnChart') {
                var chart = new google.visualization.ColumnChart($('#'+json.divId)[0]);
            }
            chart.draw(data, json.options);
        }
    });
}

This avoids the problem of trying to execute fetched js code.