1

I'm trying to make a Pie chart that shows each months expenses on different category.Like,when I give January ,the slices should display Grocery,fuel,rent etc.How can I make it with this data?

code

function show_monthly_exp_distribution(ndx) {
    var dim = ndx.dimension(dc.pluck('Month'));
    var group = dim.group().reduceCount(dc.pluck());

    dc.pieChart("#exp-pie")
      .height(300)
      .width(800)
      .radius(70)
      .transitionDuration(1000)
      .dimension(dim)
      .group(group)
      .legend(dc.legend().gap(7));
  }

csv data

Month,Utility Bills,Groceries,Dining Out,Fuel,Rent,totalexp
January,100,500,100,90,1000,1400
February,120,450,50,120,1000,1740
March,130,550,120,60,1000,1860
April,100,300,80,150,1000,1630
May,90,600,75,80,1000,1845
June,130,560,150,90,1100,2030
July,70,610,120,100,1100,2000
August,120,459,100,80,1100,1859
September,140,432,80,90,1100,1842
October,60,456,110,110,1100,1836
November,80,487,60,180,1200,2007
December,150,390,210,100,1200,2050
Sarah
  • 35
  • 3
  • So your question is "How to use `dc.pieChart`?"`? – U. Windl Jun 09 '19 at 22:36
  • Please state what you are trying to do or what is going wrong - just pasting your code and data doesn't give us much to go on. If the question is "why are all the slices the same size?", the answer is 1) `dc.pluck()` takes the name of the field to extract (e.g. `'totalexp'`), and 2) you probably want `reduceSum` not reduceCount. [Here's a working fiddle with your code/data](https://jsfiddle.net/gordonwoodhull/1mtdgs04/17/). – Gordon Jun 10 '19 at 20:54
  • Thanks for adding some detail to your question! – Gordon Jun 13 '19 at 19:20
  • The tricky thing here is that crossfilter ordinarily bins, filters, and aggregates by row. If you want to show the columns as separate items, you end up doing extra work in order to transform the data. [This question and answer shows how to do that](https://stackoverflow.com/questions/24737277/dc-js-how-to-create-a-row-chart-from-multiple-columns) - it's essentially the same problem for a row or pie chart. Additionally, the chart won't filter naturally, for the same reasons. All in all, dc.js might not be the best tool for the job, but you can make it work. – Gordon Jun 13 '19 at 19:26
  • If you can specify your data as `Month,Type,Value` ("flattening the data") you'll have a much easier time with crossfilter. – Gordon Jun 14 '19 at 09:46

1 Answers1

1

As Gordon suggested, start by changing the format of your data so you have only one datapoint per row. If you can't change the data on the csv, you can do it in js (code not tested, might work directly... or not ;)

var data = [];
var type = "Utility Bills,Groceries,Dining Out,Fuel,Rent".split(",");
d3.csv("yourcsv", function(d) {
  type.forEach(function(c){
    data.push({month:d.month,type:c,amount:+d[c]});
  });
  return null; //doesn't matter what you return, discard the initial csv anyway)
}).then (function(dummy){
   ndx=crossfilter(data);      
});

Once you have done that, you can easily have one graph to filter the month (or selectMenu graph) and your pieChart

Xavier
  • 1,157
  • 9
  • 29