Convert a boring table with figures into an exciting, colourful graph instantly. This easy-to-use add-on will add professionalism to any business website. You can add a wide variety of graphs - bar, line, area, bubble, gantt and pie. Even better, you can apply formatting to multiple tables on the same page.
The graph does not use Flash technology, so it is compatible on any web browser and device including iPhone and iPad. If the browser does not have Javascript enabled, it will gracefully degrade back to a normal HTML table.
Download from the Concrete5 Marketplace ($15)
Features:
- Convert HTML to a beautiful, professional graph. Supports multiple graphs on the same page.
- 6 graph styles available: bar, Line, Area, Bubble, Gantt, Pie
- Animated interface when hovering mouse over legend to highlight specific data set
- Gracefully degrades when Javascript is not enabled
- Customise height and width of graph to any size you wish
Power Tips:
To change the title/caption of each graph (top left corner), use the following code within your table:
<caption>My caption here</caption>
To change the legend label on the right side of the graph, use the following code within your table:
<caption id="legend">My legend table</caption>
As a starting point, you can use this HTML code to start your HTML table to ensure it's in the correct format.
<table id="graph1" style="width: 400px;">
<caption>How Awesome is C5Extras?</caption>
<caption id="legend">Votes</caption>
<thead>
<tr>
<td> </td>
<th>Ok</th>
<th>Good</th>
<th>Very Good</th>
<th>Super Good</th>
<th>Incredible</th>
<th>OMG!</th>
</tr>
</thead>
<tbody>
<tr>
<th>Business</th>
<td>5</td>
<td>30</td>
<td>60</td>
<td>80</td>
<td>95</td>
<td>97</td>
</tr>
<tr>
<th>Designers</th>
<td>20</td>
<td>17</td>
<td>39</td>
<td>50</td>
<td>79</td>
<td>99</td>
</tr>
<tr>
<th>Developers</th>
<td>25</td>
<td>39</td>
<td>70</td>
<td>96</td>
<td>109</td>
<td>110</td>
</tr>
</tbody>
Examples:
Bar graph, Line graph, Area graph, Pie graph, Bubble graph, Gantt chart.
Hover your mouse over the legend of each graph to filter the view for a single set of data.
Go from this...
Ok | Good | Very Good | Super Good | Incredible | OMG! | |
---|---|---|---|---|---|---|
Business | 5 | 30 | 60 | 80 | 95 | 97 |
Designers | 20 | 17 | 39 | 50 | 79 | 99 |
Developers | 25 | 39 | 70 | 96 | 109 | 110 |
To this...
Ok | Good | Very Good | Super Good | Incredible | OMG! | |
---|---|---|---|---|---|---|
Business | 5 | 30 | 60 | 80 | 95 | 97 |
Designers | 20 | 17 | 39 | 50 | 79 | 99 |
Developers | 25 | 39 | 70 | 96 | 109 | 110 |
iPod | iPhone | iPad | iMac | Macbook Pro | Other | |
---|---|---|---|---|---|---|
2006 | 10 | 0 | 0 | 20 | 10 | 20 |
2007 | 20 | 120 | 0 | 50 | 30 | 40 |
2008 | 50 | 140 | 0 | 60 | 70 | 50 |
2009 | 70 | 160 | 0 | 70 | 80 | 60 |
2010 | 100 | 210 | 90 | 80 | 180 | 80 |
iPod | iPhone | iPad | iMac | Macbook Pro | Other | |
---|---|---|---|---|---|---|
2006 | 10 | 0 | 0 | 20 | 10 | 20 |
2007 | 20 | 120 | 0 | 50 | 30 | 40 |
2008 | 50 | 140 | 0 | 60 | 70 | 50 |
2009 | 70 | 160 | 0 | 70 | 80 | 60 |
2010 | 100 | 210 | 90 | 80 | 180 | 80 |
iPod | 100 |
---|---|
iPhone | 210 |
iPad | 90 |
iMac | 80 |
Macbook Pro | 180 |
Other | 80 |
iPod | iPhone | iPad | iMac | Macbook Pro | Other | |
---|---|---|---|---|---|---|
2006 | 10 | 0 | 0 | 20 | 10 | 20 |
2007 | 20 | 120 | 0 | 50 | 30 | 40 |
2008 | 50 | 140 | 0 | 60 | 70 | 50 |
2009 | 70 | 160 | 0 | 70 | 80 | 60 |
2010 | 100 | 210 | 90 | 80 | 180 | 80 |
iPod | iPhone | iPad | iMac | Macbook Pro | Other | |
---|---|---|---|---|---|---|
2006 | 10 | 0 | 0 | 20 | 10 | 20 |
2007 | 20 | 120 | 0 | 50 | 30 | 40 |
2008 | 50 | 140 | 0 | 60 | 70 | 50 |
2009 | 70 | 160 | 0 | 70 | 80 | 60 |
2010 | 100 | 210 | 90 | 80 | 180 | 80 |