Charts and graphs - Customization

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Customization

The following example shows how the data-flot attribute can be used to produce customized charts. All the available options are described in the Flot API reference.

<table class="wb-charts wb-charts-bar table" data-flot='{ "yaxis": { "max": 150000} }'>
Enquiries
2008-09 2009-10 2010-11
Enquiries 80189 65297 70387
Threshold 70000 75000
View code 
<table class="wb-charts wb-charts-bar table" data-flot='{ "yaxis": { "max": 150000} }'>
		<caption>Enquiries</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" }'>Enquiries</th>
			<td>80189</td>
			<td>65297</td>
			<td>70387</td>
		</tr>
		<tr>
			<th data-flot='{ "color":"#FF2222" }'>Threshold</th>
			<td colspan="2">70000</td>
			<td>75000</td>
		</tr>
	</tbody>
</table>

Multiple charts and graphs types

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

To combine a bar chart with a line chart, the chart type needs to be configured at the series levels.

Enquiries
2008-09 2009-10 2010-11
Enquiries 80189 65297 70387
Threshold 70000 75000
View code 
<table class="wb-charts table" data-flot='{ "yaxis": { "max": 150000} }'>
	<caption>Enquiries</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">Enquiries</th>
			<td>80189</td>
			<td>65297</td>
			<td>70387</td>
		</tr>
		<tr>
			<th data-flot='{ "color":"#FF2222" }'>Threshold</th>
			<td colspan="2">70000</td>
			<td>75000</td>
		</tr>
	</tbody>
</table>

Custom presets

Custom presets can be declared using embedded JavaScript where custom (name of the preset) can be any name. The custom preset can be applied using a class name with wb-charts- as the prefix followed by your custom preset name.

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

<table class="wb-charts wb-charts-custom table">

Number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General 2 0 20 4 100 50
Students 2 2 1 5 50 0
Business 60 10 20 90 50 8
Professional 46 26 5 101 200 142
Lawyer 0 2 4 0 300 300
Table Source - data-flot attribute on <th> 
<table class="wb-charts wb-charts-custom table">
	<caption>Number of pages by main purpose and audience</caption>
	<tr>
		<td></td>
		<th>Education</th>
		<th>Task</th>
		<th>Navigation</th>
		<th>Support</th>
		<th>Information</th>
		<th>Corporate</th>
	</tr>
	<tr>
		<th data-flot='{ "bars":{ "show": true, "barWidth": 0.9, "order":1}}'>General</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}}'>Students</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}}'>Business</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}}'>Professional</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}}'>Lawyer</th>
		<td>0</td>
		<td>2</td>
		<td>4</td>
		<td>0</td>
		<td>300</td>
		<td>300</td>
	</tr>
</table>

Applying a preset to multiple settings

It is possible to apply a preset to multiple settings. When the same preset name exists and is applied to multiple settings, the preset is applied across all those settings.

<script>
window[ "wb-charts" ] = {

	// Flot global settings. Equivalent to applying "data-flot" to the table element.
	flot: { },

	// Flot series-specific setting. Equivalent to applying "data-flot" to the th element.
	series: { },

	// WET chart-specific setting. Equivalent to applying "data-wb-charts" on the table element.
	charts: { }
};
</script>

Negative tabular values

Negative number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General -2 0 -20 -4 -100 -50
Students -2 -2 -1 -5 -50 -0
Business -60 -10 -20 -90 -50 -8
Professional -46 -26 -5 -101 -200 -142
Lawyer 0 -2 -4 0 -300 -300

Pie chart with customized segments

<thead>
	<tr>
		<td></td>
		<th>General</th>
		<th data-flot='{"color":"#00FF00"}'>Students</th>
		<th>Buisness</th>
		<th>Professional</th>
		<th>Lawyer</th>
	</tr>
</thead>
Number of pages with tasks as a main purpose per audience
General Students Buisness Professional Lawyer
Task 0 2 10 26 2
Date modified: