- Skip to main content
- Skip to "About this site"

# Charts and graphs - Customization

- Documentation
- Questions or comments?

- Charts and graphs - Simple and easy
- Labels and reference values
- Customization, custom presets and multiple charts and graphs types (current)
- Customizing pie charts
- Specific test cases

## 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

Date modified:
  2015-03-14