Graphiques - Personalisation

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} }'>
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} }'>

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 :