CODEWITHSUNDEEP
jsond3.jscharts
Rednaxel
Rednaxel

Reputation: 968

D3 Pie Chart not showing

I'm starting to use D3 and I'm trying to work with an example using my own JSON. The code is not showing any error but it doesn't show the pie, so I don't know what can be.

This is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Step 1 - A Basic Pie Chart</title>
  </head>
  <body>
    <div id="chart"></div>
    <script type=text/javascript src="{{url_for('static', filename='d3.min.js') }}"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
      (function(d3) {
        'use strict';

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

        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(radius);

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

        d3.json('https://demo-url.com/api/v1.0/tables/56afce8f243c48393e5b665a'
            , function(error, dataset){
              if (error) throw error;

          var path = svg.selectAll('path')
            .data(pie(dataset.data))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) { 
              return color(d.data.Name);
            });

        }); 

      })(window.d3);
    </script>
  </body>
</html>

This is what the page JSON returns:

curl -i -X GET https://demo-url.com/api/v1.0/tables/56afce8f243c48393e5b665a
HTTP/1.1 200 OK
content-type: application/json
content-length: 702
server: Werkzeug/0.11.3 Python/2.7.6
date: Wed, 03 Feb 2016 02:56:32 GMT
X-BACKEND: apps-proxy

{"data": [{"_id": {"$oid": "56afcea3243c48393e5b665f"}, "idDatasource": {"$oid": "56afce8f243c48393e5b665a"}, "Id": 5, "Value": 0, "Name": "Brock"}, {"_id": {"$oid": "56afcea3243c48393e5b665d"}, "idDatasource": {"$oid": "56afce8f243c48393e5b665a"}, "Id": 3, "Value": 0, "Name": "Peter"}, {"_id": {"$oid": "56afcea3243c48393e5b665e"}, "idDatasource": {"$oid": "56afce8f243c48393e5b665a"}, "Id": 4, "Value": 0, "Name": "John"}, {"_id": {"$oid": "56afcea3243c48393e5b665b"}, "idDatasource": {"$oid": "56afce8f243c48393e5b665a"}, "Id": 1, "Value": 0, "Name": "Ash"}, {"_id": {"$oid": "56afcea3243c48393e5b665c"}, "idDatasource": {"$oid": "56afce8f243c48393e5b665a"}, "Id": 2, "Value": 0, "Name": "Sarah"}]}

Upvotes: 0

Views: 2189

Answers (1)

Gilsha
Gilsha

Reputation: 14589

There are no problems in your code. The pie chart is not shown because the data-set values are zeros. All pie slice angle becomes 0 in this case. When there is data, the code works fine and pie chart is shown.

Working snippet:

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

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(radius);

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

var dataset = {
  "data": [{
    "_id": {
      "$oid": "56afcea3243c48393e5b665f"
    },
    "idDatasource": {
      "$oid": "56afce8f243c48393e5b665a"
    },
    "Id": 5,
    "Value": 10,
    "Name": "Brock"
  }, {
    "_id": {
      "$oid": "56afcea3243c48393e5b665d"
    },
    "idDatasource": {
      "$oid": "56afce8f243c48393e5b665a"
    },
    "Id": 3,
    "Value": 5,
    "Name": "Peter"
  }, {
    "_id": {
      "$oid": "56afcea3243c48393e5b665e"
    },
    "idDatasource": {
      "$oid": "56afce8f243c48393e5b665a"
    },
    "Id": 4,
    "Value": 8,
    "Name": "John"
  }, {
    "_id": {
      "$oid": "56afcea3243c48393e5b665b"
    },
    "idDatasource": {
      "$oid": "56afce8f243c48393e5b665a"
    },
    "Id": 1,
    "Value": 8,
    "Name": "Ash"
  }, {
    "_id": {
      "$oid": "56afcea3243c48393e5b665c"
    },
    "idDatasource": {
      "$oid": "56afce8f243c48393e5b665a"
    },
    "Id": 2,
    "Value": 20,
    "Name": "Sarah"
  }]
};

var path = svg.selectAll('path')
  .data(pie(dataset.data))
  .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>

If you want to start the Pie chart from zero values, this link may be useful.

Upvotes: 2

Related Questions