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

cheanney · 2016-06-27T14:43:29Z

Hi,

I have a composite stack bar chart. I want to show the count for each bar when a legend is mouseover. Now when I mouse over a legend, the bars are highlighted. I also want to add the barLabel for the highlighted layer.
Here is how the chart looks like:

Here is my code:
`

var composite = dc.compositeChart('#timepoint-chart');

```
var scat = dc.barChart(composite)
```
```
     .gap (65)
```

     .group(scatLevelByTimePoint, 'full scat').valueAccessor(function (d) {

```
         return d.value.s_full;
```
```
     })
```

     .stack(scatLevelByTimePoint, 'partial scat', function (d) {

```
         return d.value.s_partial;
```
```
     })
```

        .stack(scatLevelByTimePoint, 'empty scat', function (d) {

```
            return d.value.s_empty;
```
```
        })
```
```
        .title(function(d) {
```

        if (this.layer !== 'N' && this.layer !== 'Y'){

            var type = this.layer.split(" ")[0];

            var name = this.layer.split(" ")[1];

```
            var c;
```
```
            if (name == 'scat'){
```
```
                c = 's_';
```

                return ['full '+name+': ' + d.value['s_full'],'partial '+name+': ' + d.value['s_partial'], 'empty '+name+': ' + d.value['s_empty']].join('\n');

```
            }
```

            else if (name == 'citrate'){

```
                c  = 'c_';
```

                return ['full '+name+': ' + d.value['c_full'],'partial '+name+': '  + d.value['c_partial'],'empty '+name+': ' + d.value['c_empty']].join('\n');

```
            }
```
```
        }
```
```
        else{
```

            if (this.layer == 'Y' || this.layer == 'N')

                return ['Y: ' + d.value['y_pax'],'N: ' + d.value['n_pax']].join('\n');

```
            else
```

                return this.layer + ": "+d.value;

```
        }
```
```
    })
```

        .colors(d3.scale.ordinal().range(["#495090", "#4d5eef", "#8b95ec"]));

        //.colors(d3.scale.ordinal().range(colorbrewer.RdPu[9]))

```
var citrate = dc.barChart(composite)
```
```
        .gap (65)
```

        .group(citrateLevelByTimePoint, 'full citrate').valueAccessor(function (d) {

```
            return d.value.c_full;
```
```
        })
```

        .stack(citrateLevelByTimePoint, 'partial citrate', function (d) {

```
            return d.value.c_partial;
```
```
        })
```

        .stack(citrateLevelByTimePoint, 'empty citrate', function (d) {

```
            return d.value.c_empty;
```
```
        })
```
```
        .title(function(d) {
```

        if (this.layer !== 'N' && this.layer !== 'Y'){

            var type = this.layer.split(" ")[0];

            var name = this.layer.split(" ")[1];

```
            var c;
```
```
            if (name == 'scat'){
```
```
                c = 's_';
```

                return ['full '+name+': ' + d.value['s_full'],'partial '+name+': ' + d.value['s_partial'], 'empty '+name+': ' + d.value['s_empty']].join('\n');

```
            }
```

            else if (name == 'citrate'){

```
                c  = 'c_';
```

                return ['full '+name+': ' + d.value['c_full'],'partial '+name+': '  + d.value['c_partial'],'empty '+name+': ' + d.value['c_empty']].join('\n');

```
            }
```
```
        }
```
```
        else{
```

            if (this.layer == 'Y' || this.layer == 'N')

                return ['Y: ' + d.value['y_pax'],'N: ' + d.value['n_pax']].join('\n');

```
            else
```

                return this.layer + ": "+d.value;

```
        }
```
```
    })
```
```
        .renderLabel(true)
```
```
        .label(function(d){
```
```
            return d.value;
```
```
        })
```

        .colors(d3.scale.ordinal().range(colorbrewer.RdYlBu[9]));

        //.colors(d3.scale.ordinal().range(["#2c6852", " #51c097", "#6cfac6"]))

        //.colors(d3.scale.category20())

```
        ;
```
```
var pax = dc.barChart(composite)
```
```
    .gap (65)
```

    .colors(d3.scale.ordinal().range(colorbrewer.BrBG[6]))

    .group(paxByTimePoint, 'N').valueAccessor(function (d) {

```
        return d.value.n_pax;
```
```
    })
```
```
    .title(function(d) {
```

        if (this.layer !== 'N' && this.layer !== 'Y'){

            var type = this.layer.split(" ")[0];

            var name = this.layer.split(" ")[1];

```
            var c;
```
```
            if (name == 'scat'){
```
```
                c = 's_';
```

                return ['full '+name+': ' + d.value['s_full'],'partial '+name+': ' + d.value['s_partial'], 'empty '+name+': ' + d.value['s_empty']].join('\n');

```
            }
```

            else if (name == 'citrate'){

```
                c  = 'c_';
```

                return ['full '+name+': ' + d.value['c_full'],'partial '+name+': '  + d.value['c_partial'],'empty '+name+': ' + d.value['c_empty']].join('\n');

```
            }
```
```
        }
```
```
        else{
```

            if (this.layer == 'Y' || this.layer == 'N')

                return ['Y: ' + d.value['y_pax'],'N: ' + d.value['n_pax']].join('\n');

```
            else
```

               return this.layer + ": "+d.value;

```
       }
```
```
   })
```

   .stack(paxByTimePoint, 'Y', function (d) {

```
       return d.value.y_pax;
```
```
   });
```
```
var patient = dc.barChart(composite)
```
```
   .gap(65)
```
```
   .renderLabel(true)
```

   .group(timePointGroup, 'patient',function(d){

```
       return d.value;
```
```
   });
```
```
composite
```
```
   .width(1000) 
```
```
   .height(500)
```
```
   .renderLabel(true)
```
```
   .label(function(d){
```
```
       console.log('d = '+d);
```

       var keys = Object.keys(d.value);

```
       var total = 0;
```
```
       for (i=0;i<keys.length;i++){
```
```
           total+=d.value[keys[i]];
```
```
       }
```
```
       return total;
```
```
   })
```

   .margins({top: 50, right: 20, bottom: 50, left: 40})

```
   .dimension(timePointDimension)
```

    .legend(dc.legend().x(800).y(0).itemHeight(13).gap(5))

```
    .xAxisLabel('Time Point')
```
```
    .yAxisLabel('Count')
```

    .ordering(function(d) { return +d.key; })

```
    .x(d3.scale.ordinal())
```

    .y(d3.scale.linear().domain([0, 300]))

```
    .shareTitle(false)
```
```
    .xUnits(dc.units.ordinal)
```
```
    .group(scatLevelByTimePoint)
```
```
    .compose([
```
```
            scat,
```
```
            citrate,
```
```
            pax,
```
```
            //patient
```
```
   ])
```
```
   .on('renderlet',function (chart) {
```

       chart.selectAll("g.sub._0  .stack._0  rect.bar").attr("transform", "translate(" + -8 + ", 0)");

       chart.selectAll("g.sub._0  .stack._1  rect.bar").attr("transform", "translate(" + -8 + ", 0)");

       chart.selectAll("g.sub._0  .stack._2  rect.bar").attr("transform", "translate(" + -8 + ", 0)");

```
       //citrate
```

       chart.selectAll("g.sub._1  .stack._0  rect.bar").attr("transform", "translate(" + 6 + ", 0)");

       chart.selectAll("g.sub._1  .stack._1  rect.bar").attr("transform", "translate(" + 6 + ", 0)");

       chart.selectAll("g.sub._1  .stack._2  rect.bar").attr("transform", "translate(" + 6 + ", 0)");

       chart.selectAll("g.sub._2  .stack._0  rect.bar").attr("transform", "translate(" + 20 + ", 0)");

       chart.selectAll("g.sub._2  .stack._1  rect.bar").attr("transform", "translate(" + 20 + ", 0)");

       chart.selectAll("g.sub._3  .stack._0  rect.bar").attr("visibility", "hidden");

       chart.selectAll("g.sub._3  .stack._0  .barLabel").attr("visibility", "hidden");

       var legends = chart.selectAll("g.dc-legend .dc-legend-item");

       var labels = chart.selectAll("g .barLabel");

       console.log('size = '+labels[0].length);

       console.log('labels = '+JSON.stringify(labels,null,2));

```
       legends
```

       .on("mouseover.foo", function(d){

```
           var layername = d.name;
```

           var highligtedBars = chart.selectAll("rect.bar.highlight");

           var length = highligtedBars.length;

           console.log('size = '+length);

           highligtedBars[0].forEach(function (s, i) {

               console.log('data = '+JSON.stringify(s.**data**, null, 2));

               var layer = s.**data**.layer;

               if (layer == layername){

                   labels[0].text( function (s) { return "( " + s.x + ", " + s.y +" )"; });

```
               }
```
```
           });
```

           //chart.selectAll("g.sub._3  .stack._0  .barLabel").attr("visibility", "show");

```
           //}else{
```

           //  highligtedBars.text( function (d) { return "( " + d.x + ", " + d.y +" )"; });

```
           //}
```
```
       });
```
```
       legends
```

           .on("mouseout.foo", function(d){

               console.log('d = '+JSON.stringify(d));

               //chart.selectAll("rect.bar bartext").text("");

               labels.text( function (d) { return ""; });

```
           });
```
```
   });
```

`

The text was updated successfully, but these errors were encountered:

gordonwoodhull · 2016-06-29T22:19:14Z

This doesn't strike me as a feature request, more a one-off feature you can add with a renderlet, or maybe a tooltip.

Sorry, but the issue tracker is for reporting bugs and making enhancement requests, not for general support questions. Please ask on Stack Overflow with the dc.js tag, or on the user group, and we will be glad to help you there.

I am closing this.

(P.S. It pains me to see people going through these contortions for a grouped bar chart - could you please try PR #1043?)

cheanney · 2016-06-30T13:29:10Z

Thank you!!

Sorry for posting at the wrong place.

Thanks,

Anney

On Wed, Jun 29, 2016 at 6:19 PM, Gordon Woodhull notifications@github.com
wrote:

This doesn't strike me as a feature request, more a one-off feature you
can add with a renderlet, or maybe a tooltip
http://stackoverflow.com/questions/24664079/d3-tooltips-for-multiple-linked-dc-js-charts/24702554#24702554
.

Sorry, but the issue tracker is for reporting bugs and making enhancement
requests, not for general support questions. Please ask on Stack Overflow
http://stackoverflow.com with the dc.js tag, or on the user group
https://groups.google.com/forum/?fromgroups=#!forum/dc-js-user-group,
and we will be glad to help you there.

I am closing this.

(P.S. It pains me to see people going through these contortions for a
grouped bar chart - could you please try PR #1043
#1043?)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1172 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/AIYz3VFE1tPYQ9NyTwf_h6b_TVpmQv32ks5qQu9tgaJpZM4I_Ko6
.

wni5378 · 2021-05-07T11:15:20Z

This doesn't strike me as a feature request, more a one-off feature you can add with a renderlet, or maybe a tooltip.

Sorry, but the issue tracker is for reporting bugs and making enhancement requests, not for general support questions. Please ask on Stack Overflow with the dc.js tag, or on the user group, and we will be glad to help you there.

I am closing this.

(P.S. It pains me to see people going through these contortions for a grouped bar chart - could you please try PR #1043?)

Well there are some things that aren't obvious. It's not easy to navigate this library without having to endure 'contortions'.

gordonwoodhull · 2021-05-07T11:19:37Z

It's not easy to navigate this library without having to endure 'contortions'.

Yep that’s true! This library evolved and was not originally designed to do all it does.

If you’re looking for a self-consistent, well-thought-out charting library with many of the same features, I recommend checking out Vega Lite.

gordonwoodhull closed this as completed Jun 29, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cheanney commented Jun 27, 2016

gordonwoodhull commented Jun 29, 2016

cheanney commented Jun 30, 2016

wni5378 commented May 7, 2021

gordonwoodhull commented May 7, 2021 •

edited

Loading

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

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

Comments

cheanney commented Jun 27, 2016

gordonwoodhull commented Jun 29, 2016

cheanney commented Jun 30, 2016

wni5378 commented May 7, 2021

gordonwoodhull commented May 7, 2021 • edited Loading

gordonwoodhull commented May 7, 2021 •

edited

Loading