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. |
sector | The actual Rapahel object for the segment the user's cursor is hovering over. |
total | The accumulated value of all segments in the chart. | value | An 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>This is how it shows up when the user moves the mouse cursor over the "Business" segment.
<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>
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(){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:
// info code from above
this.label[1].attr({"font-weight": "bold"});
}, function(){
$("#details").html("");
this.label[1].attr({"font-weight": "normal"});
});
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();
});