how to show tooltip on piechart when hovering on legends

i am using prime faces pie chart and i have pie chart, tooltip on hovering piechart and legends.

i am trying to develop custom legends like if i hover or click on legends a tool tip should display on corresponding pie chart part.

since i am new to plots am not able to find a solution. please help me how to add tool tip effect for legends

Note: tooltip will display hovering piechart but need hovering on legends

piechart:

PrimeFaces Code:

<p:pieChart id="countries" value="#{chartController.pieChartModel}" extender="toolExt" seriesColors="33CC66,FFCC00,0000CC,FF0099,00CCCC,660099,00FF00,FF6600,003300,00FFFF"  style="width:440px;height:296px;background-color: white; border: 2px inset #8B8378; padding: 2px; -moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-box-shadow: 0 3px 9px #666;" >

javascript for extender:

Note: extender property used in piechart tag to add custom data

<script>
        function toolExt() {
                this.cfg.highlighter = {
                           show:true,
                           tooltipLocation: 'se',
                           tooltipAxes: 'pieref',
                           tooltipAxisX: 20000,
                           tooltipAxisY: 20000,
                           useAxesFormatters: false,
                           formatString:'Accumulated Cost to %s: %s',
                },
                this.cfg.legend = {
                        show : true,
                        fontSize: '100px',
                        rowSpacing: '1px',
                        textColor: '000000',

                },
                this.cfg.seriesDefaults={
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions : {
                                sliceMargin: 3,
                                padding : 1,
                                diameter : 170,
                        }
                },
                this.cfg.grid = {
                        drawBorder: false,
                        shadow: false,
                        background: "white"
                };
                this.cfg.redraw;
        }
</script>

java code

Note: i used sample code, in actual code data comefrom db and it will set upto 10 series

public class ChartController
{
  private PieChartModel pieChartModel;
  public ChartController()
  {
    pieChartModel = new PieChartModel();
    pieChartModel.set("JAPAN", 102);
    pieChartModel.set("AFGANISTAN", 36);
    pieChartModel.set("UNITED STATE", 33.6);
    pieChartModel.set("PAKISTAN", 20.5);
  }
  public PieChartModel getPieChartModel()
  {
    return pieChartModel;
  }
}

i tried renderOptions but it didn't worked

please help me how to display tool-tip on piechart while mouse hover/clicking on legends.

Thanks

how to show tooltip on piechart when hovering on legends

0 Answers