CODEWITHSUNDEEP
javascriptd3.jschartstooltipbar-chart
cecelia
cecelia

Reputation: 45

d3.js Update Bar Chart Tooltip with Buttons

I'm trying to make four bar charts using buttons to classificate the one I want to display. Everything works great in general, as you can see in my code. However, now I tried to add tooltips [here][2] and realized that the data doesn't update for each chart. Does anyone know how could I do that? I thought on implement if-else statements on var tip to select the correct button like that:

var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {                                                                            

          if(d3.select("#propertyCategory"))
                       return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d.vacant + "</strong>";
                                              })

However, it didn't work and to be honest I didn't understand how selections could be implemented correctly in this case, I'm kind of noobie in d3.js, so I don't know what could be done to fix that.

Upvotes: 1

Views: 342

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

May be you can have a variable

  var selected = "ano2009";//set it to default value

Now when ever the year is changed change the selected variable.

Like this:

d3.select("#vacant")
    .on("click", function() {
        selected = "vacant";
        //Update scale domain

Like this:

   d3.select("#totalUnits")
        .on("click", function() {
           selected = "totalUnits";

... so on

Now in the tip function you can do:

var tip = d3.tip()
                                                  .attr('class', 'd3-tip')
                                                  .offset([-10, 0])
                                                  .html(function(d) {

 //note d[selected] will select the clicked year data.                                                  
  return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d[selected] + "</strong>";
                                                  })

working code here

Upvotes: 0

Related Questions