JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
var pressure;
var temperature;
var humidity;
function chart() {
var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=97c669df9c4795db96b39188000c1998&_render=json&lat=26.6403&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;
// then call drawChart knowing that we have some sort of data
drawChart();
}
);
}
function drawChart() {
pressure = eval(pressure);
var barData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['C/Precip', pressure]
]);
var barOptions = {
width: 200,
height: 200,
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'],
...