---
{
	"title": "Graphiques - Personalisation",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Personalisation, préréglages personnalisés et plusieurs types de graphique.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "custom",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-fr.html">Graphiques - Simple</a></li>
	<li><a href="labelsandreferencevalue-fr.html">Étiquettage et valeur de référence</a></li>
	<li><a href="custom-fr.html">Personalisation, préréglages personnalisés et plusieurs types de graphique (actuelle)</a></li>
	<li><a href="piecustom-fr.html">Personalisation de diagrame circulaire</a></li>
	<li><a href="testing-fr.html">Scénarios d'essai spécifiques</a></li>
</ul>

<span class="wb-prettify all-pre"></span>
<section>
	<h2>Personalisation</h2>
	<p>L'exemple suivant démontre comment l'attribute <code>data-flot</code> peut être utilisé pour créer des graphiques personalisés. La documentation de toutes les options se trouvent dans la <a href="https://github.com/flot/flot/blob/master/API.md">référence d'API de Flot (anglais seulement)</a>. 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.</p>

	<pre><code>&lt;table class="<strong>wb-charts wb-charts-bar</strong> table" <strong>data-flot</strong>='{ "yaxis": { "max": 150000} }'&gt;</code></pre>

	<ul>
		<li><code>wb-charts</code> : Instruction de démarage du plugiciel des graphiques de la BOEW</li>
		<li><code>wb-charts-bar</code> : Applique le préréglage nommé &quot;bar&quot;</li>
		<li><code>data-flot</code> : É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.</li>
	</ul>

	<table class="wb-charts wb-charts-bar table" data-flot='{ "yaxis": { "max": 150000} }'>
		<caption>Requêtes</caption>
		<thead>
			<tr>
				<td></td>
				<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>

	<details>
		<summary>Visualiser le code</summary>
		<pre><code>&lt;table class=&quot;wb-charts wb-charts-bar table&quot; data-flot='{ &quot;yaxis&quot;: { &quot;max&quot;: 150000} }'&gt;
	&lt;caption&gt;Requêtes&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;&lt;/th&gt;
			&lt;th&gt;2008-09&lt;/th&gt;
			&lt;th&gt;2009-10&lt;/th&gt;
			&lt;th&gt;2010-11&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th <strong>data-flot='{ &quot;color&quot;:&quot;#191970&quot; }'</strong>&gt;Requêtes&lt;/th&gt;
			&lt;td&gt;80 189,56&lt;/td&gt;
			&lt;td&gt;65,297,98&lt;/td&gt;
			&lt;td&gt;70 387,33&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th <strong>data-flot='{ &quot;color&quot;:&quot;#FF2222&quot; }'</strong>&gt;Seuil&lt;/th&gt;
			&lt;td colspan=&quot;2&quot;&gt;70 000,24&lt;/td&gt;
			&lt;td&gt;75 000,09&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
	</details>
</section>

<section>
	<h2>Plusieurs types de graphique</h2>

	<pre><code>&lt;table class="<strong>wb-charts</strong> table" <strong>data-flot</strong>='{ "yaxis": { "max": 150000} }'&gt;</code></pre>

	<ul>
		<li><code>wb-charts</code> : Instruction de démarage du plugiciel des graphique de la BOEW</li>
		<li><code>data-flot</code> : É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.</li>
	</ul>

	<p>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.</p>

	<table class="wb-charts 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" }' 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>

	<details>
		<summary>Code source du tableau Requêtes</summary>
		<pre><code>&lt;table class=&quot;wb-charts&quot; data-flot='{ &quot;yaxis&quot;: { &quot;max&quot;: 150000} }'&gt;
	&lt;caption&gt;Requêtes&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;&lt;/th&gt;
			&lt;th&gt;2008-09&lt;/th&gt;
			&lt;th&gt;2009-10&lt;/th&gt;
			&lt;th&gt;2010-11&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;

	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th data-flot='{ &quot;color&quot;:&quot;#191970&quot; }' <strong>class=&quot;wb-charts-bar&quot;</strong>&gt;Requêtes&lt;/th&gt;
			&lt;td&gt;80189&lt;/td&gt;
			&lt;td&gt;65297&lt;/td&gt;
			&lt;td&gt;70387&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th data-flot='{ &quot;color&quot;:&quot;#FF2222&quot; }'&gt;Seuil&lt;/th&gt;
			&lt;td colspan=&quot;2&quot;&gt;70000&lt;/td&gt;
			&lt;td&gt;75000&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
	</details>
</section>

<section>
	<h2>Préréglages personnalisés</h2>
	<p>Les préréglages personnalisés sont déclarés à l'intérieur d'un script dans la page courant d'où le nom <code>personalise</code> (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 <code>wb-charts-</code> suivi du nom de votre préréglage.</p>

	<pre><code>&lt;script&gt;
