json - D3 Pie Chart not showing -
i'm starting use d3 , i'm trying work example using own json. code not showing error doesn't show pie, don't know can be.
this code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>step 1 - 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 page json returns:
curl -i -x 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"}]}
there no problems in code. pie chart not shown because data-set values zeros. pie slice angle becomes 0 in case. when there data, code works fine , pie chart 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 want start pie chart 0 values, link may useful.
Comments
Post a Comment