Highcharts Grouped Column Chart with Multiple Groups?

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.

Answers


You can use plugin for grouped categories, here you can find it: https://github.com/blacklabel/grouped_categories


I had the same problem, and solved it usign plain HighCharts. It needs some magical datashuffling, but the result is fair.

See here: https://stackoverflow.com/a/31029535/461499


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'


To solve this problem, u need to stack on a variable that can't stack. Like: series :{

{ 
    name: 'boys', 
    stack: 1,
    data: [2, 6, 5,0] 
} 

{ 
    name: 'girls', 
    stack: 2,
    data: [0, 6, 1,3] 
} 

} No stacking with 1,2,3,4 e.t.c


Need Your Help

which is a better language (C++ or Python) for complex problem solving exercises (ex. Graphs)?

c++ python algorithm graph

I am trying to work on some problems and algorithms. I know C++ but a friend told me that it would be better if done with Python.As it would be much faster to develop and less time is spent in

antlr : C++ target with visual studio 2008

c++ antlr

the Antlr site is not clear on the subject of compiling a grammar for C++,