Unresponsive button after calling javascript

Question

I'm using this js fiddle http://jsfiddle.net/iansan5653/7EPjH/17/

My problem is with the buttons at the top. They should display information in the text areas. In my browser, the buttons blank the page. Executing the same onclick code in the in console works, however. What am I doing wrong?

Some code left out for brevity

   var abstractlog = "1 0 c\n 2 0 b\n 3 0 a\n 4 0 d\n 1 1 f\n 2 1 b\n 3 1 a\n 4 1 e\n 1 2 f\n 2 2 b\n 3 2 a\n 4 2 d";
var abstractargs = "-r ^(?<TYPE>),(?<TIME>),(?<trace>)\n 2 -m \\k<trace>" ;

var browserlog = "64.163.76.74, cache-page, 0\n 164.163.76.74, retrieve-page, 9\n 164.163.76.74, cache-image, 18\n 164.163.76.74, retrieve-image, 39\n 164.163.76.74, quit, 160 \n --\n 237.250.28.190, cache-page, 0\n 237.250.28.190, retrieve-page, 17\n 237.250.28.190, cache-image, 34\n 237.250.28.190, retrieve-image, 104 \n 237.250.28.190, quit, 274 \n --\n 130.78.242.94, cache-page, 0\n 130.78.242.94, retrieve-page, 9\n 130.78.242.94, cache-image, 118 \n 130.78.242.94, retrieve-image, 140 \n 130.78.242.94, quit, 162 \n --\n 177.176.181.25, cache-page, 0\n 177.176.181.25, retrieve-page, 17\n 177.176.181.25, cache-image, 136 \n 177.176.181.25, retrieve-image, 204 \n 177.176.181.25, quit, 272 \n --\n 195.88.181.89, cache-image, 0\n 195.88.181.89, retrieve-image, 27\n 195.88.181.89, quit, 54\n --\n 153.98.187.29, cache-image, 0\n 153.98.187.29, retrieve-image, 62\n 153.98.187.29, quit, 124";
var browserargs = "-r (?<ip>) .+:(?<DTIME>.+)\\] \"GET HTTP/1.1 /(?<TYPE>.+)\" -m \\k<ip>" ;

var connectionlog =   "\"19.38.218.11 [31/May/2014:31200.0] \"GET HTTP/1.1 /test-bandwidth\"\n 19.38.218.11 [31/May/2014:31202.0] \"GET HTTP/1.1 /narrowband\"\n 19.38.218.11 [31/May/2014:31205.7] \"GET HTTP/1.1 /query\"\n 19.38.218.11 [31/May/2014:31208.9] \"GET HTTP/1.1 /query\"\n 19.38.218.11 [31/May/2014:31209.7] \"GET HTTP/1.1 /report-normal\"\n 95.39.21.28 [31/May/2014:31200.3] \"GET HTTP/1.1 /test-bandwidth\"\n 95.39.21.28 [31/May/2014:31202.3] \"GET HTTP/1.1 /narrowband\"\n 95.39.21.28 [31/May/2014:31206.0] \"GET HTTP/1.1 /query\"\n 95.39.21.28 [31/May/2014:31206.8] \"GET HTTP/1.1 /report-normal\"\n 210.82.199.247 [31/May/2014:31200.1] \"GET HTTP/1.1 /test-bandwidth\"\n 210.82.199.247 [31/May/2014:31200.8] \"GET HTTP/1.1 /broadband\"\n 210.82.199.247 [31/May/2014:31202.1] \"GET HTTP/1.1 /query\"\n 210.82.199.247 [31/May/2014:31208.3] \"GET HTTP/1.1 /query\"\n 210.82.199.247 [31/May/2014:31208.8] \"GET HTTP/1.1 /report-abnormal\"\n 130.78.242.94 [31/May/2014:31200.1] \"GET HTTP/1.1 /test-bandwidth\"\n 130.78.242.94 [31/May/2014:31200.7] \"GET HTTP/1.1 /broadband\"\n 130.78.242.94 [31/May/2014:31201.9] \"GET HTTP/1.1 /query\"\n 130.78.242.94 [31/May/2014:31208.0] \"GET HTTP/1.1 /query\"\n 130.78.242.94 [31/May/2014:31208.4] \"GET HTTP/1.1 /report-abnormal\"\n 38.151.1.182 [31/May/2014:31200.2] \"GET HTTP/1.1 /test-bandwidth\"\n 38.151.1.182 [31/May/2014:31200.8] \"GET HTTP/1.1 /broadband\"\n 38.151.1.182 [31/May/2014:31202.0] \"GET HTTP/1.1 /query\"\n 38.151.1.182 [31/May/2014:31203.3] \"GET HTTP/1.1 /query\"\n 38.151.1.182 [31/May/2014:31203.8] \"GET HTTP/1.1 /report-normal\"\n 37.161.90.108 [31/May/2014:31200.2] \"GET HTTP/1.1 /test-bandwidth\"\n 37.161.90.108 [31/May/2014:31200.9] \"GET HTTP/1.1 /broadband\"\n 37.161.90.108 [31/May/2014:31202.2] \"GET HTTP/1.1 /query\"\n 37.161.90.108 [31/May/2014:31203.6] \"GET HTTP/1.1 /query\"\n 37.161.90.108 [31/May/2014:31204.7] \"GET HTTP/1.1 /report-normal\"";
var connectionargs = "-r (?<ip>.+), (?<TYPE>.+), (?<DTIME>.+) -s ^--$";
 var logstring;
 var argstring;

