title: Trying to draw a d3 pie chart from json data
body: <p>I am trying to generate a d3 pie chart from the following json data.</p>
  
  <p><code>{"data":[
      {"Success":3412,
      "Pending":2107}
  ]}
  </code>
  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.</p>
  
  <pre><code>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);
    });
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Is there any way achieve this?</p>
  
  <p>I read this thread: <a href="https://stackoverflow.com/questions/15200095/data-structure-for-d3-pie-charts?rq=1">Data structure for D3 pie charts</a></p>
  
  <p>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.</p>
  
  <p>Kind regards</p>