I wanted to create a simple pie chart from a json feed however after following a few examples I am at a point where firebug is not giving me any errors,yet there is not pie chart showing up. Im not sure if it has something to do with my json structure? I was getting a error like this for a while :
Object #<Object> has no method 'map'
Below is my code:
<script>
function init(){
var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.ordinal()
.range(["#98abc5","#8a89a6","#7b6888","#6b486b","#a05d56","#d0743c"]);
var sql = new cartodb.SQL({ user: 'ceigis' });
sql.execute("SELECT status, COUNT(status) FROM deldot_rail_crossing GROUP BY status")
.done(function(data) {
for (var i = 0; i < data.total_rows; i++) {
var filterdata = data.rows[i];
}
var chart = d3.select("body").selectAll("svg")
.data(filterdata)
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + r + "," + r + ")")
var arc = d3.svg.arc()
.outerRadius(r);
var pie = d3.layout.pie()
.value(function(d) { return d.count; });
var arcs = chart.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d, i) { return filterdata.rows[i].status; });
})
.error(function(errors) {
// do nothing
})
}
</script>
</head>
<body onload="init()">
</body>
</html>
And below is what my json query is returning:
{"time":0.005,"fields":{"status":{"type":"string"},"count":{"type":"number"}},
"total_rows":4,"rows":[{"status":"private","count":169},{"status":"comp","count":41},
{"status":"not_comp","count":276},{"status":"pre_qaqc","count":10}]}
Any help would be appreciated
Your variable filterdata is an object, you should pass an array to the data method. If you use .selectAll("svg").data([filterdata]), you need to append the element on enter:
var chart = d3.select("body").selectAll("svg")
.data([filterdata])
.enter()
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + r + "," + r + ")");
D3 expects that the argumetn of data to be an array. The filterdata object don't have a map method, and thus the error. You can also bind a single object to a selection, but you need to append it first:
var chart = d3.select("body").append("svg")
.datum(filterdata)
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + r + "," + r + ")");
Regards,
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments