CODEWITHSUNDEEP
javascriptd3.js
user3206082
user3206082

Reputation: 431

what is the best way to update pie chart on hover of bars in a bar chart - d3

With the help of this post I've got a some flexibility on mouse over events in d3.

And I've managed to show some values on hovering on the bars.

Now that if I'm creating a pie chart and if I wanted to update that pie chart on hovering the bars of the bar chart. What will be the best way for me to include the pie chart data to the existing data in this FIDDLE and how can i retrieve that data for the pie chart?

I'm looking for something like this.

In the above example if you hover of the rect. Bar chart on the right bottom corner gets updated.

I couldn't find any code given for that. But found this in the page source.

Any suggestions can be helpful for me to achieve this.

Thanks in advance!!

Upvotes: 0

Views: 576

Answers (1)

Jaime
Jaime

Reputation: 6814

You can try something like crossfilter

http://square.github.io/crossfilter/

UPDATE

The idea is that you update the pie chart with when you get a click on the master chart (bar chart).

Let's say your data looks something like:

var ds = [
    { key: 'A', values: [1,2,3,4], sum: function () { return d3.sum(this.values); } },
    { key: 'B', values: [20, 30, 40], sum: function () { return d3.sum(this.values); } },
    { key: 'C', values: [100, 200, 300], sum: function () { return d3.sum(this.values); } }
];

And you have a function to create/update the pie like:

function updatePie(svg, data, radius) {
    var color = d3.scale.category20c();
    var arc = d3.svg.arc().outerRadius(radius);
    var formattedData = d3.layout.pie()(data);
    var slice = svg.selectAll('.slice')
        .data(formattedData);

    slice.enter()
        .append('path')
        .attr('fill', function(d, i) { return color(i); })
        .attr('class', 'slice')
        .attr('d', arc);

    slice
        .attr('d', arc);

    slice.exit()
        .remove();
}

Now on the click handler for your bar chart you do

var clickHandler = function (dataPoint) {
    updatePie(svg, dataPoint.values, r);
};

Here's a working example using just list for the master (replacing the bar chart) but the idea is the same:

http://jsfiddle.net/jaimedp/q45z6/1/

Hope this helps

Upvotes: 1

Related Questions