melody nelson
Posts: 10
Joined: Sat Apr 14, 2012 4:14 am

stacked column chart with data from a table [solved]

hi,

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 :

Image

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>
thanks in advance for your help

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/
(sorry for the typos, english is not my first language...)

Return to “Highcharts Usage”