ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container0" style="height: 400px; width: 500px"></div>
<div id="container1" style="height: 400px; width: 500px"></div>
<div id="container2" style="width: 500px"></div>
<div id="container3" style="width: 500px"></div>
<div id="container4" style="width: 500px"></div>

<div id="tables">
<table id="datatable" class="renderme">
    <thead>
        <tr>
            <th></th>
            <th>Jane</th>
            <th>John</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <th>Plums</th>
            <td>5</td>
            <td>11</td>
        </tr>
        <tr>
            <th>Bananas</th>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <th>Oranges</th>
            <td>2</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

<table id="myTable" border="1" class="renderme">
    <thead>
        <tr>
            <th>Division</th>
            <th>Standard Deviation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Marker</th>
            <td>12</td>
        </tr>
        <tr>
            <th>Assay Plate</th>
            <td>8</td>
        </tr>
        <tr>
            <th>Field Plate</th>
            <td>4</td>
        </tr>
    </tbody>
</table> 
    
<table id="srcTable" border="1">
    <thead>
        <tr>
            <th>Boobs</th>
            <th>Guy</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>bibity</td>
            <td>Jane</td>
        </tr>
        <tr>
            <td>bobbity</td>
            <td>John</td>
        </tr>
        <tr>
            <td>boobity</td>
            <td>Jane</td>
        </tr>
        <tr>
            <td>blurbity</td>
            <td>John</td>
        </tr>
   ...

JavaScript

$('#datatable').data({"tableName":"datatable", "chart":"myChart", "container":"container0", "chartTitle":"Chart One", "YAxisLable":"Percent Not Found"});

$('#myTable').data({"tableName":"myTable", "chart":"myChart", "container":"container1", "chartTitle":"Chart Two", "YAxisLable":"Your Mom''s Not Found"});


$('.renderme').each(function(){
    
var tableName = this.id;
var tableElement = document.getElementById(tableName);
var chart = $('table#' + tableName).data("chart");
var container = $('table#' + tableName).data("container");
var chartTitle = $('table#' + tableName).data("chartTitle");
var YAxisLable = $('table#' + tableName).data("YAxisLable");


Highcharts.visualize = function(tableElement, options) {
 // the categories
 options.xAxis.categories = [];
 $('tbody th', tableElement).each( function(i) {
     options.xAxis.categories.push(this.innerHTML);
 });
 
// the data series
 options.series = [];
 $('tr', tableElement).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)); 
          }
       }
    });
 });
 
 chart = new Highcharts.Chart(options);
}
 
options = {
       chart: {
          renderTo: container,
          defaultSeriesType: 'column'
       },
       plotOptions: {
       column: {
          stacking: 'normal'
          }
       },
       title: {
          text: chartTitle
       },
       xAxis: {
       }, 
       yAxis: {
          title: {
             text: YAxisLable
          },
          max: 100
       },
       exporting: {
         enabled: true
       },
       navigation: {
         buttonOptions: {
           verticalAlign: 'bottom',
           y: -20
         }
       }, 
      ...