# Graphiques - Personalisation

- Documentation
- Questions ou commentaires?

- Graphiques - Simple
- Étiquettage et valeur de référence
- Personalisation, préréglages personnalisés et plusieurs types de graphique (actuelle)
- Personalisation de diagrame circulaire
- Scénarios d'essai spécifiques

## Personalisation

L'exemple suivant démontre comment l'attribute `data-flot` peut être utilisé pour créer des graphiques personalisés. La documentation de toutes les options se trouvent dans la référence d'API de Flot (anglais seulement). Cet example aussi démontre l'utilisation i18n des séparateur de millier, l'espace en français et l'example équivalente en anglais utilise la virgule.

    <table class="wb-charts wb-charts-bar table" data-flot='{ "yaxis": { "max": 150000} }'>

- `wb-charts` : Instruction de démarage du plugiciel des graphiques de la BOEW
- `wb-charts-bar` : Applique le préréglage nommé "bar"
- `data-flot` : Étend les options existante de les paramètre globale de Flot, ceci après l'application de tout les préréglages. Le contenu est un objet JSON.

Requêtes
| 2008-09 | 2009-10 | 2010-11
Requêtes | 80 189,56 | 65,297,98 | 70 387,33
Seuil | 70 000,24 | 75 000,09

Visualiser le code

    <table class="wb-charts wb-charts-bar table" data-flot='{ "yaxis": { "max": 150000} }'>
    	<caption>Requêtes</caption>
    	<thead>
    		<tr>
    			<th></th>
    			<th>2008-09</th>
    			<th>2009-10</th>
    			<th>2010-11</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th data-flot='{ "color":"#191970" }'>Requêtes</th>
    			<td>80 189,56</td>
    			<td>65,297,98</td>
    			<td>70 387,33</td>
    		</tr>
    		<tr>
    			<th data-flot='{ "color":"#FF2222" }'>Seuil</th>
    			<td colspan="2">70 000,24</td>
    			<td>75 000,09</td>
    		</tr>
    	</tbody>
    </table>

## Plusieurs types de graphique

    <table class="wb-charts table" data-flot='{ "yaxis": { "max": 150000} }'>

- `wb-charts` : Instruction de démarage du plugiciel des graphique de la BOEW
- `data-flot` : Étend les options existante de les paramètre globale de Flot, ceci après l'application de tout les préréglages. Le contenu est un objet JSON.

Afain de créer un graphique qui contient des graphiques à barres avec un graphique linéaire, le type de graphique doit être définie au niveau du jeu de données.

Requêtes
| 2008-09 | 2009-10 | 2010-11
--- | --- | --- | ---
Requêtes | 80189 | 65297 | 70387
Seuil | 70000 | 75000

Code source du tableau Requêtes

    <table class="wb-charts" data-flot='{ "yaxis": { "max": 150000} }'>
    	<caption>Requêtes</caption>
    	<thead>
    		<tr>
    			<th></th>
    			<th>2008-09</th>
    			<th>2009-10</th>
    			<th>2010-11</th>
    		</tr>
    	</thead>

    	<tbody>
    		<tr>
    			<th data-flot='{ "color":"#191970" }' class="wb-charts-bar">Requêtes</th>
    			<td>80189</td>
    			<td>65297</td>
    			<td>70387</td>
    		</tr>
    		<tr>
    			<th data-flot='{ "color":"#FF2222" }'>Seuil</th>
    			<td colspan="2">70000</td>
    			<td>75000</td>
    		</tr>
    	</tbody>
    </table>

## Préréglages personnalisés

Les préréglages personnalisés sont déclarés à l'intérieur d'un script dans la page courant d'où le nom `personalise` (le nom du préréglage) peut être n'importe quel nom. Après que le préréglage a été déclaré, vous pouvez l'utiliser en utilisant une class avec le préfixe `wb-charts-` suivi du nom de votre préréglage.

    <script>
    window[ "wb-charts" ] = {
    	flot: {
    		personalise: {
    			colors: [ "#ff0000",
    					"#00ff00",
    					"#0000ff",
    					"#ff0000",
    					"#00ff00",
    					"#0000ff",
    					"#ff0000",
    					"#00ff00",
    					"#0000ff"]
    		}
    	}
    };
    </script>

`<table class="wb-charts wb-charts-personalise table">`

Nombre de page par objectif principal et par audience
| Éducative | Tâches | Navigation | Soutien | Information | Entreprise
Général | 2 | 0 | 20 | 4 | 100 | 50
Étudiants | 2 | 2 | 1 | 5 | 50 | 0
Entreprise | 60 | 10 | 20 | 90 | 50 | 8
Professionnel | 46 | 26 | 5 | 101 | 200 | 142
Avocat | 0 | 2 | 4 | 0 | 300 | 300

Code source du tableau - avec l'attribute `data-flot` définie sur l'élément `<th>`

    <table class="wb-charts wb-charts-custom table">
    	<caption>Nombre de page par objectif principal et par audience</caption>
    	<tr>
    		<td></td>
    		<th>Éducative</th>
    		<th>Tâches</th>
    		<th>Navigation</th>
    		<th>Soutien</th>
    		<th>Information</th>
    		<th>Entreprise</th>
    	</tr>
    	<tr>
    		<th data-flot='{ "bars":{ "show": true, "barWidth": 0.9, "order":1}}'>Général</th>
    		<td>2</td>
    		<td>0</td>
    		<td>20</td>
    		<td>4</td>
    		<td>100</td>
    		<td>50</td>
    	</tr>
    	<tr>
    		<th data-flot='{ "bars":{ "show": true, "barWidth": 0.9, "order":2}}'>Étudiants</th>
    		<td>2</td>
    		<td>2</td>
    		<td>1</td>
    		<td>5</td>
    		<td>50</td>
    		<td>0</td>
    	</tr>
    	<tr>
    		<th data-flot='{ "bars":{ "show": true, "barWidth": 0.9, "order":3}}'>Entreprise</th>
    		<td>60</td>
    		<td>10</td>
    		<td>20</td>
    		<td>90</td>
    		<td>50</td>
    		<td>8</td>
    	</tr>
    	<tr>
    		<th data-flot='{ "bars":{ "show": true, "barWidth": 0.9, "order":4}}'>Professionnel</th>
    		<td>46</td>
    		<td>26</td>
    		<td>5</td>
    		<td>101</td>
    		<td>200</td>
    		<td>142</td>
    	</tr>
    	<tr>
    		<th data-flot='{ "bars":{ "show": true, "barWidth": 0.9, "order":5}}'>Avocat</th>
    		<td>0</td>
    		<td>2</td>
    		<td>4</td>
    		<td>0</td>
    		<td>300</td>
    		<td>300</td>
    	</tr>
    </table>

### Appliquer un préréglage à plusieurs paramètres

Il est possible d'appliquer un préréglage à plusieurs paramètres. Par ailleur lorsqu'un le même nom pour le préréglage existe, lors de l'appel c'est l'ensemble qui vont étendre les paramètres.

    <script>
    window[ "wb-charts" ] = {
    	flot: { }, // Paramètre généraux de Flot. Équivalent à l'attribut "data-flot" défini sur l'élément "table"
    	series: { }, // Paramètre spéficique à une série de Flot. Équivalent à l'attribut "data-flot" défini sur l'élément "th"
    	charts: { } // Paramètre spécique au graphique de la BOEW. Équivalent à l'attribute "data-wb-charts" défini sur l'élément "table"

    };
    </script>

## Graphique avec des valeurs négative

Nombre négative de pages par objectif principal et par audience
| Éducative | Tâches | Navigation | Soutien | Information | Entreprise
Général | -2 | 0 | -20 | -4 | -100 | -50
Étudiants | -2 | -2 | -1 | -5 | -50 | -0
Entreprise | -60 | -10 | -20 | -90 | -50 | -8
Professionnel | -46 | -26 | -5 | -101 | -200 | -142
Avocat | 0 | -2 | -4 | 0 | -300 | -300

## Diagrame circulaire avec un quartier personalisé

    <thead>
    	<tr>
    		<td></td>
    		<th>Général</th>
    		<th data-flot='{"color":"#00FF00"}'>Étudiants</th>
    		<th>Entreprise</th>
    		<th>Professionnel</th>
    		<th>Avocat</th>
    	</tr>
    </thead>

Nombre de pages ayant une tâche comme objectif principal et par audience
| Général | Étudiants | Avocat | Professionnel | Avocat
Tâches | 0 | 2 | 10 | 26 | 2

Date de modification :
  2015-03-10