some changes to charts

This commit is contained in:
Ziver Koc 2016-11-10 17:03:31 +01:00
parent 0fac8b29f8
commit d90bc0f59f

View file

@ -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")