I also removed the scale calculations in the graphs, which were operating on the entire log file, not just the displayed last 300 strikes. This caused the vertical scale of the graphs to be too large. The graphs look much better, allowing Google to auto-scale on the displayed set of strikes:
as3935_distance.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60">
<title>AS3935 Distance</title>
<script src="https://www.google.com/jsapi"></script>
<script src="./jquery-1.11.0.min.js"></script>
<script src="./jquery.csv-0.71.js"></script>
<script>
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
// next line prevents caching of retrieved data by IE and possibly other browsers.
// without this, IE11 never updated the graphs on new strike data being added to the .csv file.
$.ajaxSetup({ cache: false });
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("as3935_log.txt", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
//Use rowRange variable to set the last "n" number of rows of data to display
var rowRange = 300;
var numRows = data.getNumberOfRows();
var maxRows = numRows-1;
var minRows = numRows-rowRange;
if (minRows < 0){minRows = 0;}
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([2,7]);
view.setRows(minRows,maxRows);
var options = {
title: "AS3935 Lightning Distance in KM\nLast 300 Strikes",
chartArea: {height: 120, width: 900},
backgroundColor: {fill: "#33CCFF"},
hAxis: {title: data.getColumnLabel(2), slantedText: 1, slantedTextAngle: 45, textStyle: {fontSize: 10}},
//vAxis: {title: data.getColumnLabel(7), minValue: data.getColumnRange(7).min, maxValue: data.getColumnRange(7).max},
vAxis: {title: data.getColumnLabel(7)},
legend: 'none'
};
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1'));
chart1.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart1" style="width:1100px; height:325px;"> </div>
</body>
</html>
as3935_energy.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<title>AS3935 Energy</title>
<script src="https://www.google.com/jsapi"></script>
<script src="./jquery-1.11.0.min.js"></script>
<script src="./jquery.csv-0.71.js"></script>
<script>
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
// next line prevents caching of retrieved data by IE and possibly other browsers.
// without this, IE11 never updated the graphs on new strike data being added to the .csv file.
$.ajaxSetup({ cache: false });
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("as3935_log.txt", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
//Use rowRange variable to set the last "n" number of rows of data to display
var rowRange = 300;
var numRows = data.getNumberOfRows();
var maxRows = numRows-1;
var minRows = numRows-rowRange;
if (minRows < 0){minRows = 0;}
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([2,10]);
view.setRows(minRows,maxRows);
var options = {
title: "AS3935 Lightning Energy - Unitless\nLast 300 Strikes",
chartArea: {height: 120, width: 900},
backgroundColor: {fill: "#33CCFF"},
hAxis: {title: data.getColumnLabel(2), slantedText: 1, slantedTextAngle: 45, textStyle: {fontSize: 10}},
//vAxis: {title: data.getColumnLabel(10), minValue: data.getColumnRange(10).min, maxValue: data.getColumnRange(10).max},
vAxis: {title: data.getColumnLabel(10)},
legend: 'none'
};
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart2" style="width:1100px; height:325px;">
</div>
</body>
</html>
as3935_rate.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<title>AS3935 Rate</title>
<script src="https://www.google.com/jsapi"></script>
<script src="./jquery-1.11.0.min.js"></script>
<script src="./jquery.csv-0.71.js"></script>
<script>
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
// next line prevents caching of retrieved data by IE and possibly other browsers.
// without this, IE11 never updated the graphs on new strike data being added to the .csv file.
$.ajaxSetup({ cache: false });
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("as3935_log.txt", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
//Use rowRange variable to set the last "n" number of rows of data to display
var rowRange = 300;
var numRows = data.getNumberOfRows();
var maxRows = numRows-1;
var minRows = numRows-rowRange;
if (minRows < 0){minRows = 0;}
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([2,6]);
view.setRows(minRows,maxRows);
var options = {
title: "AS3935 Lightning Event Strike Rate\nStrikes/Minute\nLast 300 Strikes",
chartArea: {height: 120, width: 900},
backgroundColor: {fill: "#33CCFF"},
hAxis: {title: data.getColumnLabel(2), slantedText: 1, slantedTextAngle: 45, textStyle: {fontSize: 10}},
//vAxis: {title: data.getColumnLabel(6), minValue: data.getColumnRange(6).min, maxValue: data.getColumnRange(6).max},
vAxis: {title: data.getColumnLabel(6)},
legend: 'none'
};
var chart3 = new google.visualization.ColumnChart(document.getElementById('chart3'));
chart3.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart3" style="width:1100px; height:325px;">
</div>
</body>
</html>