Charts and graphs - Customization

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. It also show the i18n support for thousand seperator like the comas in English.

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

wb-charts: Calls the WET Charts and graphs plugin
wb-charts-bar: Applies the global "bar" preset
data-flot: Extends the global Flot settings, after any presets have been applied, with a JSON object.

Enquiries
	2008-09	2009-10	2010-11
Enquiries	80,189.56	65,297,98	70,387.33
Threshold	70,000.24		75,000.09

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>80,189.56</td>
			<td>65,297,98</td>
			<td>70,387.33</td>
		</tr>
		<tr>
			<th data-flot='{ "color":"#FF2222" }'>Threshold</th>
			<td colspan="2">70,000.24</td>
			<td>75,000.09</td>
		</tr>
	</tbody>
</table>

Multiple charts and graphs types

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

wb-charts: Calls the WET Charts and graphs plugin
data-flot: Extends the global Flot settings, after any presets have been applied, with a JSON object.

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	80 189	65 297	70 387
Threshold	70 000		75 000

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>80 189</td>
			<td>65 297</td>
			<td>70 387</td>
		</tr>
		<tr>
			<th data-flot='{ "color":"#FF2222" }'>Threshold</th>
			<td colspan="2">70 000</td>
			<td>75 000</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

Page details

Date modified:: 2015-03-14