» Instant Graph

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

How Awesome is C5Extras? Votes
  OkGoodVery GoodSuper GoodIncredibleOMG!
Business 5 30 60 80 95 97
Designers 20 17 39 50 79 99
Developers 25 39 70 96 109 110

To this...

How Awesome is C5Extras? Votes
  OkGoodVery GoodSuper GoodIncredibleOMG!
Business 5 30 60 80 95 97
Designers 20 17 39 50 79 99
Developers 25 39 70 96 109 110
Regional Sales Profit
  iPodiPhoneiPadiMacMacbook ProOther
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
Regional Sales Profit
  iPodiPhoneiPadiMacMacbook ProOther
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
Regional Sales Profit
iPod 100
iPhone 210
iPad 90
iMac 80
Macbook Pro 180
Other 80
Regional Sales Profit
  iPodiPhoneiPadiMacMacbook ProOther
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
Regional Sales Profit
  iPodiPhoneiPadiMacMacbook ProOther
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

Screenshots