Menu
I'm looking to create a grouped column chart in Highcharts, except with multiple groups in a given day. The graph would look like this http://www.highcharts.com/demo/column-stacked-and-grouped (from this forum question http://highslide.com/forum/viewtopic.php?f=9&t=19575), except with each stacked bar replaced with a grouped set of columns (non-stacked). We would therefore see multiple groups of columns per day, the idea being that each group corresponds to one user. Does anyone know how to do this?
edit: Here's a jsfiddle I've found http://jsfiddle.net/pMA2H/1/
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>ElementStacks - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<script type='text/javascript' src="http://highcharts.com/js/testing.js"></script>
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
/*
Data is:
Gross Amount Cost Amount
Services Australia 20 10
Germany 30 15
Manufacturing Australia 35 17
Germany 25 12
----
Would like to be able define my categories hierarchically - example:
xAxis: [{
categories: [{
name: 'Services'
children: ['Australia', 'Germany']
},{
name: 'Manufacturing'
children: ['Australia', 'Germany']
}]
}]
and get a result similar to what is fudged up by using the renderer on the right.
*/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: [{
categories: ['Australia', 'Germany', 'Australia', 'Germany'],
labels: {
y: 40
}
}],
legend: {
margin: 40
},
series: [{
name: 'Gross',
data: [['Services', 20],['Services',30],['Manufacturing', 35],['Manufacturing', 25]]
},{
name: 'Cost',
data: [['Services', 10],['Services',15],['Manufacturing', 17],['Manufacturing', 13]]
}]
}, function(chart){
$('.highcharts-axis:first > text').each(function() {
this.setAttribute('y', parseInt(this.getAttribute('y')) - 20)
});
var text1 = chart.renderer.text("Services", 150, 340).add();
var text2 = chart.renderer.text("Manufacturing", 350, 340).add();
});
});//]]>
</script>
</head>
<body>
<div id="container" style="height: 400px; width: 500px"></div>
</body>
</html>
from the thread here http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments. The code for the x-axis increments is a bit tedious though, because you have to manually add each increment and include its spacing to make sure your data points line up. I've done graphs previously where you can instead specify a pointStart and pointInterval for dates. If someone knows of a more elegant solution, that'd be great.
698
asked Mar 23 '26 08:03
You can use plugin for grouped categories, here you can find it: https://github.com/blacklabel/grouped_categories
103
Unless there is something else you are not explaining, what you are asking for is the default behavior of a grouped column chart:
http://jsfiddle.net/jlbriggs/TfvGp/
.
all that is required to achieve this is multiple data series and a type of 'column'
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
