Charts and graphs - Customization

Looking for WET v3.1?

WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.

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: