probablement.. en récupérant et en adaptant la fonction qui crée le graph mais javascript c'est pas mon truc..
si quelqu'un veux s'y essayer, c'est vrai qu'avoir dans une popup la courbe des dernières 24h serait sympatoche
Code : Tout sélectionner
function ShowTempLog(contentdiv,backfunction,id,name)
{
clearInterval($.myglobals.refreshTimer);
$('#modal').show();
$.content=contentdiv;
$.backfunction=backfunction;
$.devIdx=id;
$.devName=name;
var htmlcontent = '';
htmlcontent='<p><center><h2>' + decodeURIComponent(name) + '</h2></center></p>\n';
htmlcontent+=$('#daymonthyearlog').html();
$($.content).html(GetBackbuttonHTMLTable(backfunction)+htmlcontent);
$($.content).i18n();
var tempstr="Celsius";
if ($.myglobals.tempsign=="F") {
tempstr="Fahrenheit";
}
$.DayChart = $($.content + ' #daygraph');
$.DayChart.highcharts({
chart: {
type: 'line',
zoomType: 'x',
alignTicks: false,
events: {
load: function() {
this.showLoading();
$.getJSON("json.htm?type=graph&sensor=temp&idx="+id+"&range=day",
function(data) {
if (typeof data.result != 'undefined') {
AddDataToTempChart(data,$.DayChart.highcharts(),1);
}
});
this.hideLoading();
}
}
},
loading: {
hideDuration: 1000,
showDuration: 1000
},
credits: {
enabled: true,
href: "http://www.domoticz.com",
text: "Domoticz.com"
},
title: {
text: $.t('Temperature') + ' ' + Get5MinuteHistoryDaysGraphTitle()
},
xAxis: {
type: 'datetime'
},
yAxis: [{ //temp label
labels: {
formatter: function() {
return this.value +'\u00B0 ' + $.myglobals.tempsign;
},
style: {
color: '#CCCC00'
}
},
title: {
text: 'degrees ' + tempstr,
style: {
color: '#CCCC00'
}
}
}, { //humidity label
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: 'limegreen'
}
},
title: {
text: $.t('Humidity') +' %',
style: {
color: '#00CC00'
}
},
opposite: true
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
enabled: true
},
plotOptions: {
series: {
point: {
events: {
click: function(event) {
chartPointClickNew(event,true,ShowTempLog);
}
}
}
},
line: {
lineWidth: 3,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
}
});
$.MonthChart = $($.content + ' #monthgraph');
$.MonthChart.highcharts({
chart: {
type: 'spline',
zoomType: 'x',
alignTicks: false,
events: {
load: function() {
this.showLoading();
$.getJSON("json.htm?type=graph&sensor=temp&idx="+id+"&range=month",
function(data) {
if (typeof data.result != 'undefined') {
AddDataToTempChart(data,$.MonthChart.highcharts(),0);
}
});
this.hideLoading();
}
}
},
loading: {
hideDuration: 1000,
showDuration: 1000
},
credits: {
enabled: true,
href: "http://www.domoticz.com",
text: "Domoticz.com"
},
title: {
text: $.t('Temperature') + ' ' + $.t('Last Month')
},
xAxis: {
type: 'datetime'
},
yAxis: [{ //temp label
labels: {
format: '{value}\u00B0 ' + $.myglobals.tempsign,
style: {
color: '#CCCC00'
}
},
title: {
text: 'degrees ' + tempstr,
style: {
color: '#CCCC00'
}
}
}, { //humidity label
labels: {
format: '{value}%',
style: {
color: 'limegreen'
}
},
title: {
text: $.t('Humidity')+' %',
style: {
color: '#00CC00'
}
},
opposite: true
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
enabled: true
},
plotOptions: {
series: {
point: {
events: {
click: function(event) {
chartPointClickNew(event,false,ShowTempLog);
}
}
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
}
});
$.YearChart = $($.content + ' #yeargraph');
$.YearChart.highcharts({
chart: {
type: 'spline',
zoomType: 'x',
alignTicks: false,
events: {
load: function() {
this.showLoading();
$.getJSON("json.htm?type=graph&sensor=temp&idx="+id+"&range=year",
function(data) {
if (typeof data.result != 'undefined') {
AddDataToTempChart(data,$.YearChart.highcharts(),0);
}
});
this.hideLoading();
}
}
},
loading: {
hideDuration: 1000,
showDuration: 1000
},
credits: {
enabled: true,
href: "http://www.domoticz.com",
text: "Domoticz.com"
},
title: {
text: $.t('Temperature') + ' ' + $.t('Last Year')
},
xAxis: {
type: 'datetime'
},
yAxis: [{ //temp label
labels: {
format: '{value}\u00B0 ' + $.myglobals.tempsign,
style: {
color: '#CCCC00'
}
},
title: {
text: 'degrees ' + tempstr,
style: {
color: '#CCCC00'
}
}
}, { //humidity label
labels: {
format: '{value}%',
style: {
color: 'limegreen'
}
},
title: {
text: $.t('Humidity')+' %',
style: {
color: '#00CC00'
}
},
opposite: true
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
enabled: true
},
plotOptions: {
series: {
point: {
events: {
click: function(event) {
chartPointClickNew(event,false,ShowTempLog);
}
}
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
}
});
$('#modal').hide();
cursordefault();
return true;
}