I am controlling (with an arduino based esp8288) my solar heater by
measuring the temperature of the glycol/water in the panel and the water in
the boiler. When the panel temperature is above the boiler temperature the
pump is running.
I currently generate a csv file (temp.csv) which is used to generate a
simple graph via Google Charts. (see attached temperatureGraph.js) I would
like to add however the second graph.
The csv file looks like this and every 20 secons a line is added
1615141524,25.57
1615141544,26.21
1615141564,26.71
1615141584,27.13
I am able to add the second temperature to the csv file
1615141524,25.57,28.34
I tried add the 2nd temperature to data[2] :
function parseCSV(string) {
var array = [];
var lines = string.split("\n");
for (var i = 0; i < lines.length; i++) {
var data = lines[i].split(",", 2);
data[0] = new Date(parseInt(data[0]) * 1000);
data[1] = parseFloat(data[1]);
data[2] = parseFloat(data[2]);
array.push(data);
}
return array;
}
and it to the drawChart() :
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'UNIX');
data.addColumn('number', 'Temperature 1');
data.addColumn('number', 'Temperature 2');
But it does not show-up. It is probably very simple.....but I do not see
it.
Regards,
Eddy
------------------------
var dataArray = [];
var defaultZoomTime = 24*60*60*1000; // 1 day
var minZoom = -6; // 22 minutes 30 seconds
var maxZoom = 8; // ~ 8.4 months
var zoomLevel = 0;
var viewportEndTime = new Date();
var viewportStartTime = new Date();
loadCSV(); // Download the CSV data, load Google Charts, parse the data,
and draw the chart
/*
Structure:
loadCSV
callback:
parseCSV
load Google Charts (anonymous)
callback:
updateViewport
displayDate
drawChart
*/
/*
| CHART |
| VIEW PORT |
invisible | visible |
invisible
---------------|---------------------------------------------|--------------->
time
viewportStartTime viewportEndTime
|______________viewportWidthTime______________|
viewportWidthTime = 1 day * 2^zoomLevel = viewportEndTime -
viewportStartTime
*/
function loadCSV() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
dataArray = parseCSV(this.responseText);
google.charts.load('current', { 'packages': ['line',
'corechart'] });
google.charts.setOnLoadCallback(updateViewport);
}
};
xmlhttp.open("GET", "temp.csv", true);
xmlhttp.send();
var loadingdiv = document.getElementById("loading");
loadingdiv.style.visibility = "visible";
}
function parseCSV(string) {
var array = [];
var lines = string.split("\n");
for (var i = 0; i < lines.length; i++) {
var data = lines[i].split(",", 2);
data[0] = new Date(parseInt(data[0]) * 1000);
data[1] = parseFloat(data[1]);
array.push(data);
}
return array;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'UNIX');
data.addColumn('number', 'Temperature');
data.addRows(dataArray);
var options = {
curveType: 'function',
height: 360,
legend: { position: 'none' },
hAxis: {
viewWindow: {
min: viewportStartTime,
max: viewportEndTime
},
gridlines: {
count: -1,
units: {
days: { format: ['MMM dd'] },
hours: { format: ['HH:mm', 'ha'] },
}
},
minorGridlines: {
units: {
hours: { format: ['hh:mm:ss a', 'ha'] },
minutes: { format: ['HH:mm a Z', ':mm'] }
}
}
},
vAxis: {
title: "Temperature (Celsius)"
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var dateselectdiv = document.getElementById("dateselect");
dateselectdiv.style.visibility = "visible";
var loadingdiv = document.getElementById("loading");
loadingdiv.style.visibility = "hidden";
}
function displayDate() { // Display the start and end date on the page
var dateDiv = document.getElementById("date");
var endDay = viewportEndTime.getDate();
var endMonth = viewportEndTime.getMonth();
var startDay = viewportStartTime.getDate();
var startMonth = viewportStartTime.getMonth()
if (endDay == startDay && endMonth == startMonth) {
dateDiv.textContent = (endDay).toString() + "/" + (endMonth +
1).toString();
} else {
dateDiv.textContent = (startDay).toString() + "/" + (startMonth +
1).toString() + " - " + (endDay).toString() + "/" + (endMonth +
1).toString();
}
}
document.getElementById("prev").onclick = function() {
viewportEndTime = new Date(viewportEndTime.getTime() -
getViewportWidthTime()/3); // move the viewport to the left for one third
of its width (e.g. if the viewport width is 3 days, move one day back in
time)
updateViewport();
}
document.getElementById("next").onclick = function() {
viewportEndTime = new Date(viewportEndTime.getTime() +
getViewportWidthTime()/3); // move the viewport to the right for one third
of its width (e.g. if the viewport width is 3 days, move one day into the
future)
updateViewport();
}
document.getElementById("zoomout").onclick = function() {
zoomLevel += 1; // increment the zoom level (zoom out)
if(zoomLevel > maxZoom) zoomLevel = maxZoom;
else updateViewport();
}
document.getElementById("zoomin").onclick = function() {
zoomLevel -= 1; // decrement the zoom level (zoom in)
if(zoomLevel < minZoom) zoomLevel = minZoom;
else updateViewport();
}
document.getElementById("reset").onclick = function() {
viewportEndTime = new Date(); // the end time of the viewport is the
current time
zoomLevel = 0; // reset the zoom level to the default (one day)
updateViewport();
}
document.getElementById("refresh").onclick = function() {
viewportEndTime = new Date(); // the end time of the viewport is the
current time
loadCSV(); // download the latest data and re-draw the chart
}
document.body.onresize = drawChart;
function updateViewport() {
viewportStartTime = new Date(viewportEndTime.getTime() -
getViewportWidthTime());
displayDate();
drawChart();
}
function getViewportWidthTime() {
return defaultZoomTime*(2**zoomLevel); // exponential relation between
zoom level and zoom time span
// every time you zoom, you
double or halve the time scale
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/4a327bfe-54e5-469b-8afa-fda6b2a130c8n%40googlegroups.com.
