how to show tooltip on piechart when hovering on legends

Question

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

Answer 1

using amcharts able to render tool tip using legends.

Java Script Code

roboCallCountryCost.js

AmCharts.ready(function() {
        var costCountriesData = document.getElementById('roboCallDashboard:CCpieval').value;
        var CCchart = AmCharts.makeChart("CCpiediv", {
                "type": "pie",
                "theme": "none",
                "labelsEnabled":"false",
                "radius":100,
                "hideBalloonTime":60,
                "fontSize":10,
                "marginBottom":5,
                "marginTop":5,
                "pullOutDuration": 0,
                "pullOutRadius": 0,
                "legend": {
                        "markerType": "square",
                        "position": "right",
                        "marginLeft": 30,
                        "autoMargins": true,
                        "markerDisabledColor":"#00CCFF",
                        "markerLabelGap":5,
                        "markerSize":13,
                        "verticalGap":2,
                        "horizontalGap":2,
                        "spacing":5,
                },
                "dataProvider":eval(costCountriesData),
                "valueField": "countryCost",
                "titleField": "countryName",
                "balloonText": "<b><span style='font-size:14px'>Accumulated Cost to [[title]]: [[value]]</span></b>",
                colors:["#33CC66","#FFCC00","#0000CC","#FF0099","#00CCCC","#660099","#00FF00","#FF6600","#003300","#00FFFF"],
                labelsEnabled:false,
        });
});

"PrimeFaces Code:"

<h:form id="roboCallDashboard">
  <script src="amcharts.js" type="text/javascript"></script>
  <script src="pie.js" type="text/javascript"></script>
  <script src="roboCallCountryCost.js" type="text/javascript"></script>
  <h:panelGrid columns="1" width="100%" styleClass="dashboardContentTable" headerClass="dashboardTableHeader" style="height:337px">
     <div id="CCpiediv"/>
     <h:inputHidden id="CCpieval" value="{chartController.pieChartModel}" />
  </h:panelGrid>
</h:form>

CSS:

  #CCpiediv {
            width  : 440px;
            height : 296px;
            border: 2px inset #8B8378;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius: 10px;

            -webkit-box-shadow: 0 3px 9px #666;
            -moz--box-shadow: 0 3px 9px #666;
            -o-box-shadow:  0 3px 9px #666;
            box-shadow: 0 3px 9px #666;
            background-color: white;
  }

  .amChartsLegend {
            max-width: 130px;
            overflow-x: scroll !important;
            top: 2px !important;
            height: 230px !important;
  }

JAVA Code

ChartController.java

public String getPieChartModel() {
    StringBuilder buf = new StringBuilder("[");
    buf.append("{");
    buf.append("countryName: ").append("\""+"AFGANISTAN"+"\"").append(",");
    buf.append("countryCost: ").append("102").append(",");
    buf.append("},");
    buf.append("{");
    buf.append("countryName: ").append("\""+"JAPAN"+"\"").append(",");
    buf.append("countryCost: ").append("36").append(",");
    buf.append("},");
    buf.append("{");
    buf.append("countryName: ").append("\""+"UNITED STATE"+"\"").append(",");
    buf.append("countryCost: ").append("33.6").append(",");
    buf.append("},");
    buf.append("{");
    buf.append("countryName: ").append("\""+"PAKISTAN"+"\"").append(",");
    buf.append("countryCost: ").append("20.5").append(",");
    buf.append("},");
    buf.append("]");
    return buf.toString();
}