Bon… je progresse mais très lentement en raison de ma méconnaissance de jeedom.
1. Première étape:
Suite au bug signalé par Loïc sur la création de widget code, je l’ai créé à la main et j’y est collé le code Highcharts (html + css + javascript). A ce stade, cela revient à coller le fichier exemple avec des données statiques
Le code:
<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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
.highcharts-description {
margin: 0.3rem 10px;
}
</style>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing stacked columns with grouping, allowing specific series to
be stacked on the same column. Stacking is often used to visualize
data that accumulates to a sum.
</p>
</figure>
<script>
// Data retrieved from https://en.wikipedia.org/wiki/Winter_Olympic_Games
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Olympic Games all-time medal table, grouped by continent',
align: 'left'
},
xAxis: {
categories: ['Gold', 'Silver', 'Bronze']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Count medals'
}
},
tooltip: {
format: '<b>{key}</b><br/>{series.name}: {y}<br/>' +
'Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Norway',
data: [148, 133, 124],
stack: 'Europe'
}, {
name: 'Germany',
data: [102, 98, 65],
stack: 'Europe'
}, {
name: 'United States',
data: [113, 122, 95],
stack: 'North America'
}, {
name: 'Canada',
data: [77, 72, 80],
stack: 'North America'
}]
});
</script>
2. je me doute bien que je vais devoir remplacer ces données statiques par celles issues en dynamique de commandes Jeedom
ChatGPT qui est mon ami (parce que pour trouver l’info autrement… bonjour) m’indique que la syntaxe va être quelque chose de ce genre (modulo des concaténations et tripatouillages divers et variés pour se conformer à la structure qu’attend Highcharts):
var data = jeedom.cmd.get({id: "ton_id_de_commande"});
Highcharts.chart('container', {
series: [{
name: 'Données dynamiques',
data: data // insérer les données récupérées
}]
});
3. en ensuite ?
je ne sais pas trop parce que le widget code créé à la main n’apparaît pas dans la liste de mes widgets. En revanche, il apparaît dans la liste des possibles remplacements ce qui m’effraie: DanielJ explique en effet que cet outil de remplacement est irréversible (j’aurais envie d’écrire irrémédiable) et comme je suis tout sauf sûr de moi… j’hésite.
Deux questions ouvertes pour moi:
- Suis-je sur la bonne piste ?
- Y a-t-il moyen de tester tout cela dans une sandbox sans tout casser ?
ps: j’ai bien vu le plugin script mais ça me paraît encore plus scabreux.
sur la page de l’exemple fourni plus haut.