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>
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:
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();
});
}});
});
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();
}
);
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>
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.