Highcharts Column Chart with HTML Table Data
$(document).ready(function() {
var data = {
table: 'datatable'
};
var chart = {
type: 'column'
};
var title = {
text: 'Reading Data from an HTML Table on the Web Page'
};
var yAxis = {
allowDecimals: false,
title: {
text: 'Units'
}
};
var tooltip = {
formatter: function () {
return '
' + this.series.name + '' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
};
var credits = {
enabled: false
};
var json = {};
json.chart = chart;
json.title = title;
json.data = data;
json.yAxis = yAxis;
json.credits = credits;
json.tooltip = tooltip;
$('#container').highcharts(json);
});
| Jane | John |
|---|
| Apples | 3 | 4 |
|---|
| Pears | 2 | 0 |
|---|
| Plums | 5 | 11 |
|---|
| Bananas | 1 | 1 |
|---|
| Oranges | 2 | 4 |
|---|
Try it yourself »
The output of the above example is:
Highcharts Column Chart
Highcharts Bar Chart
Highcharts Pie Chart
YouTip