JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript">
    function chart() {
        var pressure;
        var temperature;
        var humidity;
        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;
            }
        );
        
        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,
               ...