Graphiques - Personalisation

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

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).

<table class="wb-charts wb-charts-bar table" data-flot='{ "yaxis": { "max": 150000} }'>
Requêtes
2008-09 2009-10 2010-11
Requêtes 80189 65297 70387
Seuil 70000 75000
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>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>

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 :