Web App Development

Making a gRapahel pie chart interactive using .hover()

In my last post I showed how to create a static pie chart in gRaphael. To make it dynamic you can use the hover function like this:
pieChart.hover(mouseoverHandler, mouseoutHandler);
The execution context (this) within the handler functions is set to an object giving information about the segment. These are some of the object's properties:
Property name Value
label Array of Raphael components of the legend element of the segment. The first value in the list is the circle in front of the segment name, the second is the text element for the segment name.
sectorThe actual Rapahel object for the segment the user's cursor is hovering over.
totalThe accumulated value of all segments in the chart.
valueAn object where the value property is the absolute numerical value represented by the segment. The order field gives the index of the value as in the array passed to the .piechart() method as the fourth parameter.

So you can show more detail on the item like this:
<script src="raphael-min.js"></script>
<script src="g.raphael-min.js"></script>
<script src="g.pie-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="pie"></div>
<div id="details"></div>
<script>
//Specify an explicit width, otherwise our #details div would be too far down the page
var paper = Raphael("pie", 400, 200);
var pie = paper.piechart(
100, // pie center x coordinate
100, // pie center y coordinate
90, // pie radius
[18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values
{
legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"]
}
);
var divisionDetails = ["Windows details", "Server details", "Business details", "Entertainment details", "Other details"];
pie.hover(function(){
var info = [
"<b>" + this.label[1].attrs["text"] + "</b>",
divisionDetails[this.value.order],
"Revenue: " + this.value.value + "B"
].join("<br>"); // So we'll have three lines, one for each of the info items above.
$("#details").html(info);
}, function(){
$("#details").html("");
});
</script>
This is how it shows up when the user moves the mouse cursor over the "Business" segment.

Emphasizing the segment that is being hovered over and it's legend item

To achieve this we can modify the text's "font-weight" property in the hover handlers:
 pie.hover(function(){
// info code from above
this.label[1].attr({"font-weight": "bold"});
}, function(){
$("#details").html("");
this.label[1].attr({"font-weight": "normal"});
});
This is very similar to the interactive pie chart example on the gRaphael website. If you want to duplicate the animation on that page have a look at the source code there. An alternative might be to change the color of the segment and its legend item:
 pie.hover(function(){
var info = /..
$("#details").html(info);
this.label[1].attr({"font-weight": "bold"});
this.label[0].darker();
this.sector.darker();
}, function(){
$("#details").html("");
this.label[1].attr({"font-weight": "normal"});
this.label[0].resetBrightness();
this.sector.resetBrightness();
});

Comments


Follow me on Twitter
I'm building monitoring tool for site speed and Core Web Vitals.
➔ Start monitoring your website or run a free site speed test