Reputation: 95
I have json object which generate dynamically,look like
var data =
[
{"hour":"16","percentage":50,"activity":[{"activity_id":"1","cnt":"1"} {"activity_id":"2","cnt":"1"}]},
{"hour":17,"percentage":0,"activity":[]}
{"hour":"18","percentage":20,"activity":[{"activity_id":"1","cnt":"1"} {"activity_id":"2","cnt":"5"}]},
{"hour":"19","percentage":80,"activity":[{"activity_id":"1","cnt":"5"} {"activity_id":"3","cnt":"7"}]},
];
and i want to draw chart with the help of d3
var can = d3.select("#chart").append("svg").attr("height",200).attr("width",800);
var r =100;
var p = Math.PI*2;
//give color to arc
//if 0 range to yellow and 100 is red
var color = d3.scale.linear()
.domain([0,100])
.range(["#D6EBFD","#FF0000"]);
var group = can.append("g")
.attr("transform","translate(100,100)");
//draw arc with outer and inner radius
var arc = d3.svg.arc()
.innerRadius(r - 30)
.outerRadius(r)
var pie = d3.layout.pie()
.sort(null)
.value(function (d){return data.length;});
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc")
.attr('stroke','#fff')
.attr('stroke-width', '2')
.attr('fill',function(d){return color(d.data.percentage)})
.on("mouseover", function(d){
div.style("display", "inline")
//.text(d.data.percentage + ", " + d.data.hour)
.data(d.data.activity)
//problem is here to make tooltip when mouseover to the chart where i want data from activity array object?
.text(function(a){
a.activity_id + ", " + a.cnt
})
.text(function(d){
for(var i = 0;i>data.activity.length;i++){
return data.activity['activity_id'] + ", " + data.activity['cnt'];
}
})
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
})
.on("mouseout", mouseout);
arcs.append("path")
.attr("d", arc)
.style("fill", function (d) {
return color(d.data.percentage);
});
arcs.append("text")
.attr('transform',function(d){return "translate("+arc.centroid(d)+")";})
.attr('fill','#0000FF')
.attr('z-index',1)
.text(function(d){return d.data.hour});
var div = d3.select("#chart").append("div")
.attr("class", "tooltip")
.style("display", "none");
function mouseout() {
div.style("display", "none");
}
which draw a donut chart but i want to make tooltip when mouseover to the chart which is activity_id,cnt in loop. (Please ignore the design) What i need is when mouseover to 16 tooltip must be 1,1 17 tooltip must be 18 tooltip must be 1,1 2,5 19 tooltip must be 1,5 3,7 This is my first time to d3,so please can anyone help me.Thanks in advance.
Upvotes: 1
Views: 387
Reputation: 32327
Instead of doing it like this having 2 text function which is wrong:
.text(function(a){
a.activity_id + ", " + a.cnt
})
.text(function(d){
for(var i = 0;i>data.activity.length;i++){
return data.activity['activity_id'] + ", " + data.activity['cnt'];
}
})
write a single text function like this:
.text(function() {
var str = "";
d.data.activity.forEach(function(a){
//make the display string by iterating over activity.
str += a.activity_id + ", " + a.cnt + " ";
})
return str;
})
Working code here
Upvotes: 2