Usage for Highcharts Drupal plugin

by Alex Azuero

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://raw.github.com/harrync/highcharts-drupal/master/highcharts.drupal.js"></script>

<table class="table">
    <thead>
     <tr>
         <th>&nbsp;</th>
         <th>Virgin Media</th>
         <th>Skry</th>
         <th>O2</th>
         <th>BT</th>
     </tr>
    </thead>
    <tbody>
        <tr>
            <th>January, 2013</th>
            <td>4.20</td>
            <td>33.5550</td>
            <td>2.80</td>
            <td>3.20</td>
        </tr>
        <tr>
            <th>February, 2013</th>
            <td>4.40</td>
            <td>3.60</td>
            <td>2.95</td>
            <td>3.00</td>
        </tr>
    </tbody>
</table>

<div id="container"></div>

CSS

table {display:none}

JavaScript

$(function () {
   
    /* 
        Create Highslide chart base upon table of results
        -------------------------------------------------
        Requires:
            - jQuery 1.7+
            - highslide.js
            - Drupal Views Table Group module
        
        Options:
            - chartTitle, yAxisTitle, defaultShow
    */
    
    $("table").charts({
        chartTitle: "Testing",
        yAxisTitle:"Speed (Mb/s)",
        defaultShow: 2
    });
    
});