I am a bit of a newbie to Javascript, JQuery and web development in general and have come upon an error which I can't find the solution to.
I have a database that contains a bunch of meteorological data which is continually being updated. On the webpage, I have given the user the option to select the parameter to display along with the month, day and year. When they click on a button, I use Ajax to call a second php file which contains code to query a mySQL database and send the data back to the webpage for display. The chart is updated and animates to show the new selected data. All of the data is displayed as a standard line chart with a single y-axis except for precipitation. On the precipitation graph, I have a secondary y-axis that is generated to show the cumulative precipitation in addition to the hourly precipitation. The transition from a parameter to precipitation works perfectly and the chart is redrawn correctly with a secondary axis. The error occurs when the user is viewing the precipitation graph and then selects another parameter (the chart is forced to go from 2 y-axes to 1 y-axis)...or at least I think this is where the error is happening. The chart displays "Cannot read property 'type' of undefined". If the user clicks the update button a second time, the chart will display the correct data, but no transition animation occurs. Are there certain variables that I need to clear or is this an issue with Javascript? <https://lh3.googleusercontent.com/-HTbr5AT0ZK8/UGyC7Yx57XI/AAAAAAAACu4/KqIFE07tClM/s1600/CropperCapture%5B30%5D.png> Here is the Ajax that is executed on button click: var button_submission = document.getElementById('submission'); button_submission.onclick = function(){ //Set the variables to the dropdown selections. These are sent to //the php script to query the database. dropdown_type = $('#dropdown_type').val() dropdown_month = $('#dropdown_month').val() dropdown_day = $('#dropdown_day').val() dropdown_year = $('#dropdown_year').val() dropdown_station = $('#dropdown_station').val() display_type = $('#display_type').val() display_period = $('#time_period').val() //The ajax call to the php function. $.ajax({ url: "DataRequest_v3.php", type: "POST", data: ({MonitorVar: dropdown_type, Month: dropdown_month, Day: dropdown_day, Year: dropdown_year, Station: dropdown_station, Period: display_period}), dataType:"text", success: function(data){ data_split=data.split("SPLITHERE"); encoded_chart = new google.visualization.DataTable(data_split[0]) encoded_table = new google.visualization.DataTable(data_split[1]) switch(dropdown_type){ case 'Rain_Tot': options = { hAxis: {title: "Date"}, series: [ {targetAxisIndex:0}, {targetAxisIndex:1}], vAxes: [ {title:"Hourly Precipitation (mm)"}, {title:"Cummulative Precipitation (mm)"}], colors:['blue','green'], animation:{ duration: 1000, easing: 'out' } }; break default: options = { vAxis: {title: "Y-Value"}, hAxis: {title: "Date"}, series: {targetAxisIndex:0}, colors: ['blue'], animation:{ duration: 1000, easing: 'out' } }; break } drawTemperature(); drawTable(); }}); } Please excuse the sloppy coding I am still learning :) I can post the "DataRequest_v3.php" if people need it but all it does is query a database and it works fine. I hope this all makes sense! -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/yw9zGCvoxGAJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
