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

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

Détails de la page

Date de modification :: 2015-03-10