function writeAbstractModel() {
       logstring =  abstractlog ;
       argstring = abstractargs;K
}

function writeBrowserModel() {
    logstring = browserlog ;
    argstring = browserargs;
}

function writeConnectionModel() {
    logstring = connectionlog ;
    argstring = connectionargs;
}

function write() {
    $("#logtext").val(logstring);
    $("#args").val(argstring);
}

<button id="abstractform" onclick="writeAbstractModel(); write(); data = abc_model;">Abstract Example </button>
    <button id="bandwithform" onclick="writeBrowserModel(); write(); data = test_bandwith_model;">Bandwith Example</button>
    <button type="browserform" onclick="writeConnectionModel(); write(); data = browser_model;"> Browser Example</button>

Answer 1

First of all, this is a cool project!

One of the main issues of this code seems to be related to how google.load uses a document.write() call when adding code/scripts to an HTML page.

But there is at least one way of getting something like this "click button to display visualizations" process to work as intended:

Step 1

Try adding a general "document ready" section in your JavaScript, and moving your google.load into it, like this:

// prepare click event for "Draw Chart" button
$(document).ready(function() {
    google.load('visualization', '1', {packages:['gauge'], callback: function () {
        $('#draw_chart').click(function () {
            chart();
        });
    }});
});

Step 2

Adjust the drawChart() call from earlier and place it inside the inner $.getJSON() function, like this:

$.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();
    }
);

Step 3

Finally, update the HTML button id so that it can be "activated" to know what to do once clicked by user, like this:

<button id="draw_chart">Draw Chart</button>

Full Code Example

<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'],
            ['Temp (F)', temperature]
            ]);

        var thermOptions = {
            width: 200,
            height: 200,
            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: 200,
            height: 200,
            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);
    }

    // prepare click event for "Draw Chart" button
    $(document).ready(function() {
        google.load('visualization', '1', {packages:['gauge'], callback: function () {
            $('#draw_chart').click(function () {
                chart();
            });
        }});
    });

    </script>
  </head>
  <body>
    <button id="draw_chart">Draw Chart</button>
    <div id='barometer_div'></div>
    <div id='thermometer_div'></div>
    <div id='humidostat_div'></div>
  </body>
</html>

Code Example Demo

(as a fiddle)

Notes

• More information about this sort of issue and other workarounds can be found on this Google Groups thread.*
• At present, the gauges slowly shrink in size over time when continuously reloaded... This is fixed by specifying both a width and a height for each visualization. See this thread for more information.