Jekyll2020-05-17T21:01:04-06:00http://github.crookster.org/timetemp/feed.xmlTimeTempTime and temperature graphs of phant data using google chart JS libraries. SFE Phant service is no longer in production but docker containers, kubernetes and Raspbery Pi-s can substitute.David CrookHourly Temperature and Pressure2019-11-07T00:00:00-07:002020-05-17T20:59:24-06:00http://github.crookster.org/timetemp/chart/presstemp-hourly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = 'bWbZXWMNmgCgqdzvOyG3FylZZe6';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
//console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°F)');
data.addColumn('number', 'Pressure (mm)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
parseFloat("0.0"),
]);
// console.log(data);
// these classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'Indoor Weather Station',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'end',
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: 'red', targetAxisIndex: 0},
1: {color: '#004411', targetAxisIndex: 1}
},
hAxis: {
title: 'Time',
},
// axisTitlesPosition: 'in',
// backgroundColor: '#E0E0E0',
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°F)'},
1: {title: 'Ambient Pressure'}
},
/* crosshair: {
* color: '#000',
* trigger: 'selection'
* }, */
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
/* trendlines: {
* 0: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: '#ff3333',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* },
* 1: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: 'green',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* }
* }, */
//colors:['red','#004411'],
//theme: 'maximized'
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
/* console.log(chart); */
var chartSerialized = chart.getImageURI();
/* console.log(chartSerialized); */
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
/* function onSelectChartWrapper() {
* var chart = wrapper.getChart();
* var selection = chart.getSelection();
* console.log(selection);
* }; */
//google.visualization.events.addListener(wrapper, 'select', onSelectChartWrapper);
// asynchronously fetch the data
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
//console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// populate DataTable
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.in_tf),
parseFloat(row.in_pres),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
// console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}
});
// initially draw a "blank" chart
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-24%20hours', 'chart-hourly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-hourly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookWeekly Temperature and Pressure2019-11-06T00:00:00-07:002020-05-17T20:59:37-06:00http://github.crookster.org/timetemp/chart/presstemp-weekly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = 'bWbZXWMNmgCgqdzvOyG3FylZZe6';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
//console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°F)');
data.addColumn('number', 'Pressure (mm)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
parseFloat("0.0"),
]);
// console.log(data);
// these classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'Indoor Weather Station',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'end',
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: 'red', targetAxisIndex: 0},
1: {color: '#004411', targetAxisIndex: 1}
},
hAxis: {
title: 'Time',
},
// axisTitlesPosition: 'in',
// backgroundColor: '#E0E0E0',
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°F)'},
1: {title: 'Ambient Pressure'}
},
/* crosshair: {
* color: '#000',
* trigger: 'selection'
* }, */
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
/* trendlines: {
* 0: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: '#ff3333',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* },
* 1: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: 'green',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* }
* }, */
//colors:['red','#004411'],
//theme: 'maximized'
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
/* console.log(chart); */
var chartSerialized = chart.getImageURI();
/* console.log(chartSerialized); */
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
/* function onSelectChartWrapper() {
* var chart = wrapper.getChart();
* var selection = chart.getSelection();
* console.log(selection);
* }; */
//google.visualization.events.addListener(wrapper, 'select', onSelectChartWrapper);
// asynchronously fetch the data
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
//console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// populate DataTable
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.in_tf),
parseFloat(row.in_pres),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
// console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}
});
// initially draw a "blank" chart
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-7%20days&sample=5', 'chart-weekly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-weekly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookMonthly Temperature and Pressure2019-11-05T00:00:00-07:002020-05-17T20:59:46-06:00http://github.crookster.org/timetemp/chart/presstemp-monthly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = 'bWbZXWMNmgCgqdzvOyG3FylZZe6';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
//console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°F)');
data.addColumn('number', 'Pressure (mm)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
parseFloat("0.0"),
]);
// console.log(data);
// these classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'Indoor Weather Station',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'end',
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: 'red', targetAxisIndex: 0},
1: {color: '#004411', targetAxisIndex: 1}
},
hAxis: {
title: 'Time',
},
// axisTitlesPosition: 'in',
// backgroundColor: '#E0E0E0',
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°F)'},
1: {title: 'Ambient Pressure'}
},
/* crosshair: {
* color: '#000',
* trigger: 'selection'
* }, */
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
/* trendlines: {
* 0: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: '#ff3333',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* },
* 1: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: 'green',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* }
* }, */
//colors:['red','#004411'],
//theme: 'maximized'
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
/* console.log(chart); */
var chartSerialized = chart.getImageURI();
/* console.log(chartSerialized); */
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
/* function onSelectChartWrapper() {
* var chart = wrapper.getChart();
* var selection = chart.getSelection();
* console.log(selection);
* }; */
//google.visualization.events.addListener(wrapper, 'select', onSelectChartWrapper);
// asynchronously fetch the data
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
//console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// populate DataTable
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.in_tf),
parseFloat(row.in_pres),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
// console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}
});
// initially draw a "blank" chart
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-31%20days&sample=12', 'chart-monthly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-monthly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookHourly rpif1 Temperature2019-11-04T00:00:00-07:002019-11-10T22:09:09-07:00http://github.crookster.org/timetemp/chart/pitemp-hourly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = '0Q0zv04xKJCyjL1XQkD6TYDG40x';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
// console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°C)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
]);
// console.log(data);
// classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'rpif1 Model 4 B',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
// lineWidth: 0, pointSize: 2,
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'start',
/* alignment: 'end', */
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: '#c51a4a', targetAxisIndex: 0},
},
hAxis: {
title: 'Time',
},
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°C)'},
},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
//console.log(chart);
var chartSerialized = chart.getImageURI();
//console.log(chartSerialized);
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
// console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// console.log(objectData)
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp_c),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}});
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-24%20hours', 'chart-hourly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-hourly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookQuarterly Temperature and Pressure2019-11-04T00:00:00-07:002020-05-17T21:00:03-06:00http://github.crookster.org/timetemp/chart/presstemp-quarterly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = 'bWbZXWMNmgCgqdzvOyG3FylZZe6';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
//console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°F)');
data.addColumn('number', 'Pressure (mm)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
parseFloat("0.0"),
]);
// console.log(data);
// these classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'Indoor Weather Station',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'end',
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: 'red', targetAxisIndex: 0},
1: {color: '#004411', targetAxisIndex: 1}
},
hAxis: {
title: 'Time',
},
// axisTitlesPosition: 'in',
// backgroundColor: '#E0E0E0',
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°F)'},
1: {title: 'Ambient Pressure'}
},
/* crosshair: {
* color: '#000',
* trigger: 'selection'
* }, */
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
/* trendlines: {
* 0: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: '#ff3333',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* },
* 1: {
* // type: 'linear',
* type: 'polynomial',
* degree: 3,
* color: 'green',
* lineWidth: 3,
* opacity: 0.3,
* // showR2: true,
* // visibleInLegend: true
* }
* }, */
//colors:['red','#004411'],
//theme: 'maximized'
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
/* console.log(chart); */
var chartSerialized = chart.getImageURI();
/* console.log(chartSerialized); */
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
/* function onSelectChartWrapper() {
* var chart = wrapper.getChart();
* var selection = chart.getSelection();
* console.log(selection);
* }; */
//google.visualization.events.addListener(wrapper, 'select', onSelectChartWrapper);
// asynchronously fetch the data
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
//console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// populate DataTable
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.in_tf),
parseFloat(row.in_pres),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
// console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}
});
// initially draw a "blank" chart
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-91%20days&sample=18', 'chart-quarterly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-quarterly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookWeekly rpif1 Temperature2019-11-03T00:00:00-06:002019-11-10T22:49:44-07:00http://github.crookster.org/timetemp/chart/pitemp-weekly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = '0Q0zv04xKJCyjL1XQkD6TYDG40x';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
// console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°C)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
]);
// console.log(data);
// classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'rpif1 Model 4 B',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
// lineWidth: 0, pointSize: 2,
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'start',
/* alignment: 'end', */
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: '#c51a4a', targetAxisIndex: 0},
},
hAxis: {
title: 'Time',
},
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°C)'},
},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
//console.log(chart);
var chartSerialized = chart.getImageURI();
//console.log(chartSerialized);
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
// console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// console.log(objectData)
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp_c),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}});
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-7%20days&sample=6', 'chart-weekly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-weekly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookMonthly rpif1 Temperature2019-11-02T00:00:00-06:002019-11-10T22:18:21-07:00http://github.crookster.org/timetemp/chart/pitemp-monthly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = '0Q0zv04xKJCyjL1XQkD6TYDG40x';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
// console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°C)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
]);
// console.log(data);
// classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'rpif1 Model 4 B',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
// lineWidth: 0, pointSize: 2,
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'start',
/* alignment: 'end', */
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: '#c51a4a', targetAxisIndex: 0},
},
hAxis: {
title: 'Time',
},
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°C)'},
},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
//console.log(chart);
var chartSerialized = chart.getImageURI();
//console.log(chartSerialized);
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
// console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// console.log(objectData)
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp_c),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}});
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-31%20days&sample=16', 'chart-monthly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-monthly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookSixty-day rpif1 Temperature2019-11-01T00:00:00-06:002019-11-10T22:46:44-07:00http://github.crookster.org/timetemp/chart/pitemp-2month<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = '0Q0zv04xKJCyjL1XQkD6TYDG40x';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
// console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°C)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
]);
// console.log(data);
// classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'rpif1 Model 4 B',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
// lineWidth: 0, pointSize: 2,
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'start',
/* alignment: 'end', */
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: '#c51a4a', targetAxisIndex: 0},
},
hAxis: {
title: 'Time',
},
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°C)'},
},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
//console.log(chart);
var chartSerialized = chart.getImageURI();
//console.log(chartSerialized);
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
// console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// console.log(objectData)
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp_c),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}});
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-61%20days&sample=36', 'chart-bimonthly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-bimonthly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David CrookQuarterly rpif1 Temperature2019-11-01T00:00:00-06:002019-11-10T22:47:31-07:00http://github.crookster.org/timetemp/chart/pitemp-quarterly<!-- google API loader in _includes/head/custom.html -->
<script>
function creata_drawChart(dataQueryStr, divElemName) {
// Phant Stream public key
var public_key = '0Q0zv04xKJCyjL1XQkD6TYDG40x';
// .csv files are smaller than equivalent .json
var csvUrl = 'https://data.crookster.org/output/' + public_key + '.csv' + dataQueryStr;
// console.log(csvUrl);
var aDrawChart = function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature (°C)');
// add two dummy "empty" rows so we can draw a blank chart to begin
data.addRow([
new Date(Date.now()-1),
parseFloat("0.0"),
]);
data.addRow([
new Date(Date.now()),
parseFloat("0.0"),
]);
// console.log(data);
// classic options are associated with the LineChart chart type
var classicChartOptions = {
title: 'rpif1 Model 4 B',
// titlePosition: 'in',
titleTextStyle : {color: 'grey', fontSize: 16},
chartArea:{left:'5%',top:'15%',width:'90%',height:'70%'},
//curveType: 'function',
// lineWidth: 0, pointSize: 2,
legend: {
/* position: 'in',
* position: 'bottom', */
position: 'top',
alignment: 'start',
/* alignment: 'end', */
/* alignment: 'center', */
},
dataOpacity: 0.6,
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {color: '#c51a4a', targetAxisIndex: 0},
},
hAxis: {
title: 'Time',
},
vAxes: {
// Adds titles to each axis
0: {title: 'Temp (°C)'},
},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
},
};
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: divElemName,
dataTable: data,
options: classicChartOptions
});
function onFirstReadyChartWrapper() {
var chart = wrapper.getChart();
//console.log(chart);
var chartSerialized = chart.getImageURI();
//console.log(chartSerialized);
document.getElementById('save_png').outerHTML = '<a href="' + chartSerialized + '">Download .png</a><span> ("Save Link As")</span>';
};
$.ajax({
type: "GET",
url: csvUrl,
dataType: "text",
cached: true,
success: function(csvString) {
// console.log(csvString);
// transform the CSV string into array of objects
var objectData = $.csv.toObjects(csvString, {onParseValue: $.csv.hooks.castToScalar});
// console.log(objectData)
$.each(objectData, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp_c),
]);
});
// delete the first two dummy rows
data.removeRows(0,2);
console.log(data);
google.visualization.events.addOneTimeListener(wrapper, 'ready', onFirstReadyChartWrapper);
// "redraw" with our fetched data (the DataTable has been updated)
wrapper.draw();
}});
wrapper.draw();
};
return aDrawChart;
}
</script>
<script>
var drawThisChart = creata_drawChart('?gt[timestamp]=now%20-91%20days&sample=50', 'chart-quarterly');
google.charts.setOnLoadCallback(drawThisChart);
</script>
<div id="chart-quarterly" style="width: 100%;"></div>
<div id="save_png"></div>
<!-- Local Variables: -->
<!-- time-stamp-pattern: "8/^last_modified_at: %:y-%02m-%02dT%02H:%02M:%02SZ$" -->
<!-- time-stamp-time-zone: "UTC" -->
<!-- End: -->David Crook