How to place event click on Donutchart NVD3 chart?

Asked

Viewed 44 times

1

I have a Donut Chart that I need to put click function and I’ve read a lot, but nothing has helped yet. Any help is welcome.

var nvd3Charts = function() {

  var myColors = ["#06A705", "#F7A818", "#00BFDD", "#FF702A", "#DA3610",
    "#80CDC2", "#A6D969", "#D9EF8B", "#FFFF99", "#F7EC37", "#F46D43",
    "#E08215", "#D73026", "#A12235", "#8C510A", "#14514B", "#4D9220",
    "#542688", "#4575B4", "#74ACD1", "#B8E1DE", "#FEE0B6", "#FDB863",
    "#C51B7D", "#DE77AE", "#EDD3F2"
  ];

  d3.scale.myColors = function() {
    return d3.scale.ordinal().range(myColors);
  };

  startChart9 = function() {
    //Donut chart 
    nv.addGraph(function() {
      var chart = nv.models.pieChart().x(function(d) {
          return d.label;
        }).y(function(d) {
          return d.value;
        }).showLabels(true) //Display pie labels
        .labelThreshold(.05) //Configure the minimum slice size for labels to show up
        .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
        .donut(true) //Turn on Donut mode. Makes pie chart look tasty!
        .donutRatio(0.30) //Configure how big you want the donut hole size to be.   

        .color(d3.scale.myColors().range());

      d3.select("#idDiv svg").datum(exampleData()).transition().duration(350).call(chart);

      return chart;

    });

    //.on('click', function (i, row) {
    //    alert(row.label, row.value);

    //Pie chart example data. Note how there is only a single array of key-value pairs.

    function exampleData() {
      return [{
        "label": "Enviado",
        "value": 56.456875654566
      }, {
        "label": "Pendente",
        "value": 56.456875654566
      }];
    }

  };

  function stream_layers(n, m, o) {
    if (arguments.length < 3)
      o = 0;

    function bump(a) {
      var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
      for (var i = 0; i < m; i++) {
        var w = (i / m - y) * z;
        a[i] += x * Math.exp(-w * w);
      }
    }

    return d3.range(n).map(function() {
      var a = [],
        i;
      for (i = 0; i < m; i++)
        a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++)
        bump(a);
      return a.map(stream_index);
    });
  }

  function stream_index(d, i) {
    return {
      x: i,
      y: Math.max(0, d)
    };
  }

  return {
    init: function() {
      startChart9();
    }
  };
}();
javascript d3.js

1 answer

1


Browser other questions tagged javascript d3.js

You are not signed in. Login or sign up in order to post.