> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/chart-widget.md).
# Widget graphique
Tracez l’historique d’un capteur sous forme de widget graphique en courbe ou en barres — valeur actuelle, tendance, ligne moyenne et bandes de seuil.
Le widget Graphique représente l'historique d'une mesure sous forme de graphe — une courbe ou des barres sur la dernière heure, le dernier jour, la dernière semaine ou le dernier mois — afin que vous voyiez non seulement où se situe une valeur maintenant, mais aussi la tendance qui l'y a menée.
Un seul widget Graphique combine quatre éléments en un seul endroit : la **valeur actuelle** sous la forme d'une grande valeur en haut, le **graphe historique** — une courbe ou des barres sur une période choisie — une **ligne de moyenne** sur cette période, et des **bandes de seuil** qui marquent directement sur le graphe les plages conformes, d'avertissement et de dépassement. Un opérateur voit la mesure du moment, le chemin parcouru pour y arriver et le contexte opérationnel, sans changer de vue.
Les bandes de seuil colorent aussi la **grande valeur actuelle** en haut — lorsque la valeur en direct tombe dans une bande, ce nombre principal prend la couleur de la bande, tandis que la courbe ou les barres conservent la couleur de la métrique définie dans l'onglet Source de données. Le widget signale donc l'état avant même que quiconque n'examine la trace.
Un widget Graphique suit une seule métrique. Pour comparer plusieurs mesures, ajoutez un widget Graphique distinct pour chacune.
## Ligne et Barres sont des types de graphique
Le sélecteur du tableau de bord contient un **Graphique** widget. Dans son **Apparence** onglet, **Type de widget** propose deux présentations :
* [Graphique linéaire](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — relie les mesures en une tendance continue.
* [Graphique en barres](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — trace une barre distincte pour chaque rapport.
Elles partagent la même source de données, la même période, la même plage de valeurs, les mêmes seuils, la même moyenne, les mêmes axes, la même légende et les **Afficher les métriques en dessous** paramètres. **Afficher la valeur sur la barre** n'appartient qu'à Barres et est masqué lorsque Ligne est sélectionné.
## Configurer un widget Graphique
Voici une configuration complète pour un cas réel — suivre la température d'une chambre froide sur la semaine, afin de voir non seulement la mesure actuelle, mais aussi si elle est restée conforme tout du long. Un capteur de température sur l'unité remonte en °C. Voici un exemple : un Graphique convient à toute mesure dont l'historique compte — seuls l'appareil et les chiffres changent.
1. Ouvrez le tableau de bord en mode édition et cliquez sur **Graphique** dans le sélecteur de widgets. Le panneau de configuration s'ouvre sur l' **Source de données** onglet, sans encore aucune source de données.
2. Cliquez sur **Ajouter une source de données**. Un **Source de données 1** bloc apparaît.
3. Dans le bloc, cliquez sur **Choisir un appareil** et sélectionnez le capteur de température de l'unité de réfrigération.
4. Cliquez sur **Ajouter une métrique**. Une ligne de métrique apparaît.
5. Dans la ligne, définissez **Type de données** dans **Télémétrie**, choisissez la mesure de température sous **Métrique de l'appareil**, et choisissez une **Couleur** — cette couleur trace la courbe (ou les barres) sur le graphe et constitue aussi la couleur de base de la grande valeur actuelle en haut.
> **Vous ne trouvez pas votre métrique ?** L’ **Métrique de l'appareil** la liste ne propose que des métriques numériques. Si une mesure attendue est absente, la métrique est stockée comme String ou Boolean plutôt que comme Integer ou Float. Ouvrez **Appareils → Métriques**, trouvez la métrique et modifiez son mode de stockage en Integer ou Float — à condition que l'appareil transmette bien un nombre. Voir [Métriques](/kilo-docs-fr/kilo-iot-server/devices/metric-templates.md).
Un widget Graphique suit **une seule métrique** — une fois cette métrique configurée, il n'y a pas de deuxième ligne de métrique à remplir. Pour comparer plusieurs mesures, créez un widget Graphique séparé pour chacune.
6. Cliquez sur **Suivant** pour ouvrir l' **Apparence** onglet.
7. Saisissez un **nom du widget** — par exemple « Température de la chambre froide » — et une **Description**.
8. Sous **Type de widget**, choisissez **ligne** ou **barres**. Le **ligne** type trace une courbe continue, idéale pour une mesure qui évolue progressivement comme la température; **barres** trace une barre par intervalle, utile lorsque chaque rapport individuel est l'élément que vous souhaitez comparer. Dans ce cas, choisissez **ligne**.
9. Définissez la **Période** — la plage d'historique couverte par le graphe : **Dernière heure**, **Dernier jour**, **Dernière semaine**, ou **Dernier mois**. Pour une revue hebdomadaire de conformité, choisissez **Dernière semaine**.
10. Sous **Définir la plage de valeurs**, définissez **De** et **À** — le minimum et le maximum de l'axe vertical. Choisissez une fenêtre qui contient aisément toutes les températures atteintes par l'unité : **De** -5, **À** 20 (°C). (Un nouveau widget commence à 0–100 ; modifiez-le pour l'adapter à la mesure.)
11. Sous **Seuils**, cliquez sur **Ajouter un seuil** pour chaque bande opérationnelle. Les **De** et **À** sont les bornes inférieure et supérieure d'une bande colorée sur cette même échelle de -5 à 20 °C ; donnez-lui un **Libellé** et un onglet **Couleur**. Pour la chambre froide, ajoutez-en trois :
* « Conforme » — **De** 2, **À** 8 — vert
* « Avertissement » — **De** 8, **À** 12 — ambre
* « Dépassement » — **De** 12, **À** 20 — rouge
Chaque seuil dispose de deux interrupteurs visuels indépendants. **Afficher le remplissage** peint la bande comme un arrière-plan coloré sur tout le graphe ; **Afficher la ligne** trace une ligne de limite aux bords de la bande. Activez **Afficher le remplissage** pour la bande Conforme afin que la zone sûre apparaisse comme une teinte verte derrière la trace ; activez **Afficher la ligne** pour la bande Dépassement afin que sa bordure inférieure à 12 °C soit une ligne rouge nette que la température ne doit pas franchir.
12. Activez **Afficher la valeur moyenne** pour ajouter une ligne pointillée à la moyenne de la période, libellée « Moyenne » dans la légende.
13. **Afficher les lignes de l'axe vertical** et **Afficher les lignes de l'axe horizontal** ajoutez des lignes de grille pour l'axe du temps et l'axe des valeurs — activez-les si une grille rend le graphe plus facile à lire.
14. Activez **Afficher la légende des données** pour afficher les libellés des seuils et la moyenne à côté du graphe.
15. Activez **Afficher les métriques en dessous** pour afficher le nom de la métrique et la mesure actuelle sur une ligne sous le graphe. Cela permet de garder la mesure visible lorsque le widget est trop petit pour afficher clairement la grande valeur.
16. Si vous avez choisi **barres** à l'étape 8, **Afficher la valeur sur la barre** affiche la valeur propre de chaque barre sur la barre elle-même, de sorte qu'un opérateur puisse lire les chiffres exacts directement sur le graphique au lieu de les estimer par rapport à l'axe. Cette option s'applique uniquement aux graphiques en barres — sur un graphique en courbe, il n'y a pas de barres à étiqueter, donc elle n'est pas proposée.
17. Cliquez sur **Enregistrer** pour placer le widget sur le tableau de bord.
Le résultat : un widget dont la grande valeur affiche la température actuelle et dont le graphe retrace toute la semaine en arrière-plan — les bandes verte, ambre et rouge rendant évident d'un coup d'œil si la charge est restée conforme ou a dérivé vers un dépassement. La même configuration convient à toute mesure dont l'historique mérite d'être surveillé ; seul l'appareil, la plage de valeurs et les bandes changent.
## Comment fonctionne la couleur de la mesure actuelle
La grande valeur en haut du widget prend par défaut la couleur de la métrique définie dans l'onglet Source de données. Lorsque la valeur actuelle tombe dans l'une de vos plages de seuil, l'affichage passe à la couleur de ce seuil, et revient à la couleur de la métrique lorsque la valeur sort de toutes les bandes.
Ainsi, un widget de chambre froide s'affiche en vert lorsque la mesure se trouve dans la bande Conforme et passe au rouge dès qu'elle entre dans Dépassement — sans configuration séparée pour la mesure actuelle. Le widget rend la situation visible ; pour être alerté lorsque cela se produit, associez-le à une [alarme](/kilo-docs-fr/kilo-iot-server/alarm.md).
## Seuils vs conditions
Le widget Graphique utilise **bandes de seuil** — des plages colorées tracées sur le graphe historique. Le système complet de conditions — règles nommées, ordre de priorité, valeurs par défaut par métrique — appartient aux widgets Last Data et Image. Voir [Conditions](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/conditions.md).
## Exemples pratiques
**Refroidissement de salle serveurs — une semaine d'historique** Un capteur de température d'air de baie sur un **ligne** graphique, **Dernière semaine**, plage de valeurs 10–40 °C. Trois seuils : vert 18–27 °C « Normal », ambre 27–32 °C « Chaud », rouge 32–40 °C « Critique ». Un opérateur qui consulte le tableau de bord après un week-end voit immédiatement si le refroidissement est resté stable ou a bondi dans les zones ambre et rouge hors heures ouvrées.
**Surveillance des vibrations — rapports discrets sous forme de barres** Un capteur de vibrations d'équipement qui remonte l'amplitude à intervalles réguliers, sur un **barres** graphique, **Dernier jour**, plage de valeurs 0–20 mm/s. Trois seuils : vert 0–7 mm/s « Normal », ambre 7–12 mm/s « Élevé », rouge 12–20 mm/s « Critique ». Chaque barre correspond à un intervalle de rapport, ce qui permet à un ingénieur d'identifier précisément quels intervalles se sont déroulés de façon anormale et de les recouper avec le planning de production. C'est le cas qui justifie **Afficher la valeur sur la barre** — lorsque le but du widget est de comparer des rapports individuels, afficher l'amplitude sur chaque barre évite de devoir lire chacune d'elles sur l'axe.
**Consommation d'énergie — niveau de base et pics** Un compteur d'énergie sur une ligne de production, **ligne** graphique, **Dernière semaine**. Définissez la plage de valeurs pour couvrir la consommation de la ligne — par exemple 0–60 kW — puis ajoutez une bande verte sur la plage de production attendue (disons 15–40 kW) et une bande rouge au-dessus pour une surconsommation. Les chiffres dépendent du site : définissez **De** et **À** vous-même votre niveau de base et votre pic attendu. Toute dérive au-dessus de la plage attendue apparaît alors immédiatement lorsque la courbe quitte la bande verte.
Un Graphique convient à toute mesure dont l'historique a du sens — pression, débit, humidité, niveau de remplissage — prenez donc ces cas comme points de départ. Partout où la question est « qu'est-ce que c'est maintenant, et comment en est-on arrivé là », le widget Graphique répond aux deux.
## Voir aussi
* [Widget Dernières données](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — La valeur actuelle seule, lorsque vous n'avez pas besoin de l'historique
* [Graphique linéaire](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — Configurer et lire une tendance continue
* [Graphique en barres](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — Comparer des rapports et afficher les valeurs sur les barres
* [Conditions](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Règles de couleur par métrique pour les widgets Last Data et Image
* [Ajout de widgets](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets.md) — Mode édition et sélecteur de widgets
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.kiloiot.io/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/chart-widget.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
