> Charts
fr en

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:

Test Graph

200120022003
FireFox122315
Internet Explorer17433
Opera1585

following is the source:


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

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: capture1

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"
});
 

capture3 Note in this case, as we have several lines, chart is an avarage of datas cols.


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

capture4


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

capture5

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'
        ]
});
 

capture2

Lines:


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

capture6