Using my updated codes, I got this response as I can see in the firebug
too. Is it the problem with the data type for google chart tool?
[['2013-06-01', 0, 0, 0]]
On Friday, February 1, 2013 6:42:25 PM UTC-5, Hui Li wrote:
>
> Hi,
>
> I updated my codes as the following. I was able to alert(data) to see the
> correct data from server showing up. But when I commented the alert() out
> and added the drawVisualization(data), it did not draw the chart.
>
>
> function drawVisualization(new_data) {
> var data = new
> google.visualization.DataTable();
> if(new_data){
> data.addColumn('string','Date Time');
> data.addColumn('number','Wireless Mini CCB
> Controls');
> data.addColumn('number','FNX App
> Controls');
> data.addColumn('number','Hoist Status');
> data.addRows(new_data);
> var options = {
> title: 'Status of Hoists',
> vAxis: {title: 'Status of Hoists'},
> isStacked: true
> };
> var chart = new
> google.visualization.SteppedAreaChart(document.getElementById('status_chart'));
> chart.draw(data, options);
> }
>
> }
>
>
> success: function(data) {
> drawVisualization(data);
> //alert(data);
> },
> error: function(XMLHttpRequest, textStatus, errorThrown) {
> $("#status").html('Timeout sending request.');
> }
>
>
>
>
> On Friday, February 1, 2013 2:57:07 PM UTC-5, asgallant wrote:
>>
>> There are a few things to note here:
>>
>> 1) your drawVisualization function doesn't accept any arguments, so every
>> time you call it, it will produce the same results;
>> 2) you get data back from your AJAX query (in the "data" variable), but
>> you don't do anything with it;
>> 3) your drawVisualization call in the AJAX is commented out, so nothing
>> would happen even if you did use the data variable
>>
>> To help you get this working, it would help me if you could post two
>> things: the javascript after being rendered by the server (open in a
>> browser and view the page source to get the rendered javascript), and a
>> sample of what is returned in "data" by your AJAX call.
>>
>> On Friday, February 1, 2013 2:25:56 PM UTC-5, Hui Li wrote:
>>>
>>> 0 down vote
>>> favorite<http://stackoverflow.com/questions/14640522/google-chart-works-the-first-time-only-using-javascript-google-chart-tool-and#>
>>>
>>>
>>> I need to update the chart every time the user selects values from some
>>> drop down menus and submit them.
>>>
>>> I am writing Python scripts to handle the selected options and fetch the
>>> data from a database based on the user's selections, then pass the data to
>>> the HTML with string replacement technique. The javascript takes the data
>>> from Python and the google chart API is used to generate the chart.
>>>
>>> But this works only once. After the first time, the user selects and
>>> submits the selections, the chart remain unchanged. I can see the data is
>>> correct using firebug tool.
>>>
>>> Can somebody help me on that? Thank you!
>>>
>>> Below is my javascripts:
>>>
>>>
>>> script
>>> src="http://www.google.com/jsapi?key=ABQIAAAA1Vvq5pLyw5IAAQQtCIurLhSCGfxgLuOmAJcC-OBbFOMYrpib_BSypK7Qf_9YkaT-2SzpuOBRKp6Bqw";
>>> type="text/javascript"></script>
>>> <script type="text/javascript">
>>> google.load("jquery", "1.3.2");
>>> </script>
>>>
>>> <!--Load the AJAX API-->
>>> <script type="text/javascript"
>>> src="http://www.google.com/jsapi";></script>
>>> <script type="text/javascript">
>>> google.load('visualization', '1', {packages: ['corechart']});
>>> </script>
>>> <script type="text/javascript">
>>> google.setOnLoadCallback(drawVisualization);
>>> function drawVisualization() {
>>> var data = new google.visualization.DataTable();
>>> {%if chart_Data%}
>>> data.addColumn('string','Date Time');
>>> data.addColumn('number','Wireless Mini CCB
>>> Controls');
>>> data.addColumn('number','FNX App Controls');
>>> data.addColumn('number','Hoist Status');
>>> data.addRows({{chart_Data}});
>>>
>>> //var data =
>>> google.visualization.arrayToDataTable({{chart_Data}});
>>>
>>> var options = {
>>> title: 'Status of Hoists',
>>> vAxis: {title: 'Status of Hoists'},
>>> isStacked: true
>>> };
>>>
>>> var chart = new
>>> google.visualization.SteppedAreaChart(document.getElementById('status_chart'));
>>> chart.draw(data, options);
>>> {% endif %}
>>> }
>>>
>>>
>>> ----------------------------------------
>>>
>>> Below is my function to handle the drop down list menu selection and
>>> send "GET" request to my Python handler, which will return a replacement
>>> string {{chart_Data}}:
>>>
>>> --------------------------------------------
>>>
>>> function monitorHoist(hoist_to_monitor,month,day,year){
>>>
>>> var hoist_to_monitor_text =
>>> document.getElementById('hoist_to_monitor').options[document.getElementById('hoist_to_monitor').selectedIndex].value
>>> var month_text =
>>> document.getElementById('month').options[document.getElementById('month').selectedIndex].value
>>> var day_text =
>>> document.getElementById('day').options[document.getElementById('day').selectedIndex].value
>>> var year_text =
>>> document.getElementById('year').options[document.getElementById('year').selectedIndex].value
>>> $.ajax({
>>> type: 'GET',
>>> url: '/all?command=monitor&hoist_to_monitor=' +
>>> hoist_to_monitor_text
>>> +'&month='+month_text+'&day='+day_text+'&year='+year_text,
>>> //data: hoist_to_monitor_text,month_text,day_text,year_text,
>>> timeout: 60000,
>>> success: function(data) {
>>> $("#status").html('Success in sending request.');
>>> //drawVisualization();
>>> },
>>> error: function(XMLHttpRequest, textStatus, errorThrown) {
>>> $("#status").html('Timeout sending request.');
>>> }
>>> });
>>> }
>>>
>>> --------------------------------------
>>>
>>> Below is the division of the chart:
>>> --------------------------------------
>>>
>>> <div id='status_chart' style="width: 900px; height: 500px;"></div>
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
