Re: Error when transitioning from 2 y-axis to 1 y-axis - Cannot read property 'type' of undefined

[asgallant]

Congratulations!  You found a bug in the API (see it reproduced here: http://jsfiddle.net/asgallant/k2FQt/).  You can temporarily work around the bug by turning off animations when moving from a chart with 2 vAxes to a chart with only 1.

I filed a bug report on this here.

On Wednesday, October 3, 2012 2:30:10 PM UTC-4, Kyle Howe wrote:

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?

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!

[Kyle Howe]

Thanks for the quick response and thanks for filing the report!  I will do as you suggested and just turn off that animation for now...