window[ "wb-charts" ] = {
	flot: {
		<strong>personalise</strong>: {
			colors: [ &quot;#ff0000&quot;,
					&quot;#00ff00&quot;,
					&quot;#0000ff&quot;,
					&quot;#ff0000&quot;,
					&quot;#00ff00&quot;,
					&quot;#0000ff&quot;,
					&quot;#ff0000&quot;,
					&quot;#00ff00&quot;,
					&quot;#0000ff&quot;]
		}
	}
};
&lt;/script&gt;</code></pre>
	<script>
	window[ "wb-charts" ] = {
		flot: {
			personalise: {
				colors: [ "#ff0000",
						"#00ff00",
						"#0000ff",
						"#ff0000",
						"#00ff00",
						"#0000ff",
						"#ff0000",
						"#00ff00",
						"#0000ff"]
			}
		}
	};
	</script>

	<p><code>&lt;table class=&quot;wb-charts <strong>wb-charts-personalise</strong> table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-personalise 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>

	<details>
		<summary>Code source du tableau - avec l'attribute <code>data-flot</code> définie sur l'élément <code>&lt;th&gt;</code></summary>
		<pre><code>&lt;table class=&quot;wb-charts <strong>wb-charts-custom</strong> table&quot;&gt;
	&lt;caption&gt;Nombre de page par objectif principal et par audience&lt;/caption&gt;
	&lt;tr&gt;
		&lt;td&gt;&lt;/td&gt;
		&lt;th&gt;Éducative&lt;/th&gt;
		&lt;th&gt;Tâches&lt;/th&gt;
		&lt;th&gt;Navigation&lt;/th&gt;
		&lt;th&gt;Soutien&lt;/th&gt;
		&lt;th&gt;Information&lt;/th&gt;
		&lt;th&gt;Entreprise&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th <strong>data-flot='{ &quot;bars&quot;:{ &quot;show&quot;: true, &quot;barWidth&quot;: 0.9, &quot;order&quot;:1}}'</strong>&gt;Général&lt;/th&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;20&lt;/td&gt;
		&lt;td&gt;4&lt;/td&gt;
		&lt;td&gt;100&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th <strong>data-flot='{ &quot;bars&quot;:{ &quot;show&quot;: true, &quot;barWidth&quot;: 0.9, &quot;order&quot;:2}}'</strong>&gt;Étudiants&lt;/th&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;1&lt;/td&gt;
		&lt;td&gt;5&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th <strong>data-flot='{ &quot;bars&quot;:{ &quot;show&quot;: true, &quot;barWidth&quot;: 0.9, &quot;order&quot;:3}}'</strong>&gt;Entreprise&lt;/th&gt;
		&lt;td&gt;60&lt;/td&gt;
		&lt;td&gt;10&lt;/td&gt;
		&lt;td&gt;20&lt;/td&gt;
		&lt;td&gt;90&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
		&lt;td&gt;8&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th <strong>data-flot='{ &quot;bars&quot;:{ &quot;show&quot;: true, &quot;barWidth&quot;: 0.9, &quot;order&quot;:4}}'</strong>&gt;Professionnel&lt;/th&gt;
		&lt;td&gt;46&lt;/td&gt;
		&lt;td&gt;26&lt;/td&gt;
		&lt;td&gt;5&lt;/td&gt;
		&lt;td&gt;101&lt;/td&gt;
		&lt;td&gt;200&lt;/td&gt;
		&lt;td&gt;142&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th <strong>data-flot='{ &quot;bars&quot;:{ &quot;show&quot;: true, &quot;barWidth&quot;: 0.9, &quot;order&quot;:5}}'</strong>&gt;Avocat&lt;/th&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;4&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;300&lt;/td&gt;
		&lt;td&gt;300&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
	</details>

	<section>
		<h3>Appliquer un préréglage à plusieurs paramètres</h3>
		<p>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.

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

};
&lt;/script&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Graphique avec des valeurs négative</h2>

	<table class="wb-charts table">
		<caption>Nombre négative de pages 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>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>Étudiants</th>
			<td>-2</td>
			<td>-2</td>
			<td>-1</td>
			<td>-5</td>
			<td>-50</td>
			<td>-0</td>
		</tr>
		<tr>
			<th>Entreprise</th>
			<td>-60</td>
			<td>-10</td>
			<td>-20</td>
			<td>-90</td>
			<td>-50</td>
			<td>-8</td>
		</tr>
		<tr>
			<th>Professionnel</th>
			<td>-46</td>
			<td>-26</td>
			<td>-5</td>
			<td>-101</td>
			<td>-200</td>
			<td>-142</td>
		</tr>
		<tr>
			<th>Avocat</th>
			<td>0</td>
			<td>-2</td>
			<td>-4</td>
			<td>0</td>
			<td>-300</td>
			<td>-300</td>
		</tr>
	</table>
</section>

<section>
	<h2>Diagrame circulaire avec un quartier personalisé</h2>

	<pre><code>&lt;thead&gt;
	&lt;tr&gt;
		&lt;td&gt;&lt;/td&gt;
		&lt;th&gt;Général&lt;/th&gt;
		&lt;th <strong>data-flot='{&quot;color&quot;:&quot;#00FF00&quot;}'</strong>&gt;Étudiants&lt;/th&gt;
		&lt;th&gt;Entreprise&lt;/th&gt;
		&lt;th&gt;Professionnel&lt;/th&gt;
		&lt;th&gt;Avocat&lt;/th&gt;
	&lt;/tr&gt;
&lt;/thead&gt;</code></pre>

	<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 300, "decimal": 1 }'>
		<caption>Nombre de pages ayant une tâche comme objectif principal et par audience</caption>
		<colgroup><col /></colgroup>
		<colgroup>
			<col />
			<col />
			<col />
			<col />
			<col />
		</colgroup>
		<thead>
			<tr>
				<td></td>
				<th>Général</th>
				<th data-flot='{"color":"#00FF00"}'>Étudiants</th>
				<th>Avocat</th>
				<th>Professionnel</th>
				<th>Avocat</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Tâches</th>
				<td>0</td>
				<td>2</td>
				<td>10</td>
				<td>26</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>
</section>
