1

I have created a pie chart using visualforce and its working fine .But now i need to display the details when i click on the wedges in the pie chart.How can be this achieved.Can anyone help me out in this.

1 Answer 1

3

Visualforce does not appear to expose any mechanism for onclick, but does have a tooltip extension mechanism that might meet your needs (though it is undocumented).

Here a couple of extra fields called other1 and other2 are added to the data:

public class PieChartController {
    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;
    }
    public class PieWedgeData {
        public String name { get; set; }
        public Integer data { get; set; }
        public String other1 { get; set; }
        public String other2 { get; set; }
        public PieWedgeData(String name, Integer data) {
            this.name = name;
            this.data = data;
            this.other1 = String.valueOf(Math.random());
            this.other2 = String.valueOf(Math.random() * 1000);
        }
    }
}

and rendered in the tooltip using this:

<apex:page controller="PieChartController" title="Pie Chart">
    <apex:chart height="350" width="450" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name">
            <apex:chartTips height="75" width="200" rendererFn="renderChartTip"/>
        </apex:pieSeries>
        <apex:legend position="right"/>
    </apex:chart>
<script>
function renderChartTip(klass, item) {
    var m = item.storeItem;
    this.setTitle(m.get('name'));
    this.update(''
            + '<table>'
            + '<tr><td><b>Data</b>&nbsp;</td><td>' + m.get('data') + '</td></tr>'
            + '<tr><td><b>Other 1</b>&nbsp;</td><td>' + m.get('other1') + '</td></tr>'
            + '<tr><td><b>Other 2</b>&nbsp;</td><td>' + m.get('other2') + '</td></tr>'
            + '</table>'
            );
}
</script>
</apex:page>

for this result on-mouseover rather than on-click:

enter image description here

You must log in to answer this question.

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