Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/index.html

Last active October 26, 2016 05:04
Show Gist options
  • Save auremoser/81ca965479b506625e4e0745ddb60546 to your computer and use it in GitHub Desktop.
Save auremoser/81ca965479b506625e4e0745ddb60546 to your computer and use it in GitHub Desktop.
Download ZIP
Highcharts w/ Table
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Fruits</title>
<!-- Load JQuery -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
<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>
<script>
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment