CODEWITHSUNDEEP
javascriptd3.jspie-chart
Selva
Selva

Reputation: 3

Trying to draw a d3 pie chart from json data

I am trying to generate a d3 pie chart from the following json data.

{"data":[ {"Success":3412, "Pending":2107} ]} This data is retrieved from an sql table. Success and Pending are the column headers in the sql table. The following is the code I am trying to use to generate the piechart.

var width = 360;
var height = 360;
var outradius = Math.min(width, height) / 2;
var inradius = outradius / 1.25;

var color = d3.scale.category20b();

var svg = d3.select('#Chart')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
  .outerRadius(outradius)
  .innerRadius(inradius);
var pie = d3.layout.pie()
  .value(function (d, i) { return d.data.Success; })
  .sort(null);
var path = svg.selectAll('path')
  .data(pie(dataset.data))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', function (d, i) {
      return color(d.data.Pending);
  });

I have created the d3 pie chart for tables where I am plotting the values of a certain column. But here I need to plot the values from two columns in a single piechart to compare with each other.

The above code will compare the values of all "Success" keys and fill the different colours based on the "Pending" key. But I have just one Success and Pending Key:value pair in the json and I need to compare them in piechart.

Is there any way achieve this?

I read this thread: Data structure for D3 pie charts

But I am not sure how to pass the data to the pie. Can you edit my code snippet and show me? I am very new to web programming even though I have worked in java before.

Kind regards

Upvotes: 0

Views: 1575

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

If i understand you correctly, you need to change your data as you only have one element in your dataset with success and pending. To compare both you need two sets of data like so : 

var dataset = {
  "data": [{
    "Name": "Success",
    "Value": 3412
  }, {
    "Name": "Pending",
    "Value": 2107
  }]
}

Notice I have reformatted the code so you have Name and Value. This is so you can use the value for the size of the arc and the name as the colour/text.

To alter your data use this function : 

var data = {
  "data": [{
    "Success": 3412,
    "Pending": 2107
  }]
}

var newData = [];
for (var key in data.data[0]) {
  console.log(key)
  var thisData = {
    "Name": key,
    "Value": data.data[0][key]
  }
  newData.push(thisData)
}

console.log(newData)

This goes through your data and creates new data that can be read by the D3.pie :)

Updated code : 

var data = {
  "data": [{
    "Success": 3412,
    "Pending": 2107
  }]
}

var newData = [];
for (var key in data.data[0]) {
 // console.log(key)
  var thisData = {
    "Name": key,
    "Value": data.data[0][key]
  }
  newData.push(thisData)
}


var width = 360;
var height = 360;
var outradius = Math.min(width, height) / 2;
var inradius = outradius / 1.25;

var color = d3.scale.category10();

var svg = d3.select('#Chart')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
  .outerRadius(outradius)
  .innerRadius(inradius);
var pie = d3.layout.pie()
  .value(function(d, i) {
    console.log(d)
    return d.Value;
  })
  .sort(null);
var path = svg.selectAll('path')
  .data(pie(newData))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', function(d, i) {
    return color(d.data.Name);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='Chart'>

</div>

Upvotes: 1

Related Questions