CODEWITHSUNDEEP
javascriptd3.jssvgcharts
Krang
Krang

Reputation: 235

Using different data in the same donut chart

I'm trying to create a donut chart that displays inactiveStaff vs activeStaff, based on totalStaff.

Here's an example of the data I'm using 

var salesPeople = [
  { "region": "West",
    "toursCreated": 644,
    "totalStaff": 644,
    "activeStaff": 399,
    "inactiveStaff": 245
  }
];

I want to calculate the percentages of the activeStaff and inactiveStaff and display them within the donut chart.

I'm not sure how I can bind this kind of data to the pie variable, and then display it within the actual SVG I create. ie. 

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.salesPeople; });

I am familiar with building pie charts from one set of data, like the population of different countries — but I can't figure out how to create a pie chart from one object of data like this and show the activeStaff vs inactiveStaff in the same donut chart.

Here's a fiddle that creates a simple example of a donut chart that uses the kind of data i'm used to, and below it is the data I want to use but commented out — hopefully it makes it easier to understand what i'm trying to do.

Upvotes: 1

Views: 97

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

If I correctly understand your problem, you can do this:

var inactive = {"name": "inactive"};
inactive.population = salesPeople[0].inactiveStaff;

var active = {"name": "active"};
active.population = salesPeople[0].activeStaff;

var myArray = [];
myArray.push(inactive);
myArray.push(active);

render(myArray);

Here is the codepen: http://codepen.io/anon/pen/BKbXod?editors=0010

Upvotes: 1

Related Questions