Highcharts Table plugin
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
<script src="https://www.nghs.com/includes/js/highcharts/exporting.js"></script>Below is a table chart that is converted into a Highcharts jQuery table using a js plugin.
<br/>
<br/>
<!-- start CHART TABLE -->
<table class="highchart" data-graph-container-before="1" data-graph-type="column" style="" data-graph-datalabels-enabled="1" data-graph-color-1="#CACACA" data-graph-color-2="#B7BF1C" data-graph-subtitle-text="Lower numbers are better.">
<caption>Acute Myocardial Infarction (AMI)</caption>
<thead>
<tr>
<th></th>
<th data-graph-stack-group="1">Group</th>
<th data-graph-stack-group="1">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>U.S. Hospital Average</td>
<td data-graph-stack-group="1">15.2</td>
<td>15.2</td>
</tr>
<tr>
<td>NGMC</td>
<td data-graph-stack-group="1">14.2</td>
<td>15.2</td>
</tr>
</tbody>
</table>
<!-- end CHART TABLE -->
<!-- start CHART TABLE -->
<table class="highchart" data-graph-container-before="1" data-graph-type="column" style="" data-graph-datalabels-enabled="1" data-graph-color-1="#CACACA" data-graph-color-2="#B7BF1C" data-graph-legend-disabled="1" data-graph-subtitle-text="Lower numbers are better.">
<caption>Heart Failure (HF)</caption>
<thead>
<tr>
<th>Group</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>U.S. Hospital Average</td>
<td>11.7</td>
</tr>
<tr>
<td>NGMC</td>
<td>11.1</td>
</tr>
</tbody>
</table>
<!-- end CHART TABLE -->
<!-- start CHART TABLE -->
<table class="highchart" data-graph-container-before="1" data-graph-type="column" style=""...
CSS
body {
padding: 20px;
}
table.highchart {
width: 100%;
display: none;
}
table.highchart caption {
text-align: center;
}
table.highchart th, table.highchart caption {
font-weight: bold;
}
.highcharts-graph {
border-bottom: 10px solid #EFEFEF;
padding: 70px 0px;
position: relative;
}