CODEWITHSUNDEEP
d3.js
3gwebtrain
3gwebtrain

Reputation: 15303

How to fill a single value in the 'Donut Chart'

I am getting current status from the server. from the server information i need to show the current status of the finished works.

like this :

enter image description here

I am trying here, but i am not getting result. here is my code :

var data = [45] //say value i get.

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#ffff00", "#1ebfc5"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 90)
    .innerRadius(radius - 80);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


 var g = svg.selectAll(".arc")
      .data(pie(data))
        .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(color[0]); });

Live Demo

Upvotes: 1

Views: 1450

Answers (1)

ocket-san
ocket-san

Reputation: 884

You probably just get a full circle, right?

Well, d3 stands for data driven documents, which means that it cannot show data that isn't there.

So basically, to fix it, you just need the counter value in your dataset: I have fixed your code below: 

var data = [45, 55] //as you see, i have added 55 (100-45).

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .domain(data)
    .range(["#ffff00", "#1ebfc5"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 90)
    .innerRadius(radius - 80);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


 var g = svg.selectAll(".arc")
      .data(pie(data))
        .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d,i) { return color(d.data); });

EDIT I also changed your coloring. in the end of your code you do "return color(color[0])" which always returns the same color. So even if you would have 2 different parts in your donut chart, they whould have been colored the same and you wouldn't have noticed the difference :-). Use the d3 built in data variable. For arcs/pies, the variable d also returns more then just the original data, it returns a custom object. Your data is stored in d.data, which you can see in the code I included.

Upvotes: 1

Related Questions