CODEWITHSUNDEEP
javascriptd3.js
Mad Adh
Mad Adh

Reputation: 95

how to add tooltip for donut chart in loop using d3js

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

Answers (1)

Cyril Cherian
Cyril Cherian

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

Related Questions