🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Highcharts Maker is a lightweight jQuery plugin used to generate an intuitive, interactive, responsive chart from table data, requires the popular Highcharts.js library.

Highcharts

Documentation

jquery-highchartsmaker

jQuery plugin to generate highcharts by reading a table

Usage

Consider this table

Date Imps Clicks CTR eCPM
Apr 16, 2012 1 1 100%
Apr 18, 2012 2 1 50% $0.88
Apr 19, 2012 4 1 25% $1.37
<div id="chart"></div> <!-- You will need to create a target element for where the chart will go --> <table id="data"> <thead>     <tr>         <th>Date</th>         <th>Imps</th>         <th>Clicks</th>         <th>CTR</th>         <th>eCPM</th>     </tr> </thead> <tbody>     <tr>         <td>Apr 16, 2012</td>         <td>1</td>         <td>1</td>         <td>100%</td>         <td></td>     </tr>     <tr>         <td>Apr 18, 2012</td>         <td>2</td>         <td>1</td>         <td>50%</td>         <td>$0.88</td>     </tr>     <tr>         <td>Apr 19, 2012</td>         <td>4</td>         <td>1</td>         <td>25%</td>         <td>$1.37</td>     </tr> </tbody> </table>

Call highchartsmaker plugin on the target element (in this case, the element ID 'chart')

$('#chart').highchartsMaker($(#data), {     // Options (or pass empty object for no special options)     "yAxis":{         "min":0     },     "date_interval":86400000,     "title":"Example Chart" });

Result

Example Chart

Dependencies


You May Also Like