Dimple Tooltip Add custom text

Question

I am building a chart with dimple js and tryin to adjust the tooltip. I figured out how to add the "Gender" and "Survival Rate". Now I want to add the survival count that is stored in the flatgroups object. How can I do this? Below effort (with a for loop) does not seem to work. It gives me an error saying the flatgroups object is undefined and it cannot take the length of an undefined object. Thanks!

 function draw_bar(data) {
  var svg = dimple.newSvg("#chart1", 800, 600);

// Group/nest data by gender and calculate survival rate and number of people that survived per gender 
var grouped_data = d3.nest()
                .key(function (d) {return d.Sex;})
                .rollup(function (v) {return {"Survival Rate": d3.mean(v, 
                                                                        function (d) {
                                                                            return d.Survived;
                                                                                     }
                                                                      ), 
                                              "Survival Count": d3.sum(v, 
                                                                        function (d) {
                                                                            return d.Survived;
                                                                                     }
                                                                      )
                                             };
                                     }
                        )
                .entries(data);

  // flatten the data structure stored in grouped_data
   var flatgroups = [];
   grouped_data.forEach(function (group) {
            flatgroups.push({
                        "Gender": group.key,
                        "Survival Rate": group.values["Survival Rate"],
                        "Survival Count": group.values["Survival Count"] 
                        });
                  });

  // Construct chart, set axis labels and draw it
  var chart = new dimple.chart(svg, flatgroups);
  var x = chart.addCategoryAxis("x", "Gender");
  x.title = "Gender";
  var y = chart.addMeasureAxis("y", "Survival Rate");
  y.title = "Survival Rate";
  // Format y-axis to show proportions with 2 decimals
  y.tickFormat = ',.2f';
  var series = chart.addSeries("Gender", dimple.plot.bar);
  series.getTooltipText = function (e) {
                        var key = e.key;
                         for (i in flatgroups) {
                            if (i.key == key) {
                                return [ "Gender" + ": " + e.cx,
                     "Survival Rate" + ": " + (e.cy).toFixed(2),
                     "Survival Count" + ": " + i["Survival Count"]

                                        ];
                                                            };
                         };
  };
  chart.assignColor("female", "red")
  chart.assignColor("male", "blue")
  chart.draw();

score 0 · Accepted Answer · answered Jul 05 '16 at 14:23

flatgroups is an array of objects. When you iterate over it with for (i in flatgroups), what you're iterating over are the integer array keys. In other words, the values of i in this for loop will be 0, 1, etc.

What you can do here is just add a line like var group = flatgroups[i]; as your first line inside the for loop. Then use group (the actual group object) to refer to the group instead of i (the integer key).

I suspect as well that you'll need to change the line if (i.key == key) to something more like if (group.Gender == key), as key doesn't appear to be one of the actual keys in the objects you created.

You may also want to make that `for (var i in flatgroups)` instead of `for (i in flatgroups)`. See [“var” or no “var” in JavaScript's “for-in” loop?](http://stackoverflow.com/questions/5717126). — Jonathan S., Jul 05 '16 at 14:25

Dimple Tooltip Add custom text

1 Answers1