1

VF page

<apex:page controller="ChartController" title="Pie Chart" sidebar="false">
<apex:includeScript value="{!URLFOR($Resource.ChartLib, 'jquery.min.js')}"/>
<script type="text/javascript">
    j$ = jQuery.noConflict();
    function funtest() {
       j$('svg').css('cursor','hand');
       j$('rect').css('cursor','pointer');
       j$('path').css('cursor','pointer');       
    }
</script>

<apex:chart height="450" width="450" data="{!pieData}">
    <apex:pieSeries dataField="data" labelField="name" rendererFn="funtest" showInLegend="false"/>
    <apex:legend position="right"/>
</apex:chart>
</apex:page>

controller

public class ChartController {

    public List<PieWedgeData> getPieData() {

        List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Jan', 30));
        data.add(new PieWedgeData('Feb', 15));
        data.add(new PieWedgeData('Mar', 10));
        data.add(new PieWedgeData('Apr', 20));
        data.add(new PieWedgeData('May', 20));
        data.add(new PieWedgeData('Jun', 5));
        return data;
    }
// Wrapper class
    public class PieWedgeData {
        public String name { get; set; }
        public Integer data { get; set; }
        public PieWedgeData(String name, Integer data) {
            this.name = name;
            this.data = data;
        }
    }
}

All I'm doing is to render the data on a VF page via visual force chart. As per requirement, I'm supposed to change the mouse cursor to a pointer(i.e. hand) whenever a user hovers over within graph area. I did that using SVG which is applicable to complete pie chart.

Is there anyway with which I can change the mouse cursor to pointer whenever the tooltip is visible to a user or whenever any specific portion pops out?

Any help or inputs are much appreciated!

Thank you. Regards, Pooja

Improve this question
2
  • Hey Pooja.. It is already showing Hand.. When I hover the chart it is showing hand curser only..
    – Ratan Paul
    Mar 2, 2016 at 11:55
  • Yes it is as I'm using SVG. But as per requirement it should only be for a specific area like when I'm hovering over Jan then Jan area pops out. Further on click of Jan I'm supposed to open one more VF page. As my cursor to pointer is via SVG its applicable to complete chart and not to specific section of chart
    – Pooja
    Mar 2, 2016 at 11:56

1 Answer 1

Reset to default
3

Please include below style css in your vf page and have a try:

<style type="text/css">
.vf-surface {
cursor:pointer;
}
</style>

Hope it helps you.

Improve this answer
8
  • Pooja, if above code works please mark my reply as Answer.
    – Rv1
    Mar 2, 2016 at 13:52
  • Thank you for your response, Rv1! Let me rephrase my question one more time. Imagine with above code visual force pie chart is visible with proper data in it. Now whenever, user moves cursor over pie chart then visual force chart automatically sliced out the section. Per my requirement, i need to change the mouse cursor to pointer(i.e. hand) whenever such slice pops out due to hover over by mouse. Any guidance is highly appreciated!!
    – Pooja
    Mar 7, 2016 at 12:07
  • Yes,Pooja. Have u tried the above? The pie chart which was created will have the class "vf-surface" (partially). If you include above lines in ur code, it will give Pointer(hand) form. Please check.
    – Rv1
    Mar 7, 2016 at 12:19
  • This is what is I've done and able to achieve so far!
    – Pooja
    Mar 8, 2016 at 9:50
  • This is what is I've done and able to achieve so far! One can see that whenever user hovers over pie chart, visualforce chart slice out that particular part so that end user can notice plus can read related tool tip. Now I've slight addition to my original requirement, I need to change mouse cursor to pointer plus I need to increase the font size of the text for a specific hover section. Code is as follows-
    – Pooja
    Mar 8, 2016 at 9:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .