CODEWITHSUNDEEP
javascriptd3.jsdc.js
user124123
user124123

Reputation: 1683

Creating stacked barchart in dc js

I am trying to make a stacked barchart in dc js using a group split by name and a date dimension

a date dimension:

var date_dim = ndx.dimension(function(d) { return  d.date;});

and some numerical data that is grouped by a name

var names_grouping = names_dim.group().reduceSum(function(d){
  return d.dep_var
})

I have previously used the same grouping, and a grouping by quarters to successfully produce a pie chart showing share of the numerical data by name :

enter image description here

Code to produce the pie chart:

var namechart = dc.pieChart('#sales-by-nameplate')
namechart 
    .width(200)
    .height(200)
    .radius(80)
    .innerRadius(30)
    .dimension(names_dim)
    .group(name_grouping)
    .renderLabel(false);

names_dim is this:

var names_dim = ndx.dimension(function(d) { return d.name; });

Given that the data is already grouped by name, is it possible to create a stacked area chart using the existing name group and date dimension?

Upvotes: 0

Views: 90

Answers (1)

FizBack
FizBack

Reputation: 33

You mean barchart right (last sentence) ?

You can use the stack method but I guess you want to group by date_dim instead :

barChart
   .dimension(date_dim)
   .group(date_dim.group().reduceSum(function(d) { return d.names_dim === 'Name 1' ? 1 : 0; }), "Name 1")
   .stack(date_dim.group().reduceSum(function(d) { return d.names_dim === 'Name 2' ? 1 : 0; }), "Name 2")
   .stack(date_dim.group().reduceSum(function(d) { return d.names_dim === 'Name 3' ? 1 : 0; }), "Name 3")

With as many stacks as the number of different names.

Upvotes: 2

Related Questions