Alors ma problématique générale c'est comment créer des beaux graphiques sur Jeedom, en particulier sur les Designs. Les graphiques basiques de Jeedom n'étant pas assez exploitables pour mon utilisation.
J'annonce d'emblée que je ne suis pas trop à l'aise avec le HTML (j'ai créé un site simple y a quelques années mais ça s'arrête là), ni le CSS, ni le JavaScript. Je ne code qu'en Java pur en général donc excusez moi pour mon ignorance.
J'ai fais des recherches afin de déterminer les différentes possibilités et je suis tombé sur un sujet du forum (viewtopic.php?t=31768), j'ai donc ajouté dans mon Design un texte/HTML et j'ai copié le code ci-dessous :
Code : Tout sélectionner
<!--
https://www.highcharts.com/demo/combo-dual-axes
https://www.highcharts.com/
-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
var A1 = 43;
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
</script>- Capture.PNG (45.61 Kio) Consulté 1718 fois
Mais je ne sais comment intégrer mes données de mes commandes (virtuelles) dans ce graphique à la place des valeurs des températures.
J'ai cherché un tuto général comment intégrer des Highcharts sur Jeedom mais je n'ai pas trouvé donc si vous pouvez m'aider.
Le graphique ci-dessus est qu'un exemple donc j'aimerais bien avoir un peu la démarche pour intégrer les Highcharts, ça me permettra de comprendre et de pouvoir réitérer la manipulation pour d'autres graphiques. Je ne veux donc pas juste de solution toute faite
Merci d'avance pour vos réponses
