Bon… me voici de retour ici…
Bien… donc… je reviens sur mon idée saugrenue de faire des graphiques groupés ET empilés. Et je me dis que je vais donc utiliser finalement la méthode de @Kokyro décrite ici fondée sur plugin-htmldisplay
Je copie-colle donc dans un html display le code qui m’intéresse - simplement la version de démo - sans même encore essayer de lier l’exemple aux données de mes équipements:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="“UTF-8”" />
</head>
<body>
<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>
<script src="https://code.highcharts.com/themes/adaptive.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 var(--highcharts-neutral-color-10, #e6e6e6);
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: var(--highcharts-neutral-color-60, #666);
}
.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 tbody tr:nth-child(even) {
background: var(--highcharts-neutral-color-3, #f7f7f7);
}
.highcharts-description {
margin: 0.3rem 10px;
}
</style>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
<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>
</p>
</figure>
</body>
</html>
J’active le plugin et place ce display sur le dashboard, il s’affiche brièvement et puis…
J’ai un message (que je ne lis pas très bien parce que la 'roue" jeedom continue de tourner indéfiniment et les textes restent floutés):
**impossible de charger la ressource "https://code.highcharts.com/highcharts.js" car elle va contre la directive de Content Security Policy "script-src-elem 'self' 'unsafe-inline' 'unsaf-eval' https://*.google.com https://*.google.fr**
Alors, on trouve des tas de cas similaires, ici ,ici ou là et on comprend que c’est lié à une politique de sécurité du moteur Apache qui interdit de charger des ressources extérieures.
Je me disais naïvement qu’on devait pouvoir indiquer des exceptions via l’onglet sécurité du panneau de configuration mais ce n’est pas le cas semble-t-il.
Le conseil principal qu’on lit est de ne rien faire et d’abandonner ! super …
Qu’en pensez-vous ? Ou alors dois-je importer en local les js qui fâchent ? Et les mettre où ?
Merci à tous.
si cela s’avère nécessaire !