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.
