I have a Donut Chart that I need to put a click function and I have 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();
}
};
}();