first, sorry for my english (I'm french)
I'm trying to create a stacked column chart with data from a HTML table
so far, it's not so bad but maybe I'm not using the data in the right "way" to show/use some other informations
in the image below, the rendering is exactly what I want but I would like to add 2 others informations :
- in the tooltip, I'd like to have the name of the column (Jane, Joe or John) instead of the name of the line (a year)
- and in the legend, I would like to mention the total for each column (total Jane, Joe, etc) without having to include/calculate this total in the HTML table
this is what I was able to do so far :
this is the code :
Code: Select all
<script type="text/javascript">
/**
* Visualize an HTML table using Highcharts. The top (horizontal) header
* is used for series names, and the left (vertical) header is used
* for category names. This function is based on jQuery.
* @param {Object} table The reference to the HTML table to visualize
* @param {Object} options Highcharts options
*/
Highcharts.visualize = function(table, options) {
// the categories
options.xAxis.categories = [];
$('tbody th', table).each( function(i) {
options.xAxis.categories.push(this.innerHTML);
});
// the data series
options.series = [];
$('tr', table).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));
}
}
});
});
var chart = new Highcharts.Chart(options);
}
// On document ready, call visualize on the datatable.
$(document).ready(function() {
var table = document.getElementById('lis1503_graphe1'),
options = {
chart: {
renderTo: 'graphe1',
defaultSeriesType: 'column'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
title: {
text: 'Chiffre d\'affaires ventes',
style : {
color: '#666',
fontSize: '14px',
fontWeight: 'bold'
}
},
xAxis: {
labels: {
/*rotation: -45,
align: 'right',*/
style: {
font: 'normal 13px'
}
}
},
yAxis: {
title: {
text: 'euros',
style: {
color: '#aaa',
fontWeight: 'bold'
}
}
},
credits: {
enabled: false
},
colors: ['#99CC00'],
tooltip: {
formatter: function() {
return '<strong>'+ this.x +'</strong><br/>'+
Highcharts.numberFormat(this.y, 0, ',', ' ') + ' '+ String.fromCharCode(0x20ac);
}
}
};
Highcharts.visualize(table, options);
});
</script>
<div id="graphe1" style="width: 500px; height: 400px; float:left; margin-right:100px;"></div>
<table id="lis1503_graphe1">
<thead>
<tr>
<th>Year</th>
<th>Jane (3000)</th>
<th>John (6200)</th>
<th>Joe (7900)</th>
</tr>
</thead>
<tbody>
<tr><th>2009</th><td>0</td><td>1000</td><td>1500</td></tr>
<tr><th>2010</th><td>0</td><td>1100</td><td>1200</td></tr>
<tr><th>2011</th><td>2000</td><td>2100</td><td>2200</td></tr>
<tr><th>2012</th><td>1000</td><td>2000</td><td>3000</td></tr>
</tbody>
</table>
PS : I'm not a "JS pro", so I'm using Highcharts with "guess" and sometimes luck...
EDIT : I found the infos I was looking for in this example (formatting the tooltip + stack.total)
http://jsfiddle.net/gh/get/jquery/1.7.2 ... n-stacked/