CODEWITHSUNDEEP
dc.js
lafeber
lafeber

Reputation: 2780

working numberDisplay with dc.js

I'm trying to get the numberDisplay working together with a pieChart and a lineChart. I'm doing something wrong, but what?

See http://jsfiddle.net/1nf3d8kc/3/ for the code below.

I'm trying to display the amount in the numberDisplay. The number should update when the pieChart is clicked.

var parseDate = d3.time.format("%Y-%m-%d").parse;

var json = [
{
  data: {
  amount: 450,
  total_amount: 97.331,
  unit_amount: 12.977,
  date: "2013-12-30"
  },
  company: {
  id: 4,
  name: "KLM"
  }
},
{
  data: {
  amount: 960,
  total_amount: 176.550,
  unit_amount: 22.069,
  date: "2014-01-06"
  },
  company: {
  id: 4,
  name: "KLM"
  }
},
  {
  data: {
  amount: 510,
  total_amount: 93.793,
  unit_amount: 11.034,
  date: "2014-01-15"
  },
  company: {
  id: 1,
  name: "NS"
  }
},
  {
  data: {
  amount: 960,
  total_amount: 207.640,
  unit_amount: 25.955,
  date: "2014-01-22"
  },
  company: {
  id: 1,
  name: "NS"
  }
},
  {
  data: {
  amount: 900,
  total_amount: 194.6626,
  unit_amount: 25.955,
  date: "2014-02-12"
  },
  company: {
  id: 1,
  name: "NS"
  }
}
];

var startDate = new Date(json[0].data.date);
var endDate = new Date(json[json.length-1].data.date);

json.forEach(function(d) {
  d.data.date = parseDate(d.data.date);
});

//  Set up dimensions and groups
var ndx = crossfilter(json),
  date = ndx.dimension(function(d) { return d.data.date; }),
  sumAmount = date.group().reduceSum(function(d) {return d.data.amount;}),

  companyDimension = ndx.dimension(function(d) {
    return d.company.name;
  }),
  companyDimensionGroup = companyDimension.group(function(d) {return d;})
  ;

// Charts
var numberDisplay = dc.numberDisplay('#number-chart');
numberDisplay.group(sumAmount)
  .formatNumber(d3.format(".g"))
  .valueAccessor( function(d) { return d.value } );

var chart = dc.lineChart("#date-chart");
chart.dimension(date)
  .width(500)
  .group(sumAmount, 'Amount')
  .elasticY(true)
  .round(d3.time.day.round)
  .x(d3.time.scale()
    .domain([startDate, endDate])
  )
  .filter([startDate, endDate]);

var pieChart = dc.pieChart("#pie-chart");
pieChart.dimension(companyDimension)
  .group(companyDimensionGroup)
  .width(300)
  .height(300)
  .slicesCap(4)
  .innerRadius(30);

dc.renderAll();

Upvotes: 2

Views: 3086

Answers (1)

Gordon
Gordon

Reputation: 20120

I think you mean that you want to display the sum of all values in the date chart, in which case you need another group using date.groupAll():

sumAllAmount = date.groupAll().reduceSum(function(d) {return d.data.amount;}),

An odd quirk of the number display is that even though it supports the .value() method of the special groupAll object, it still expects to apply the valueAccessor to the returned value... which doesn't make any sense because groupAll.value() does not ever return a key/value pair.

So you need to specify the identity accessor to get this to work:

numberDisplay.group(sumAllAmount)
  .formatNumber(d3.format(".g"))
  .valueAccessor( function(d) { return d; } );

updated fiddle: http://jsfiddle.net/gordonwoodhull/6apx1rk1/3/

Upvotes: 4

Related Questions