Charts v 1.3

Charts are generated with a simple table or with a data object

Options read more about inline data attributes

option	default	possible values	description	since	info
width	null	integer	the width of the charts. If set to null the width is equal the table	1.0
height	300	integer	the height of the charts.	1.0
hideTable	true	true | false	Hides the table	1.0
tableBefore	false	true | false	inserts the charts after the table if true	1.3
data	{}	object	The data for the chart	1.0	see flot library for more information
stack	false	true | false	Stack the charts	1.0	Only for Line and Bar Charts
type	'lines'	lines | bars | pie	defines the type of the chart	1.0
points	null	true | false | null	show points on the charts. If set to null the standard value for the type will be used	1.0
shadowSize	2	integer	Size of the shadow	1.0	Only for Line and tilted Pie Charts
fill	null	true | false | null	fill the charts. If set to null the standard value for the type will be used	1.0
fillColor	null	true | false | null	color of the fill. If set to null the color of the line will be used	1.0
lineWidth	null	number	thikness of the lines. If set to null the standard value for the type will be used	1.0
legend	true	true | false	display the legend within the charts	1.0
legendPosition	'ne'	'ne' | 'nw' | 'se' | 'sw'	position of the legend	1.0
tooltip	true	true | false	display a tooltip	1.0
tooltipGravity	'n'	'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw'	position of the tooltip	1.0	uses the tipsy plugin
tooltipPattern	"value is %1 from %2 at %3 (%4)"	string | function(value, legend, label, id, itemobj)	The pattern for the tooltip. If it is a string %1 => value, %2 => legend, %3 => label, %4 => id. The function must return a string	1.0	itemobj was added in version 1.2
orientation	'horizontal'	'horizontal' | 'vertical'	Parsing direction of the table	1.0
colors	['#b2e7b2','#f0b7b7','#b5f0f0','#e8e8b3', '#efb7ef' ,'#bbb6f0']	array	Array of colors. If more colors needed it start with the first one
flot	{}	flot object	more specific options for the flot library	1.0	every option overwrides the predefined ones
onClick	function(){}	function(value, legend, label, id, itemobj)	callback if a bar or chart point is clicked	1.0	itemobj was added in version 1.2

Methods

method name	default	arguments	description	since	info
set		key, value	sets the the option 'key' with the value 'value'	1.0
Check out flot library for all methods

Usage

$(selector).wl_Chart([options]);

Calling Methods

$(selector).wl_Gallery('method', [,arg [,arg]]);

Markup

<table class="charts">
<thead>
	<tr>
		<th></th>
		<th>Label 1</th>
		<th>Label 2</th>
		<th>Label 3</th>
		<th>Label 4</th>
		<th>Label 5</th>
		<th>Label 6</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th>First Label</th>
		<td>18</td>
		<td>125</td>
		<td>159</td>
		<td>147</td>
		<td>154</td>
		<td>114</td>
	</tr>
	<tr>
		<th>Second Label</th>
		<td>8</td>
		<td>27</td>
		<td>25</td>
		<td>79</td>
		<td>47</td>
		<td>59</td>
	</tr>
</tbody>
</table>

Data Values

data:[{
	label:'First Label',
	data:[[0,18],[1,125],[2,159],[4,147],[5,154],[6,114]]
},{
	label:'Second Label',
	data:[[0,8],[1,27],[2,25],[4,79],[5,47],[6,59]]
}]

Example

	Label 1	Label 2	Label 3	Label 4	Label 5	Label 6
First Label	18	125	159	147	154	114
Second Label	8	27	25	79	47	59