Table-generated Highcharts Graph

v2

by amenadiel

HTML

<script src="http://www.gingahmail.com/economics/highcharts.js"></script>
<table id="comparison" class="tablesorter">
<thead>
    <tr>
<th>Equipo</th>
<th>SM2</th>
<th>SM3/HDR</th>
<th>CPU</th>
<th>Puntaje</th>
    </tr>
</thead>
<tbody>
<tr>
<th>HP DV6 6177 HD6620</th>
<td>1792</td>
<td>6651</td>
<td>3598</td>
<td>3598</td>    
</tr>
<tr>
<th>HP DV6 6177 HD6750M</th>
<td>1792</td>
<td>6651</td>
<td>3598</td>
<td>3598</td>    
</tr>    
<tr>
<th>Samsung R580</th>
<td>2795</td>
<td>6268</td>
<td>3350</td>
<td>3598</td>
</tr>
<tr>
<th>Samsung R480</th>
<td>2362</td>
<td>3350</td>
<td>2924</td>
<td>3598</td>
</tr>
</tbody>
</table><div id="container-comparison"></div>

CSS

table.tablesorter {
    font-family: arial;
    background-color: #cdcdcd;
    margin: 10px 0pt 5px;
    font-size: 8pt;
    width: 560px;
    text-align: left;
    color: #000000;
}
table.tablesorter thead th {
    background-color: #e6eeee;
    border: 1px solid #ffffff;
    padding: 4px;
}
table.tablesorter tbody th {
    background-color: #dadede;
    border: 1px solid #ffffff;
    padding: 4px;
}
table.tablesorter tbody td {
    color: #3d3d3d;
    padding: 4px;
    background-color: #ffffff;
}
table.tablesorter tbody tr.odd td {background-color:#f0f0f6;}

JavaScript

var charts = [],
    defaultOptions, options;

Highcharts.visualize = function(table, options) {

    // the categories
    options.xAxis.categories = [];

    $('tbody th', table).each(function(i) {
        options.xAxis.categories.push(this.innerHTML);
    });

    // the data series
    options.series = [];
    $('tr', table).each(function(i) {
        var tr = this;
        $('th, td', tr).each(function(j) {
            if (j > 0) { // skip first column
                if (i === 0) { // get the name and init the series
                    options.series[j - 1] = {
                        name: '   '+this.innerHTML,
                        data: []
                    };
                } else { // add values
                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                }
            }
        });
    });

    charts[charts.length] = new Highcharts.Chart(options);
};

defaultOptions = {
    chart:{
        renderTo: 'container-comparison',
        defaultSeriesType: 'column',
        width: 580
    }, credits: {
        enabled: 0
    },
          xAxis: {
         
         labels: {
           
            style: {
                font: 'normal 10px Verdana, sans-serif'
            }
         }
      },
        title: {
        text: '3DMark 2006'
    },
    yAxis: {
        title: {
            text: 'Puntaje (más es mejor)',
            margin: 50
        }
    },
     tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' + this.y + ' ' + this.x.toLowerCase();
        }
    },
    symbols: 'circle'
};



$(document).ready(function() {     Highcharts.visualize($('table#comparison'), defaultOptions); });