Donut Pie Chart - Add a Title - NVd3.js

Question

I'm exploring the NVD3.js library. It amazes me how quickly things can be produced in it.

But it seems like it's difficult to alter the chart sometimes. In this case, I would like to add a title to my chart.

The other thing, I would like to add additional data in the tool-tip. So on hover, It would also include the note in my data.

Data sample:

var data = [
{
  key: "Loans",
  y: 52.24
  note: "Expect greatest value"
}];

This is the code I'm playing with:

nv.addGraph(function() {

var width = 500,
    height = 500;

var chart = nv.models.pieChart()
    .x(function(d) { return d.key; })
    .values(function(d) { return d; })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height)
    .donut(true);

chart.pie
    .startAngle(function(d) { return d.startAngle/2 -Math.PI/2; })
    .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 ;});


  d3.select("#chart")
      //.datum(historicalBarChart)
      .datum([data])
    .transition().duration(1200)
      .attr('width', width)
      .attr('height', height)
      .call(chart);

return chart;
});

Donut-Pie Chart example

Update: The original code for the tooltip is located within src->models->pieChart.js:

tooltip = function(key, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p> Confidence: ' +  y + '%</p>'
  }

I've tried overriding this with my own function. But either get errors or no change.

Title Update: I typically use the following code (or something similar) for titles.

svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Awesome Title");

But of course, this isn't valid in NVD3. I'm not aware of what function is used to specify a title.

WolfgangCodes · Accepted Answer · 2013-04-29T19:17:24.277

5

I think your looking for chart.tooltipContent() JSFiddle: http://jsbin.com/idosop/7/edit

      var tp = function(key, y, e, graph) {
            console.log(key, e, y);
            return '<h3>' + key + '</h3>' +
                   '<p>!!' +  y + '!!</p>' +
              '<p>Likes: ' +  e.point.likes + '</p>';
      };
      chart.tooltipContent(tp);

edited Apr 29 '13 at 19:17

answered Apr 29 '13 at 18:21

WolfgangCodes

1,239
11
20

Very nice. That solves it! But what does the `point` part of `e.point.likes` do? – EnigmaRM Apr 29 '13 at 18:35
When you have more information (i.e. in addition to a y value) in your data set like we do here: data = [{ key: "Loans", y: 52.24 note: "Expect greatest value" }, key: "Accounts", y: 300.24 note: "Meh" }, ... ] Each item in the data array is passed to the tooltip call back as e.points and you can get at the rest of your data associated with that point from that object. – WolfgangCodes Apr 29 '13 at 18:37
Makes sense. Do you have a link to Docs where it explains that? (okay if you don't). In general, I haven't found a great source for docs yet. – EnigmaRM Apr 29 '13 at 18:44
Do you also have any advice/thoughts on what to do for the title? The standard D3.js code I've used for other chart titles didn't work for NVD3. – EnigmaRM Apr 29 '13 at 18:46
The docs on this library are a bit thin, I found it by reading the source. What did you try doing for the title? – WolfgangCodes Apr 29 '13 at 19:03
Ohh ok. I updated my post to include what I typically do for a title. But before I even tried it - I knew it wouldn't work. I'm not aware of what function is used to specify the title. And haven't been able to find it in the source files yet. – EnigmaRM Apr 29 '13 at 19:14
I don't see it exposing one. I'd add it outside the SVG and style it with css. http://jsbin.com/idosop/9/edit – WolfgangCodes Apr 29 '13 at 19:30
Haha. That is an amazingly simple great solution for the title. It won't work for all future charts, but for now it does work. Thanks. – EnigmaRM Apr 29 '13 at 19:34

Donut Pie Chart - Add a Title - NVd3.js

1 Answers1

Linked