---
title: Jauge liquide
description: "## Présentation de l'addin Jauge Liquide Cet addin apporte une image animée comme s'il contenait un liquide et n'affichant seulement des valeurs entre 0 et 100. ![](https://wiki.biboard.fr/wp-content/uploads/2024/08/V18__Jauges-Jauges-liquide-Exemple_01.png) ## Utilisation Cet addin est un composant d3.js qui contient une jauge affichant…"
url: "https://wiki.biboard.fr/wiki/jauge-liquide/"
updated: "2025-03-03"
category: Guide utilisateur / Studio / Tableaux de bord / Jauges
---

# Jauge liquide

## Présentation de l'addin Jauge Liquide

Cet addin apporte une image animée comme s'il contenait un liquide et n'affichant seulement des valeurs entre 0 et 100.

![](https://wiki.biboard.fr/wp-content/uploads/2024/08/V18__Jauges-Jauges-liquide-Exemple_01.png)

## Utilisation

Cet addin est un composant d3.js qui contient une jauge affichant un pourcentage. Le composant est associé obligatoirement associé à une Datasource dont la valeur est unique. Le champ peut être un champ issu de la requête ou bien un champ calculé issu de la Datasource.

## Propriétés simples

![](https://wiki.biboard.fr/wp-content/uploads/2024/06/V18__Jauges-Jauges-liquide-Bandeau_01.png)

### Nom / Infobulle / Visibilité / Rafraîchissement auto

```
Pour plus d'informations voir Propriétés simples
```

## Edition Web : [nom du composant]

### Propriétés

#### Liaison de données

##### Attribut

```
Champ de la datasource qui est affiché.
```

#### Animation

Il s'agit de tous les éléments permettant de configurer l'animation de remplissage de la jauge et des vagues :

![](https://wiki.biboard.fr/wp-content/uploads/2024/03/Animation_jauge_Liquide.png)

##### Vitesse de remplissage

```
Vitesse de remplissage de la jauge en ms : 1000 (défaut).
```

##### Vitesse des vagues

```
Vitesse de l'animation des vagues (ms) : 18000 (défaut).
```

##### Activer l'animation de la vague

```
Activer l'animation : coché (défaut).
```

#### Apparence du composant

Il s'agit de tous les éléments permettant de configurer la partie statique de la jauge :

[![Apparence du composant jauge liquide.png](https://fr.aws.biboard.fr/images/a/aa/Apparence_du_composant_jauge_liquide.png)](https://fr.aws.biboard.fr/Fichier:Apparence_du_composant_jauge_liquide.png)

##### Nombre de vagues

```
Indique le nombre de vagues : 1 (défaut).
```

##### Epaisseur du cercle

```
Indique l'épaisseur du cercle contenant le liquide : 5 (défaut).
```

##### Espace entre le liquide et le conteneur

```
espace entre le cercle conteneur et le liquide : 5 (défaut).
```

##### Couleur du cercle

```
Couleur du cercle.
```

##### Taille de la vague

```
Taille de la vague : 5 (défaut).
```

##### Couleur de la vague

```
Couleur de la vague.
```

##### Position du texte

```
position du texte en pourcentage : 50 (défaut).
```

##### Pourcentage d'occupation du texte dans la jauge

```
Taille du texte : 100 (défaut).
```

##### Afficher le pourcentage

```
Affiche le pourcentage : coché (défaut).
```

##### Police

```
Police : inherit (défaut).
```

##### Couleur du texte au dessus de la vague

```
couleur du texte lorsqu'il est par dessus la partie vide de la jauge.
```

##### Couleur du texte sous la vague

```
Couleur du texte lorsqu'il est en dessous la partie remplit de la jauge.
```

## Exemple

L'exemple présenté est créé comme suit :

### Requête

```
select 55 as Pourcentage
```

### Configuration composant

![](https://wiki.biboard.fr/wp-content/uploads/2024/08/V18__Jauges-Jauges-liquide-Exemple-Config_02-1024x171.png)

On sélectionne le champ à restituer dans la jauge liquide. Dans notre exemple, la colonne s'appelle bien 'Pourcentage'.

![](https://wiki.biboard.fr/wp-content/uploads/2024/06/V18__Jauges-Jauges-liquide-Exemple-Config_03-1024x222.png)

On modifie la durée : 1000 à 10000 et Vitesse : 18000 à 1000. Avec cette modifcation, à l'affichage on constate que le composant se remplit doucement et que la vague est plus rapide.