highcharts mouseover table
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 500px; height: 300px; margin: 0 auto"></div>
<div id="here_table">
</div>
CSS
.chart-table {
border-collapse: collapse;
}
.chart-table tr {
border-bottom: 1px solid grey;
}
.chart-table tr.selected {
background-color: lightblue;
}
.chart-table td {
padding: 10px;
}
JavaScript
$(function () {
var createTable = function($chart) {
console.log("$series = %o", $chart);
// remove the existing table
$('#here_table table').remove();
// create a table object
var table = $('<table></table>').addClass('chart-table');
// iterate the series object, create rows and columnts
$.each($chart.series.data, function( index, value ) {
var row = $('<tr></tr>').addClass('chart-row');
var col1 = $('<td></td>').text(value.name).appendTo(row);
var col2 = $('<td></td>').text(value.percentage).appendTo(row);
// mark the row of the clicked sector
if ($chart.name == value.name)
row.addClass('selected');
table.append(row);
});
// insert the table into DOM
$('#here_table').append(table);
};
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'pie'
},
colors: [
'#ff6600',
'#333300',
'#660000'],
credits: {
enabled: false
},
title: {
text: ''
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
point: {
events: {
click: function() {
createTable(this);
},
mouseOver: function () {
this.options.oldColor = this.color;
this.graphic.attr("fill", "black");
},
mouseOut: function () {
...