some changes to charts
This commit is contained in:
parent
0fac8b29f8
commit
d90bc0f59f
1 changed files with 42 additions and 37 deletions
|
|
@ -22,51 +22,55 @@
|
||||||
$(function(){
|
$(function(){
|
||||||
initChart("#minute-power-chart", "?json&data=minute", 5*60*1000);
|
initChart("#minute-power-chart", "?json&data=minute", 5*60*1000);
|
||||||
initChart("#hour-power-chart", "?json&data=hour", 60*60*1000);
|
initChart("#hour-power-chart", "?json&data=hour", 60*60*1000);
|
||||||
initChart("#day-power-chart", "?json&data=day", -1);
|
initChart("#day-power-chart", "?json&data=day", 24*60*60*1000);
|
||||||
initChart("#week-power-chart", "?json&data=week", -1);
|
initChart("#week-power-chart", "?json&data=week", 7*24*60*60*1000);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function initChart(elementId, url, time){
|
function initChart(elementId, url, updateTime){
|
||||||
$.getJSON(url, function(json){
|
var tickConf = {count: 20};
|
||||||
var chart = c3.generate({
|
if (updateTime < 60*60*1000)
|
||||||
bindto: elementId,
|
tickConf['format'] = '%H:%M';
|
||||||
data: getChartData(json),
|
else if (updateTime < 24*60*60*1000)
|
||||||
axis : {
|
tickConf['format'] = '%Y-%m-%d %H:%M';
|
||||||
x : {
|
else
|
||||||
type : 'timeseries',
|
tickConf['format'] = '%Y-%m-%d';
|
||||||
label: 'Timestamp',
|
|
||||||
tick: {
|
|
||||||
format: '%Y-%m-%d %H:%M'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
label: 'Power (kWh)',
|
|
||||||
min: 0,
|
|
||||||
},
|
|
||||||
y2: {
|
|
||||||
show: true,
|
|
||||||
label: 'Temperature (C)',
|
|
||||||
min: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
y: {show: true}
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if(time > 0)
|
|
||||||
setTimeout(function(){ updateChart(chart, url, time); }, time);
|
var chart = c3.generate({
|
||||||
|
bindto: elementId,
|
||||||
|
data: {json: []}, // set empty data, data will be loaded later
|
||||||
|
axis : {
|
||||||
|
x : {
|
||||||
|
type : 'timeseries',
|
||||||
|
label: 'Timestamp',
|
||||||
|
tick: tickConf,
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
label: 'Power (kWh)',
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
y2: {
|
||||||
|
show: true,
|
||||||
|
label: 'Temperature (C)',
|
||||||
|
min: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
y: {show: true}
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updateChart(chart, url, updateTime);;
|
||||||
}
|
}
|
||||||
function updateChart(chart, url, time){
|
function updateChart(chart, url, updateTime){
|
||||||
$.getJSON(url, function(json){
|
$.getJSON(url, function(json){
|
||||||
chart.flow(getChartData(json));
|
chart.load(getChartData(json));
|
||||||
});
|
});
|
||||||
setTimeout(function(){ updateChart(chart, url, time); }, time);
|
setTimeout(function(){ updateChart(chart, url, updateTime); }, updateTime);
|
||||||
}
|
}
|
||||||
function getChartData(json){
|
function getChartData(json){
|
||||||
var dataXaxis = {};
|
var dataXaxis = {};
|
||||||
|
|
@ -79,6 +83,7 @@
|
||||||
dataXaxis[index] = 'data'+i+'x';
|
dataXaxis[index] = 'data'+i+'x';
|
||||||
data.push([index+'x'].concat(sensor.timestamps));
|
data.push([index+'x'].concat(sensor.timestamps));
|
||||||
data.push([index].concat(sensor.data));
|
data.push([index].concat(sensor.data));
|
||||||
|
|
||||||
if (sensor.type == "PowerConsumptionSensorData")
|
if (sensor.type == "PowerConsumptionSensorData")
|
||||||
dataYaxis[index] = 'y';
|
dataYaxis[index] = 'y';
|
||||||
else //if (sensor.type == "TemperatureSensorData")
|
else //if (sensor.type == "TemperatureSensorData")
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue