Table to chart

You can use table tag to generate charts. Bars, lines (filled and wire) and pies are available.

Keep standard

This mootools functionnality added in Copix allows you to use a data set and display it as chart. If javascript isn't available, datas are showned in table. You could stay W3C complient and don't break your page content. Only browser having canvas (excanvas for IE) and Javascript can show charts, others can continue to see datas in tables.

Technique

Everything is generated in canvas, this tag is native for FireFox?. For IE, you have to import excanvas.js.

Example

Look this example: <html> <h2>Test Graph</h2> <table id="test1" border="1" style="width: 250px"> <tr><td></td><th>2001</th><th>2002</th><th>2003</th></tr> <tr><th>FireFox?</th><td>12</td><td>23</td><td>15</td></tr> <tr><th>Internet Explorer</th><td>17</td><td>43</td><td>3</td></tr> <tr><th>Opera</th><td>15</td><td>8</td><td>5</td></tr> </table> </html>

following is the source:

2001 2002 2003
FireFox 12 23 15
Internet Explorer 17 43 3
Opera 15 8 5

Table id is "test1", to transform this table you only have to do: 

<?php
_etag('mootools','plugin'=>'plotr;tabletochart');
// add excanvas if needed
//CopixHTMLHeader::addJSLink(_resource('js/libs/excanvas/excanvas-compressed.js'));

//And now, change dataset in charts
CopixHTMLHeader::addJSCode("
	window.addEvent('domready',function(){
		$('test1').toChart();
	});
");
?>

This is the result: http://www.metal3d.org/captures/capture1.png

Pie and Lines

To modify chart type, you could give type attribute in options wich can be "bars", "lines" or "pie".

Example: 

$('test1').toChart({
	type: "pie"
});

http://www.metal3d.org/captures/capture3.png Note in this case, as we have several lines, chart is an avarage of datas cols. 

$('test1').toChart({
	type: "lines"
});

http://www.metal3d.org/captures/capture4.png 

$('test1').toChart({
	type: "lines",
	shouldFill: false
});

http://www.metal3d.org/captures/capture5.png

Other Options

Options could be passed, for example to display legends, change the color scheme, width and height, etc... This following examples shows legends and change sizes. It chage color scheme too: 

$('test1').toChart({
	'legend': true,
	'width': 250,
	'height': 200,
	'colors': [
		'#22AA22',
		'#77AA77',
		'#99AA99'
	]
});

http://www.metal3d.org/captures/capture2.png

Lines: 

$('test1').toChart({
	'type': 'lines',
	'legend': true,
	'width': 250,
	'height': 200,
	'colors': [
		'#22AA22',
		'#77AA77',
		'#99AA99'
	]
});

http://www.metal3d.org/captures/capture6.png