Grouped bar chart #1043

gazal-k · 2015-11-20T08:35:08Z

Modification of #679

Hopefully I have resolved most of the conflicts with dc.js mainline.
Resolved a few issue in rendering multi/grouped bar chart.
I've added some basic tests for multi/grouped bar chart.

Pending:

not sure what functionalities expected of bar charts in general is missing in the multi/grouped version.
multi/grouped row chart.

Please feel free to suggest changes or fork this and fix further.

Conflicts: src/bar-chart.js src/composite-chart.js src/coordinate-grid-mixin.js src/legend.js src/line-chart.js src/margin-mixin.js src/pie-chart.js src/row-chart.js src/series-chart.js

gazal-k · 2015-11-20T10:32:00Z

src/multigroup-mixin.js

+        _chart.groups().forEach(function (g, k) {
+            var item = {
+                chart:  _chart,
+                name:   g.title,


this approach doesn't seem consistent. the legend name for the components will appear only if each group has a property 'title'

gordonwoodhull · 2015-11-20T11:38:37Z

Oh wow, now we have two competing versions of grouped bars. See #984. This is going to get interesting.

The issue I have with this one, if I remember correctly, is that @wssbck made a ton of unrelated changes in this branch. Enough so that at the time, I couldn't make heads or tails of it.

However, this is less of an issue now that you've fixed the tests, @gazal-k. Thank you! Since you've reviewed it, can you summarize what the other changes are?

gazal-k · 2015-11-20T12:02:29Z

@gordonwoodhull I didn't really know about #984. I originally had a hack which involved some transform = translate() style post render tricks to get multi/grouped bar charts functionality within composite chart. Then I saw the discussion between you and @wssbck about how its probably not the best idea to do grouped bar within composite.

gazal-k · 2015-11-20T12:07:28Z

I also had a hard time figuring out all of the code here. I don't have a comprehensive idea of how the framework gets things done. I just meddled with it.

This is what I understand about it:

There's a multigroup-mixin which abstracts some functionality for grouped bar charts and row charts.
The grouped bar chart works for the most part after some tweaking; I was able to write some basic tests.
Yet to check the grouped row chart

If you can please check some inline notes I have added and help me, that'd be really awesome.

avoiding the new groups property chart data function from stack mixin tweaked to get grouping function no separate legendables function required in group mixin

gazal-k · 2015-11-21T13:19:21Z

@gordonwoodhull I did take some inspiration from #984 to make the code cleaner.

With the current approach I was able to fix title rendering, and labeling groups became more consistent.
I liked how @alan-unravel was able to get the functionality within dc.barChart.

gazal-k · 2015-11-21T16:24:05Z

@gordonwoodhull I think I finally figured out the heads and tails of it 😄

Got the grouped bar chart functionality to work within bar chart code.

gazal-k · 2015-11-21T16:29:59Z

src/bar-chart.js

+                layer.values.forEach(function (value) {
+                    value.y0 = 0;
+                });
+            });


not sure whether this is the best approach to get this done

gazal-k · 2015-11-22T07:25:10Z

Fixes #558

gazal-k · 2015-11-22T07:58:11Z

got to get centerBar to work properly when groupBars is set.

Another thing I noticed, with ordinal x axis, the bars seem to already be centered (with single group, stacks both vertical and horizontal) and applying centerBar(true) seems to break it. How should this be ideally?

ignoring centerBar for ordinal charts

gazal-k · 2015-11-23T05:24:56Z

src/bar-chart.js

+                    x += layerIndex * (_barWidth + _gap);
+                    x += _gap / 2;
+                }
+                if (_centerBar && !_chart.isOrdinal()) {


this check; _chart.isOrdinal() affects bar charts in general.

I saw that bar charts with ordinal x axis are already centered around axis points. So setting centerBar(true) only seems to offset it incorrectly.

Please see if this is fine

madslundgaard · 2016-01-06T12:12:23Z

Dear @gazal-k and @gordonwoodhull,
How far would You think this is from being submitted to development branch. I am working on a project where grouped bar chart is a critical chart type (for version/scenario comparison).

I would like to help on the issue if you believe that additional input/testing is needed (basic JS,D3,DC experience).

gazal-k · 2016-01-06T12:57:01Z

@madslundgaard you needn't wait for this PR to get merged if u want to use this immediately. U can create a fork of dcjs and merge my branch to yours and use that instead of referring to dcjs base fork.

If you are using bower, the dependency can be something like: madslundgaard/dc.js#develop

gordonwoodhull · 2016-01-06T15:40:22Z

Yes, @madslundgaard, in fact testing the feature and providing feedback, and code review if you're up for it, is the best way to help it get into dc.js. Adding more tests is always welcome too!

Note that @mtraynham and others are discussing adding another mixin to provide a uniform interface for "extra dimensions" like this one. I don't think it will change the external interface too much, just help with the code organization.

slackhideo · 2016-06-28T19:08:41Z

This versions of grouped bars works well.
Thanks, @gazal-k and @gordonwoodhull for your effort.

I noticed that the ordering and barPadding functions do not work together with groupBars. Is there a way I can have grouped bars working with these two?

Thanks.

gordonwoodhull · 2016-06-28T19:18:13Z

Hi @slackhideo, thanks for your review. Have you also compared #984?

I'll let @gazal-k speak to whether he has time to add ordering and barPadding support.

slackhideo · 2016-06-28T20:58:08Z

Hi, @gordonwoodhull. Thanks for the reply.

Actually I was wrong about the ordering support. It does support this function (sorry!).
Instead of using chart.ordering(function(d) { return -d.value; }) I needed to use chart.ordering(function(d) { return -d.value['1']; }) (to order according to the layer '1').

But I'm afraid I have no idea how to tackle the barPadding support.

gordonwoodhull · 2016-06-28T22:56:31Z

@slackhideo, have you also tried #984?

slackhideo · 2016-06-29T18:42:51Z

Oh, sorry @gordonwoodhull, I forgot that part.
Now I tested #984 and found that it supports barPadding.
Thanks for the suggestion.

I've chosen this implemention because, judging by your example, this version looks better to me. The groups are more aligned with the X-axis' ticks (turning off/on centerBar didn't help here) and the spacing between bars in the same group seems more pleasant. I don't know if these things are easily changeable.
I guess both versions have their strengths and shortcomings.

gazal-k · 2016-06-29T18:55:02Z

@gordonwoodhull @slackhideo sorry, its been quite a while since I've gotten my hands dirty with dc.js. I've been and still am tied up with some other work. I'd love to contribute when I get some free time. But until then, sorry 😞

gordonwoodhull · 2016-06-29T19:12:25Z

Thanks @slackhideo for your review. That's very helpful.

And thanks @gazal-k for all your contributions! Great stuff.

I think the issue might be that we need two levels of barPadding for this chart. But my memory is a bit fuzzy. I'll try to take a look when I can.

slackhideo · 2016-06-29T21:51:12Z

Thank you, @gordonwoodhull and @gazal-k. Your work is amazing, really.
It's just some minor things that can be improved (well, almost everything can be improved), but overall is a stunning library and this grouped bar feature is very useful.
Your hard work is appreciated!

frankisans · 2016-08-22T12:22:15Z

Hi @gordonwoodhull I have check both branches on a composite char with a line chart and a grouped bar chart. I prefer gazak branch because no gap on same group bars:

gazak:

kavanagh:

I use another control to change the focus dinamically but the bars overlap the yAxis:

Seems not a problem with grouped bar chart implementation because gets the same result with normal stacked bar. I cannot use padding because elasticX is false for focus to work.

suntong · 2017-01-12T14:03:37Z

All checks have passed
This branch has no conflicts with the base branch

Waiting for the merge...

gordonwoodhull · 2017-01-12T15:12:40Z

Thanks @suntong, I agree this is very close to being ready to merge (and it will be the first thing to go into 2.1). However, there are a still a few questions raised by the author which I need to address, as well as manual code review and testing.

Please go ahead and use the version in this branch:
https://github.com/dc-js/dc.js/tree/gazal-grouped-bar

I've pulled the latest changes from develop, so this has all of the fixes from dc.js 2.0.

I apologize for the long turn-around but unfortunately this is not my full-time job (however much I wish it were).

EDIT: direct rawgit link to the library:
https://rawgit.com/dc-js/dc.js/gazal-grouped-bar/dc.js

suntong · 2017-01-12T15:16:17Z

Definitely, totally understand. I was just trying to say something meaningful in order to subscribe to this thread. Take your time.

parliament718 · 2017-03-29T20:34:10Z

@gordonwoodhull Could you by any chance merge develop again? 57 commits and almost 3 months behind and Im having issues integrating @types/dc, which follows this develop branch.

fatangare · 2017-05-02T16:54:38Z

Does it work with time scale or only with ordinal?

Frozenlock · 2017-10-19T21:50:24Z

Very interested in using grouped bar chart!

Is there still a strong possibility of it being added soon in the official library? In other words, is it wise to start building on top of this?

gordonwoodhull · 2017-10-19T21:57:08Z

@fatangare, because it build on the stacked chart, it will work wherever that does. So yes.

@Frozenlock, yes, I hope so. This is one of a few major PRs ready to merge before the big port to d3v4.

OivalfMarques · 2017-12-11T20:58:06Z

This solution does not allow having bar chart multiple series and staked at the same time, but even so this solution moves away from the rest of the library. What I propose is that instead of looking at the number of stacks, start looking at the number of bar chart, if this is a composite chart.

Follow the implementation link on the latest version of this library

https://plnkr.co/edit/V99X09LPMNc0V7qP3jum?p=preview

I'm waiting for an feedback

Thank you for your time.

gordonwoodhull · 2017-12-11T21:01:28Z

Hi @OivalfMarques, do you mean that you have an implementation of stacked and grouped charts? That would of course be fantastic.

What do you mean by "implementation link" - this looks like it's a demo of composite + stacked charts but nothing grouped?

Frozenlock · 2017-12-11T21:29:38Z

@gordonwoodhull This indeed looks like an implementation of grouped and stacked charts, which is amazing. (You can see that the gap is a little wider between groups.)

@OivalfMarques Amazing work! Do you have a fork available with your changes? PR?

OivalfMarques · 2017-12-12T09:20:47Z

hi @Frozenlock yes i have. So you will do merge?

gazal-k · 2023-02-14T00:14:00Z

This is most likely unnecessary at this point.

wssbck and others added 7 commits August 20, 2014 21:47

Cumulative changes for a pull request

2156fa4

Merge branch 'develop' into cumulative_changes

f591144

Conflicts: src/bar-chart.js src/composite-chart.js src/coordinate-grid-mixin.js src/legend.js src/line-chart.js src/margin-mixin.js src/pie-chart.js src/row-chart.js src/series-chart.js

fixing styling errors post merge

f709bd8

fixing functionality and lint issues

7c8bcca

multi-bar spec

8fe204b

reverting file mode change

147f1db

adding the new src and spec files to grunt config

8242e28

gazal-k reviewed Nov 20, 2015
View reviewed changes

relying more on functionality provided by stack mixin

904909f

avoiding the new groups property chart data function from stack mixin tweaked to get grouping function no separate legendables function required in group mixin

gazal-k added 3 commits November 21, 2015 21:19

reducing differences with barChart to see if integration is possible

fd6ea4c

extracted grouped bar chart functionality and put it into dc.barChart

03e1f77

just focusing on grouped bar charts for now

ce367b4

gazal-k changed the title ~~[WIP] Multi/grouped bar and row chart~~ Grouped bar chart Nov 21, 2015

lint fixes

be5012c

gazal-k reviewed Nov 21, 2015
View reviewed changes

gazal-k added 2 commits November 21, 2015 22:38

correcting type in jsdoc

6131461

bar labeling changes for grouped bar

40b6324

bar centering done for grouped bars

030b8d7

ignoring centerBar for ordinal charts

gazal-k reviewed Nov 23, 2015
View reviewed changes

gordonwoodhull mentioned this pull request Jun 29, 2016

how to add a barLabel for composite stack bar charts? #1172

Closed

gordonwoodhull mentioned this pull request Oct 14, 2016

Gazal grouped bar #1212

Closed

gordonwoodhull modified the milestone: v2.1 Dec 2, 2016

OivalfMarques mentioned this pull request Dec 12, 2017

Grouped and Stacked Bars #1356

Closed

jaklub mentioned this pull request Jul 6, 2018

Grouped and Stacked Bars2 #1459

Open

jaklub mentioned this pull request Jul 17, 2018

Grouped or Stacked bar chart with sensor bars #1470

Open

gazal-k closed this Feb 14, 2023

gazal-k deleted the multi-bar-row-chart branch February 14, 2023 00:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grouped bar chart #1043

Grouped bar chart #1043

gazal-k commented Nov 20, 2015

gazal-k Nov 20, 2015

gordonwoodhull commented Nov 20, 2015

gazal-k commented Nov 20, 2015

gazal-k commented Nov 20, 2015

gazal-k commented Nov 21, 2015

gazal-k commented Nov 21, 2015

gazal-k Nov 21, 2015

gazal-k commented Nov 22, 2015

gazal-k commented Nov 22, 2015

gazal-k Nov 23, 2015

madslundgaard commented Jan 6, 2016

gazal-k commented Jan 6, 2016

gordonwoodhull commented Jan 6, 2016

slackhideo commented Jun 28, 2016

gordonwoodhull commented Jun 28, 2016

slackhideo commented Jun 28, 2016

gordonwoodhull commented Jun 28, 2016

slackhideo commented Jun 29, 2016

gazal-k commented Jun 29, 2016

gordonwoodhull commented Jun 29, 2016

slackhideo commented Jun 29, 2016

frankisans commented Aug 22, 2016

suntong commented Jan 12, 2017

gordonwoodhull commented Jan 12, 2017 •

edited

Loading

suntong commented Jan 12, 2017

parliament718 commented Mar 29, 2017

fatangare commented May 2, 2017

Frozenlock commented Oct 19, 2017

gordonwoodhull commented Oct 19, 2017

OivalfMarques commented Dec 11, 2017

gordonwoodhull commented Dec 11, 2017 •

edited

Loading

Frozenlock commented Dec 11, 2017

OivalfMarques commented Dec 12, 2017 •

edited

Loading

gazal-k commented Feb 14, 2023

Grouped bar chart #1043

Grouped bar chart #1043

Conversation

gazal-k commented Nov 20, 2015

gazal-k Nov 20, 2015

Choose a reason for hiding this comment

gordonwoodhull commented Nov 20, 2015

gazal-k commented Nov 20, 2015

gazal-k commented Nov 20, 2015

gazal-k commented Nov 21, 2015

gazal-k commented Nov 21, 2015

gazal-k Nov 21, 2015

Choose a reason for hiding this comment

gazal-k commented Nov 22, 2015

gazal-k commented Nov 22, 2015

gazal-k Nov 23, 2015

Choose a reason for hiding this comment

madslundgaard commented Jan 6, 2016

gazal-k commented Jan 6, 2016

gordonwoodhull commented Jan 6, 2016

slackhideo commented Jun 28, 2016

gordonwoodhull commented Jun 28, 2016

slackhideo commented Jun 28, 2016

gordonwoodhull commented Jun 28, 2016

slackhideo commented Jun 29, 2016

gazal-k commented Jun 29, 2016

gordonwoodhull commented Jun 29, 2016

slackhideo commented Jun 29, 2016

frankisans commented Aug 22, 2016

suntong commented Jan 12, 2017

gordonwoodhull commented Jan 12, 2017 • edited Loading

suntong commented Jan 12, 2017

parliament718 commented Mar 29, 2017

fatangare commented May 2, 2017

Frozenlock commented Oct 19, 2017

gordonwoodhull commented Oct 19, 2017

OivalfMarques commented Dec 11, 2017

gordonwoodhull commented Dec 11, 2017 • edited Loading

Frozenlock commented Dec 11, 2017

OivalfMarques commented Dec 12, 2017 • edited Loading

gazal-k commented Feb 14, 2023

gordonwoodhull commented Jan 12, 2017 •

edited

Loading

gordonwoodhull commented Dec 11, 2017 •

edited

Loading

OivalfMarques commented Dec 12, 2017 •

edited

Loading