Your code as is won't draw the chart on page load, because drawVisualization needs data passed in. Perhaps if you make an AJAX call immediately to fetch data, via your "monitorHoist" function; change the google.setOnLoadCallback from drawVizualization to monitorHoist (assuming that all of the HTML elements needed for that function to work are properly populated on page load; if they are not, you should write a similar function with some initial values to work with). Also, if you are only getting one row of data back with each AJAX call (eg: [['2013-06-01', 0, 0, 0]]), then you will probably need to make the DataTable persistent across your AJAX calls, so that each call can add more data instead of replacing the whole DataTable.
On Friday, February 1, 2013 8:02:34 PM UTC-5, Hui Li wrote: > > Below is the whole javascript. Thank you! > > > <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> > <script src="http://code.jquery.com/jquery-1.9.0.min.js";></script> > <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js > "></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> > function drawVisualization(new_data) { > var data = new > google.visualization.DataTable(); > 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); > } > > google.setOnLoadCallback(drawVisualization); > > function request_update() { > $("#status").html("Requesting early sensor update..."); > $.ajax({ > type: 'GET', > url: '/update', > timeout: 12000, > success: function(data) { > $("#status").html(''); > }, > error: function(XMLHttpRequest, textStatus, errorThrown) { > $("#status").html('Timeout updating ' + sn + '...'); > } > }); > } > > function set_hoist(command) { > $("#status").html("Setting Hoist " + command) > $.ajax({ > type: 'GET', //GET request to URL /all with query string. > In this case, /all happens to be handled by handller in Python module > url: '/all?command=' + command, // URL with query string; > Name is "onoff", Value is variable value onoff. > data: command, > timeout: 10000, > success: function(data) { > $("#status").html('Success in sending request.'); > }, > error: function(XMLHttpRequest, textStatus, errorThrown) { > $("#status").html('Timeout sending request.'); > } > }); > } > > function update_gauge(div, sn, cn) { > $("#status").html("Updating " + sn + "..."); > $.ajax({ > type: 'GET', > url: '/gauge?name=' + cn, > timeout: 5000, > success: function(data) { > $(div).html(data); > $("#status").html(''); > }, > error: function(XMLHttpRequest, textStatus, errorThrown) { > $("#status").html('Timeout updating gauge.'); > } > }); > } > > function update() { > update_gauge('#light', 'light', 'xbr0.light'); > update_gauge('#temperature', 'temperature', > 'xbr0.temperature'); > update_gauge('#led', 'led', 'xbib0.led1'); > window.setTimeout(update, 10000); > } > //This is called by <td align="right"><input id="monitor_go" > type="button" value="Monitor" onClick="monitorHoist();"> </td> > function monitorHoist(){ > $("#status_chart").html('Preparing data...'); > 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: '/monitor?command=monitor&hoist_to_monitor=' + > hoist_to_monitor_text > +'&month='+month_text+'&day='+day_text+'&year='+year_text, > timeout: 60000, > success: function(monitor_html) { > $("#status").html('Success in sending monitor request.'); > drawVisualization(monitor_html); > //alert(monitor_html); > }, > error: function(XMLHttpRequest, textStatus, errorThrown) { > $("#status").html('Timeout sending request.'); > } > }); > > } > //function to excute after DOM is ready; button onclick events > $(document).ready(function(){ > $("#set_fsu_on").click(function() { set_hoist("Fsuon"); }); > //$("#status").attr('value','Sending commands...') > $("#set_fsu_off").click(function() { set_hoist("Fsuoff"); }); > $("#set_hsu_on").click(function() { set_hoist("Hsuon"); }); > $("#set_hsu_off").click(function() { set_hoist("Hsuoff"); }); > $("#set_hsd_on").click(function() { set_hoist("Hsdon"); }); > $("#set_hsd_off").click(function() { set_hoist("Hsdoff"); }); > $("#set_fsd_on").click(function() { set_hoist("Fsdon"); }); > $("#set_fsd_off").click(function() { set_hoist("Fsdoff"); }); > $("#set_estop_on").click(function() { set_hoist("Estopon"); }); > $("#set_estop_off").click(function() { set_hoist("Estopoff"); > }); > }); > > </script> > > > > On Friday, February 1, 2013 6:49:15 PM UTC-5, asgallant wrote: >> >> Post the whole javascript code (as rendered in a browser) and I'll take a >> look. >> >> On Friday, February 1, 2013 6:47:13 PM UTC-5, Hui Li wrote: >>> >>> 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.
