After weeks of effort, I now have the kind of charting capability I have wanted for years to show critical home temperature values over time. One of these charts is shown below...
In an effort to "Pay it Forward" and help others, I have attached a complete HTML/javaScript ("chartTemps.html") web page. The kind of example I sought, but never found.
The attached file contents are also displayed below for quick reference.
The code is highly documented, in the hopes it will give you enough insight to explore further on your own, in order to meet your specific needs.
Enjoy, and thanks again to all those that helped me...
<html>
<head>
<style type="text/css">
<!--
.padding {padding-left: 40px;}
-->
</style>
<script src="https://www.google.com/
<script src="http://code.jquery.com/
<script src="http://jquery-csv.
<title>Environmental Temperatures</title>
<script>
// This is a general purpose Chart Handler, using the Google Charts API.
// It was designed to chart 5 temperature sensors, differentiating between current and old data values, which were written to a CVS file.
// The file has a header (for chart labeling use) and 5 sets of dual (left/right pair) columns. Each column pair holds the new/old values for a sensor.
// Using SQL to hold and manage the temperature readings, at the beginning of each chart period (ie, x-axis value 0) all the values in the left
// (new) column are moved to the right (old) column. The new column chart lines are displayed as solid, while the old are shown as dashed.
// This clearly differentiates the current vs the historic values, while allowing a contiguous chart line.
// These vars are used for labeling the three charts produced by this code. A Day, Week, and Month chart.
var d = new Date();
var days = ['Sunday','Monday','Tuesday','
var months = ['January','February','March',
var day = days[d.getDay()];
var month = months[d.getMonth()];
// Load the Visualization API from Google and set Listener
google.load("visualization", "1.1", {packages:["corechart"]});
//google.setOnLoadCallback(
// These calls (onLoad) call the three charts made with the 'drawChart' function, which has multiple parameters passed to it.
// The parameters cover the CSV file name; the vertical axis range and tick marking, the horizontal axis range and ticks;
// and finally the name of the division id used to place the chart in the body of the html page.
google.setOnLoadCallback(funct
{
// parms--> ("fileName",cPeriod,vStrt,
drawChart("tempsDay.csv",day,
drawChart("tempsWeek.csv","
drawChart("tempsMonth.csv",mo
});
function drawChart(fileName,cPeriod,vSt
// grab the CSV data and ready it for charting
$.get(fileName, function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue:$.csv.hooks.castToScalar});
//alert (arrayData[0]+ '\n' + arrayData[1]); //debug code to verify array contents
//alert(arrayData.join('\n'))
// This new DataTable object holds all the data in Charting format
var data = google.visualization.arrayToDa
// The "data" view does not handle the case where a column may be totally blank (A sensor fails?).
// So creating a DataView isolates that problem.
var view = new google.visualization.DataView(
// The DataView allows us to force the column definitions to be numeric, so nulls don't cause a problem.
// Since we created a new view. we have to also import the CSV column labels.
view.setColumns([
{sourceColumn: 0, type: "number", label: data.getColumnLabel(0)},
// If imported labels are not used, then the "data.getColumnLabel()" parameter can be replaced with a label name (eg, "Outside Temp")
{sourceColumn: 1, type: "number", label: data.getColumnLabel(1)},
{sourceColumn: 2, type: "number"},
{sourceColumn: 3, type: "number", label: data.getColumnLabel(3)},
{sourceColumn: 4, type: "number"},
{sourceColumn: 5, type: "number", label: data.getColumnLabel(5)},
{sourceColumn: 6, type: "number"},
{sourceColumn: 7, type: "number", label: data.getColumnLabel(7)},
{sourceColumn: 8, type: "number"},
{sourceColumn: 9, type: "number", label: data.getColumnLabel(9)},
{sourceColumn: 10, type: "number"},
]);
var vStart = vStrt;
var vTicks = [];
while (vStart <= vEnd) {
vTicks.push(vStart);
vStart+=vStep;
}
var hStart = hStrt;
var hTicks = [];
while (hStart <= hEnd) {
hTicks.push(hStart);
hStart+=hStep;
}
var vAxisString= String.fromCharCode(176)+"F";
var options = {
fontSize: 8,
legend: 'true',
legend: {position: 'top'},
chartArea: {left: 40, top: 40, height: 270, width: 575},
height: 340, //This is the Total chart height size including the chartArea.height so make it = chartArea+70.
width: 625, //Total chart width size including the chartArea.width so so make it = chartArea+50.
title: cPeriod, //day is computed from days[d.getDay()] in var definition above.
titlePosition: 'in',
titleTextStyle: {
color: '#70500B', //Make Label brown in color
fontSize: 14
},
/*
The Chart is formed from multiple temperature data streams (2 for each device sensed). Each data pair
consists of a time sequence starting from 00:00 hours to the current time. This "current" temp data, is
placed in the left CSV column associated with each device (see CSV column definitions below). This data is
represented on the chart by a solid colored line.
The "historic" data (that data after the current time and from the previous measuring period [ie, yesterday for the DAY
chart]) is placed in the right CSV device data column and starts from the next time slot after the current time and
runs until the end of the chart time period (ie, 24:00 hours for the DAY chart). This data is charted as a dashed line
(but can be changed in width and dash style using the "series" option parameters.
CSV table columns are > Time,Dwn,Dwn.old,Mid,Mid.old,
*/
series: {
// n: {color: '#1DC70E',lineWidth:4,
0: { color: '#E30805' }, //Dwn
1: { color: '#E30805',lineWidth:2,lineDash
2: { color: '#F78F07' }, //Mid
3: { color: '#F78F07',lineWidth:2,lineDash
4: { color: '#1DC70E' }, //Out
5: { color: '#1DC70E',lineWidth:2,lineDash
6: { color: '#0A5EFA' }, //Frez
7: { color: '#0A5EFA',lineWidth:2,lineDash
8: { color: '#44B8F2' }, //Frig
9: { color: '#44B8F2',lineWidth:2,lineDash
},
hAxis: {
titleTextStyle: {fontSize: 14},
gridlines: {count: hMaj},
minorGridlines: {count: hMnr},
ticks: hTicks
},
vAxis: {
title: vAxisString,
titleTextStyle: {fontSize: 14},
gridlines: {count: vMaj},
minorGridlines: {count: vMnr},
ticks: vTicks
}
};
// Other Chart Visualizations can be readily substituted for the LineChart visualization. Column or Area are almost interchangeable with the Line Charts.
// See the Google documentation at ... https://developers.google.com/
var chart = new google.visualization.LineChart
chart.draw(view,options);
});
} </script>
</head>
<body>
<!-- The Google DAY Chart is drawn below plus my old "LogTemp" App charts (WEEK/MONTH) which I haven't converted yet. -->
<div id="dayChart" style="width: 625px; height: 340px;"></div>
<div id="weekChart" style="width: 625px; height: 340px;"></div>
<div id="monthChart" style="width: 625px; height: 340px;"></div>
</body>
</html>chartTemps.html
댓글 없음:
댓글 쓰기