CODEWITHSUNDEEP
javascriptarraysjsond3.jsgraph
Wasif Kirmani
Wasif Kirmani

Reputation: 1331

D3.js - Create multi-ring donut chart dataset from JSON

I have been trying to create a multi-ring donut chart by using following json.

var dataset = {
        weeks: [
            {"displayName": "MUW", "name": "DEF", "score": 5},
            {"displayName": "DEFA", "name": "DEF", "score": 35}
        ],
        trimester: [
            {"displayName": "MUsW", "name": "DEsF", "score": 25},
            {"displayName": "DEFdA", "name": "DEdF", "score": 5}
        ]
    };

But, it is not considering it as a proper dataset for D3's donut chart.

var gs = svg.selectAll("g")
    .data(d3.values(dataset))
    .enter()
    .append("g")
    .attr("class", "arc");

As I want to create two rings from this dataset one is on the top and the other one as an inner donut. And want to display the name on each click of donut slice.

http://jsfiddle.net/pcr3ogt4/ - code example.

Upvotes: 2

Views: 1432

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You are setting the data like this 

.data(d3.values(dataset))

since your data set has two arrays., it does not mean it will draw two donut chart.

You will need to specify explicitly which of the two array will form the inner donut chart and which one outer donut chart.

For 1st donut chart you have to set the data like this:

.data(pie(dataset.weeks))//dataset for weeks

For 2nd donut chart you have to set the data like this:

.data(pie(dataset.trimester))//dataset for trimesters.

In your case you define the fie function like this:

var pie = d3.layout.pie()
    .sort(null);

It should have been like this the value function is missing which tells which value will form the criteria for the pie slice.

 var pie = d3.layout.pie()
            .sort(null).value(function (d) {
            return d.score;//since score is the parameter for the pie
        });

Working code here.

Note on hover the text will be displayed.

Upvotes: 1

Related Questions