Insert json data itnto NVD3 Donut Pie using AngularJS

Question

Here in the link, the center text is showing "Line One" and "Line Two". However these words are hard coded in the code. I want to run a API, get JSON response and dynamically insert a part of the response in the center text.

How do I achieve This shows a donut chart with center text this?

nv.addGraph(function() {
  var donutChart = nv.models
    .pieChart()
    .x(function(d) {
      return d.label;
    })
    .y(function(d) {
      return d.value;
    })
    .showLabels(true)
    .showLegend(false)
    .labelThreshold(0.05)
    .labelType("key")
    .color(["#965251", "#00b3ca", "#7dd0b6", "#e38690", "#ead98b"])
    .tooltipContent(function(key, y, e, graph) {
      return "Custom tooltip string";
    }) // This is for when I turn on tooltips
    .tooltips(false)
    .donut(true)
    .donutRatio(0.35);

  // Insert text into the center of the donut
  function centerText() {
    return function() {
      var svg = d3.select("svg");

      var donut = svg.selectAll("g.nv-slice").filter(function(d, i) {
        return i == 0;
      });

      // Insert first line of text into middle of donut pie chart
      donut
        .insert("text", "g")
        .text("Line One")
        .attr("class", "middle")
        .attr("text-anchor", "middle")
        .attr("dy", "-.55em")
        .style("fill", "#000");
      // Insert second line of text into middle of donut pie chart
      donut
        .insert("text", "g")
        .text("Line Two")
        .attr("class", "middle")
        .attr("text-anchor", "middle")
        .attr("dy", ".85em")
        .style("fill", "#000");
    };
  }

  // Put the donut pie chart together
  d3
    .select("#donut-chart svg")
    .datum(seedData())
    .transition()
    .duration(300)
    .call(donutChart)
    .call(centerText())
    .call(pieSlice());

  return donutChart;
  [enter image description here][2]
});

// Seed data to populate donut pie chart
function seedData() {
  return [{
    label: "One",
    value: 25
  }, {
    label: "Two",
    value: 25
  }, {
    label: "Three",
    value: 25
  }, {
    label: "Four",
    value: 25
  }, {
    label: "Five",
    value: 25
  }];
}

Answer 1

Workign demo!

You can use the .tooltipContent() method of the chart to achieve the desired output.Use below code.

.tooltipContent(
        function(key, y, e, graph) {

          var svg = d3.select("svg");    
          var donut = svg.selectAll("g.nv-slice").filter(
          function (d, i) {
            return i == 0;
          }); //Get chart object

          d3.select('.classed').remove();//(Label text remove)Remove the previously added text first
          d3.select('.classed_val').remove();//(Value text remove)Remove the previously added text first

          donut.insert("text", "g")
            .text(e.label)
            .attr("class", "middle")                
            .attr("text-anchor", "middle")
            .attr("dy", "-.55em")
            .style("fill", "#000")
            .classed("classed", true); //Use this class at a time of removing

          donut.insert("text", "g")
            .text(e.value)
            .attr("class", "middle")                
            .attr("text-anchor", "middle")
            .attr("dy", ".85em")
            .style("fill", e.color)
            .classed("classed_val", true); //Use this class at a time of removing

          return false }
      )
        .tooltips(true)

EDIT

As per the comment, you can use jQuery $.get() to fetch data from the URL and store it. Then you can use that data in .tooltipContent() method. Use below code to get data from URL:

  var data_from_file = [];
  $.get( "https://davids-restaurant.herokuapp.com/menu_items.json", function( data ) {    
     data_from_file = data; // Store data in this variable and use it on hover
  });

Use the data in hover event:

donut.insert("text", "g")
      //Here I have set first menu_item's name on hover
      .text(data_from_file.menu_items[0].name) //Here I have used the variable "data_from_file" which contains data of the json url
      .classed("classed_val", true)
      .attr("text-anchor", "middle")
      .attr("dy", ".85em")
      .style("fill", e.color);

Working demo!