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.
