Below are some of the html5 web pages I use with BBB, Arduino and W10 programs that extract running data from Classic controller(s). Not too useful on their own but will make sense when the BBB programs and W10 data extractor are posted later.
dgd
<!DOCTYPE html>
<! Web page using Highcharts mixed bar/spline zoom chart to display running data from MNidnite Classic controller
Data is from an XML file created by BBB program clogger that extracts modbus register values from Classic via enet or rs232
Also runs from W10 clreg.exe that makes XML file with PC wired to Classic USB port reading register dump
>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
var controller;
var gdate = [];
var volts = [];
var amps = [];
var ahrm = [];
var involts = [];
var watts = [];
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: controller
},
xAxis: [{
categories: gdate,
// crosshair: true,
title: {
text: 'Time'
}
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} A',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Amps',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Energy KwHrs',
style: {
color: Highcharts.getOptions().colors[0]
},
},
labels: {
format: '{value} kwh',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Volts',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} V',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, { // 4th yAxis
gridLineWidth: 0,
title: {
text: 'Watts',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} W',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFD0'
},
series: [{
name: 'KwHrs',
type: 'column',
color: '#ffde34',
yAxis: 1,
data: ahrm,
tooltip: {
valueSuffix: ' kwhr'
}
}, {
name: 'Input Volts',
type: 'spline',
yAxis: 2,
data: involts,
color: 'blue',
marker: {
enabled: false
},
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Batt Volts',
type: 'spline',
yAxis: 2,
data: volts,
color: 'black',
marker: {
enabled: false
},
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Watts',
type: 'spline',
yAxis: 3,
data: watts,
color: 'red',
marker: {
enabled: false
},
tooltip: {
valueSuffix: ' W'
}
}, {
name: 'Amps Out',
type: 'spline',
data: amps,
marker: {
enabled: false
},
tooltip: {
valueSuffix: ' A'
},
zones: [{
value: 0,
color: '#f7a35c'
}, {
color: '#90ed7d'
}]
}]
});
});
</script>
</head>
<body>
<title>MN Classic Graph</title>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","CLlog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("CLdata");
var clname = (x[0].getElementsByTagName("clname")[0].childNodes[0].nodeValue);
var clmodel = (x[0].getElementsByTagName("clmodel")[0].childNodes[0].nodeValue);
var clserno = (x[0].getElementsByTagName("clserno")[0].childNodes[0].nodeValue);
controller = ["Midnite Classic "+clmodel+' #'+clserno+""];
// scan through XML data records, starting at 1st, for hour and minute, high and low battery voltages, 0th record
// has Classic ID info so ignore it
// put data into arrays gdate[], volts[], amps[] and kwhr[] and pass to Hgraph
// Note XML data comes in reverse order (latest first to oldest last) as needed by Hgraph
// hence array stored in reverse to XML reading order
for (var i=1;i<x.length;i++) // data starts at 1 as 0'th record is ID info
{
var hrs = (x[i].getElementsByTagName("HRS")[0].childNodes[0].nodeValue);
var mins = (x[i].getElementsByTagName("MINS")[0].childNodes[0].nodeValue);
if ( x[i].getElementsByTagName("MINS")[0].childNodes[0].nodeValue.length == 1)
gdate[(x.length-i)-1] = [hrs+':0'+mins];
else
gdate[(x.length-i)-1] = [hrs+':'+mins];
var cv = (x[i].getElementsByTagName("INV")[0].childNodes[0].nodeValue);
involts[(x.length-i)-1] = [parseFloat(cv)];
var bv = (x[i].getElementsByTagName("BATTV")[0].childNodes[0].nodeValue);
volts[(x.length-i)-1] = [parseFloat(bv)];
var oa = (x[i].getElementsByTagName("OUTA")[0].childNodes[0].nodeValue);
amps[(x.length-i)-1] = [parseFloat(oa)];
var kwh = (x[i].getElementsByTagName("KWH")[0].childNodes[0].nodeValue);
ahrm[(x.length-i)-1] = [parseFloat(kwh)];
var cw = (x[i].getElementsByTagName("WATTS")[0].childNodes[0].nodeValue);
watts[(x.length-i)-1] = [parseInt(cw)];
// lots more XML file register values available but above will do for now
} //for loop
</script>
<! now draw the HighChart >
<div id="container" style="height: 600px; min-width: 600px; border: 2px solid black" ></div>
</body>
</html>
great - can't wait for those other parts of the program
Larry
Highchart produced by above html5/js script
A Classic with 750w pv on clouded over day mid winter in NZ, hence miserable figures...
Second has Input volts turned off so battery volt scale looks better
No WBjr on this Classic
dgd
Highchart examples with Classic+WBjr.
When the graph is displayed by a web server the zoom XY feature allows a highlighted section of the graph to be enlarged. The zoom reset returns to full graph. The top left 'display items' control box still allows data items to be excluded/included.
Although these examples use a ten minute log file for data (provided by BBB in XML format or via a CSV->XML converter program for MM data), the display of a 1 minute or smaller interval file really shows the zoom feature's usefulness
dgd