Title: Page just blanks and loads forever when I press button
Tags: javascript;html;function;google-visualization
Question: http://jsfiddle.net/iansan5653/7EPjH/17/
<head&gt;
<script type='text/javascript' src='https://www.google.com/jsapi'&gt;</script&gt;
<script type="text/javascript"&gt;
function chart() {
var pressure;
var temperature;
var humidity;
var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=97c669df9c4795db96b39188000c1998&amp;_render=json&amp;lat=26.6403&amp;lon=-81.8725';
$.getJSON(url,
function(data){
pressure = data.value.items[0].data[1].parameters.pressure.value;
temperature = data.value.items[0].data[1].parameters.temperature[0].value;
humidity = data.value.items[0].data[1].parameters.humidity.value;
}
);

google.load('visualization', '1', {
packages: ['gauge']
});
google.setOnLoadCallback(drawChart);

function drawChart() {

pressure = eval(pressure);
var barData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['C/Precip', pressure]
]);

var barOptions = {
width: 400,
redFrom: 28,
redTo: 29,
yellowFrom: 29,
yellowTo: 30,
greenFrom: 30,
greenTo: 31,
min: 28,
max: 31,
majorTicks: ["28","29","30","31"],
minorTicks: 10
};

var barChart = new google.visualization.Gauge(document.getElementById('barometer_div'));
barChart.draw(barData, barOptions);

temperature = eval(temperature);
var thermData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temp (F)', temperature]
]);

var thermOptions = {
width: 400,
redFrom: 80,
redTo: 120,
yellowFrom: 0,
yellowTo: 40,
yellowColor: '0099FF',
greenFrom: 40,
greenTo: 80,
min: 0,
max: 120,
majorTicks: ["0","10","20","30","40","50","60","70","80","90","100","110","120"],
minorTicks: 10
};
var thermChart = new google.visualization.Gauge(document.getElementById('thermometer_div'));
thermChart.draw(thermData, thermOptions);

humidity = eval(humidity);
var humidData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Humidity', humidity]
]);

var humidOptions = {
width: 400,
yellowFrom: 10,
yellowTo: 40,
greenFrom: 40,
greenTo: 70,
redColor: '0099FF',
redFrom: 70,
redTo: 100,
min: 10,
max: 100,
majorTicks: ["10","20","30","40","50","60","70","80","90","100"],
minorTicks: 10
};
var humidChart = new google.visualization.Gauge(document.getElementById('humidostat_div'));
humidChart.draw(humidData, humidOptions);
}
</script&gt;
</head&gt;
<body&gt;
<button onclick="chart()"&gt;Draw Chart</button&gt;
<div id='barometer_div'&gt;</div&gt;
<div id='thermometer_div'&gt;</div&gt;
<div id='humidostat_div'&gt;</div&gt;
</body&gt;
I managed to get the Google Charts code to work without being a function just fine, but when I wrap all the code in a function and try to call the function by pressing a button, the page just loads forever. I tried running JSLint to clean up the code, but it still didn't work. Also, the error console (I am using Firefox) doesn't give any errors or warnings. I just can't figure out why this is breaking.
Comment: seems google.setOnLoadCallback(drawChart); is not firing lemme check out why...

Here is the accepted answer: Here you go ... the google.setOnLoadCallback(drawChart); was never called so I added a callback function in the google.load:
google.load('visualization','1',{'packages':['gauge'],'callback':drawChart})
Comment for this answer: I'm on Chrome, did you see the JSFiddle I linked? does it work in there? what brawser you using? did you edit your code or used mine? http://jsfiddle.net/7EPjH/26/
Comment for this answer: looks like it works in your jsFiddle too... http://jsfiddle.net/7EPjH/27/ it takes a while at first, but it works... you have to write 'packages':['gauge'] you had packages:['gauge']
Comment for this answer: define it breaks, I see them gagues getting slightly bigger the more I click them...
Comment for this answer: how would you like it to behave on second click?
Comment for this answer: what about this: http://jsfiddle.net/7EPjH/28/ I just flush the divs content before override, looks good on my brawser... gonna make a your way solution w/o jQuery...
Comment for this answer: I see on second click it disappears, but looks they come back after clicking some times, is that right? It will be helpful trying to find a fix. http://jsfiddle.net/7EPjH/29/
Comment for this answer: I'm using Firefox. Both of them are working on the first click, but when I click the button again, it breaks. It wasn't working for me before because I double-click a lot. Maybe it's the way the function is being called?
Comment for this answer: I would like it to refresh the gauges by loading them again, however, when I click it the second time, the gauges disappear and don't come back.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2012:00:08/09/12', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><function><google-visualization>', 'Title': 'Page just blanks and loads forever when I press button', 'ViewCount': 246, 'id': 11882865, 'user_AboutMe': '<p>Full stack web app &amp; REST API developer at Galatea Associates working on financial software and open source projects. Experienced in TypeScript, Python, and Scala.</p>\n', 'user_AccountId': 1290916.0, 'user_DisplayName': 'Ian', 'user_Reputation': 5335.0, 'user_Views': 534.0, 'user_id': 1243041.0}}