so I already have ajax jQuery application running that I am trying to create graphs for using d3js. I am pretty familiar with jq, but this is my first project using d3.
so my html file using jquery.ajax requests json-encoded data from php script / mysql db. all my data is returned in a format like this:
{"status":"Failed","msg":"Bad request."}
or if it's data like this (this is an age breakdown of users):
{"status":"Found","msg":{"under_18":103,"18-23":841,"24-29":1436,"30-36":1058,"37-46":907,"47-56":483,"over_56":200}}
I already have a login / session / cookie file that works with jq. I can request data from my ajax api, format it and draw on the screen without any problems.
so I'm trying to use d3js to create a pie chart with the 2nd json block published above. here is the code of the code I'm working on:
function ageDemographics() { closure( 'action=ageDemographics', function(result) { var width = 200, height = 200, outerRadius = Math.min(width, height) / 2, innerRadius = outerRadius * .6, data = d3.values(result.msg), color = d3.scale.category20(), donut = d3.layout.pie(), arc = d3.svg.arc().innerRadius(0).outerRadius(outerRadius); var vis = d3.select("#ageDemographics") .append("svg") .data([data]) .attr("width", width) .attr("height", height); var arcs = vis.selectAll("g.arc") .data(donut) .enter().append("g") .attr("class", "arc") .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); arcs.append("path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc); arcs.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .attr("text-anchor", "middle") .attr("display", function(d) { return d.value > .15 ? null : "none"; }) .text(function(d, i) { return d.value.toFixed(2); }); }, function(xhr, status, thrown) { setupLoginForm(); $('#error').html('You have been logged out.<br class="clear"/><br/>'); } ); } function closure(data, success, error) { $.ajax({ type: "POST", url: 'http://localhost/analytics/api/ajax.php', data: data, cache: false, success: success, error: error }); }
I use the pie example from the d3js git repository , and the graph displays "ok", but on line number 9 in the above code, I call:
data = d3.values(result.msg),
to pull out the values for d3 to create a pie chart. but the marks on the pie are the values that I gave him, but I would like to display the keys.
eg. "to 18", "18-23", etc. etc.
is it possible?
on line # 31 i set the text with
.text(function(d, i) { return d.value.toFixed(2); });
but in this case, “d” is just a numeric value. I thought I could use "i" to search for the key in the original "result.msg", but since the keys are integers (like an array), I'm not sure how to do this.
OK, so I solved my problems. see my answer below, here is a new question, is it possible to move labels from the side of the cake? or when capsizing?