Joomla! graphs, charts, table plugin, module, extension, component. Creates graphs and charts based on HTML tables.
ARI JData Visualizer creates charts and graphs which are based on data from HTML table.This plugin from plugins repository, it's open source and you can use it for free if you have one of the following products: ARI Smart Content, ARI Smart Content: DataTable Pack, ARI Smart Content: News Pack or ARI Smart Content: Image Pack.
Features:
- Customizable
- Supports different types of graphs and charts
- Easy to use
Example:
2009 Individual Sales by Category
|
Food |
Auto |
Household |
Furniture |
Kitchen |
Bath |
| Mary |
150 |
160 |
40 |
120 |
30 |
70 |
| Tom |
3 |
40 |
30 |
45 |
35 |
49 |
| John |
37 |
20 |
77 |
145 |
15 |
89 |
| Sally |
87 |
12 |
127 |
49 |
75 |
39 |
| James |
38 |
124 |
17 |
71 |
33 |
79 |
Note: this is source HTML table, you can hide it with help 'hideTable' parameter.
Bar
Area
Pie
Line
Usage:
{arijdatavisualizer type="pie" hideTable="true"}
<table>
<caption>2009 Individual Sales by Category</caption>
<thead>
<tr>
<td></td>
<th>food</th>
<th>auto</th>
<th>household</th>
<th>furniture</th>
<th>kitchen</th>
<th>bath</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>150</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th>Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th>John</th>
<td>37</td>
<td>20</td>
<td>77</td>
<td>145</td>
<td>15</td>
<td>89</td>
</tr>
<tr>
<th>Sally</th>
<td>87</td>
<td>12</td>
<td>127</td>
<td>49</td>
<td>75</td>
<td>39</td>
</tr>
<tr>
<th>James</th>
<td>38</td>
<td>124</td>
<td>17</td>
<td>71</td>
<td>33</td>
<td>79</td>
</tr>
</tbody>
</table>
{/arijdatavisualizer}
OR
<table id="tblData">
<caption>2009 Individual Sales by Category</caption>
<thead>
<tr>
<td></td>
<th>food</th>
<th>auto</th>
<th>household</th>
<th>furniture</th>
<th>kitchen</th>
<th>bath</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>150</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th>Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th>John</th>
<td>37</td>
<td>20</td>
<td>77</td>
<td>145</td>
<td>15</td>
<td>89</td>
</tr>
<tr>
<th>Sally</th>
<td>87</td>
<td>12</td>
<td>127</td>
<td>49</td>
<td>75</td>
<td>39</td>
</tr>
<tr>
<th>James</th>
<td>38</td>
<td>124</td>
<td>17</td>
<td>71</td>
<td>33</td>
<td>79</td>
</tr>
</tbody>
</table>
{arijdatavisualizer tableId="tblData" type="bar" hideTable="false"}
{/arijdatavisualizer}
Parameters:
- type - Type of chart. Values: bar,area,pie,line
- legendPos - Legend position. Values: top, bottom, right, left
- width - Width of chart. Values: number
- height - Height of height. Values: number
- appendTitle - Add title to chart. Values: true,false
- title - Title. Values: string
- appendKey - Add the color key to the chart. Values: true, false
- colors - Items are hex values separated by commas, used in order of appearance. Values: string
- textColors - Items are hex values separated by commas. Values: string
- parseDirection - Direction to parse the table data. Values: x,y
- pieMargin - Space around outer circle of Pie chart. Values: number
- pieLabelPos - Position of text labels in Pie chart. Values: inside,outside
- pieShowValues - Indicate show percent or value on pie chart. Values: true (for value),false (for percent)
- lineWeight - Stroke weight for lines in line and area charts. Values: number
- barGroupMargin - Space around each group of bars in a bar chart. Values: number
- barMargin - Creates space around bars in bar chart. Values: number
- tableId - id of HTML table. Values: string
- hideTable - If this property is enabled, HTML table will be hidden and user'll show only graph. Values: true, false
|