75 lines
2.2 KiB
Cheetah
Executable file
75 lines
2.2 KiB
Cheetah
Executable file
<h1 class="page-header">Overview</h1>
|
|
|
|
<div class="row placeholders">
|
|
<H1>Last 24 hours (kWh/5min)</H1>
|
|
<div id="minute-power-chart" style="height:450px;"></div>
|
|
</div>
|
|
<div class="row placeholders">
|
|
<H1>Last Week (kWh/h)</H1>
|
|
<div id="hour-power-chart" style="height:450px;"></div>
|
|
</div>
|
|
<div class="row placeholders">
|
|
<H1>All History (kWh/day)</H1>
|
|
<div id="day-power-chart" style="height:450px;"></div>
|
|
</div>
|
|
<div class="row placeholders">
|
|
<H1>All History (kWh/week)</H1>
|
|
<div id="week-power-chart" style="height:450px;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
$(function(){
|
|
initChart("#minute-power-chart", "?json&data=minute", 5*60*1000);
|
|
initChart("#hour-power-chart", "?json&data=hour", 60*60*1000);
|
|
initChart("#day-power-chart", "?json&data=day", -1);
|
|
initChart("#week-power-chart", "?json&data=week", -1);
|
|
|
|
});
|
|
|
|
function initChart(elementId, url, time){
|
|
$.getJSON(url, function(json){
|
|
var dataXs = {};
|
|
var data = [];
|
|
var labels = [];
|
|
json.forEach(function(d, i) {
|
|
var index = 'data'+i;
|
|
labels[index] = d.name;
|
|
dataXs[index] = 'data'+i+'x';
|
|
data.push([index+'x'].concat(d.timestamps));
|
|
data.push([index].concat(d.data));
|
|
});
|
|
|
|
var chart = c3.generate({
|
|
bindto: elementId,
|
|
data: {
|
|
xs: dataXs,
|
|
columns: data,
|
|
names: labels,
|
|
type: 'spline',
|
|
xFormat: null,
|
|
},
|
|
axis : {
|
|
x : {
|
|
type : 'timeseries',
|
|
label: 'Timestamp'
|
|
},
|
|
y: {
|
|
label: 'Power'
|
|
},
|
|
y2: {
|
|
show: true,
|
|
label: 'Temperature'
|
|
}
|
|
},
|
|
grid: {
|
|
y: {show: true}
|
|
},
|
|
point: {
|
|
show: false
|
|
}
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
|