[FIXED] how to show tooltip on piechart when hovering on legends

Issue

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

Solution

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();
}

Answered By - Harish Nune

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to make p:menu scrollable in primefaces?

Issue

I have a menu which I fill programmatically with a model. But I want it to become scrollable when its items become too many to be displayed in the page.

Here is my menu:

<p:menu overlay="true" trigger="imgNotif" my="left top"
at="bottom left" model="#{notifController.model}" />

Is there a way to make it scrollable (programmatically or using its style/attributes)?

Thank you

Solution

Use the following CSS:

.ui-menu {
  overflow-y: scroll;      
  height: 200px;      
}

Answered By - Hatem Alimam

Answer Checked By - Marilyn (PHPFixing Volunteer)

Read More

[FIXED] How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Issue

The following code is inspired from PrimeFaces DataGrid + DataTable Tutorials and put into a <p:tab> of a <p:tabView> residing in a <p:layoutUnit> of a <p:layout>. Here is the inner part of the code (starting from p:tab component); the outer part is trivial.

<p:tabView id="tabs">
    <p:tab id="search" title="Search">                        
        <h:form id="insTable">
            <p:dataTable id="table" var="lndInstrument" value="#{instrumentBean.instruments}">
                <p:column>
                    <p:commandLink id="select" update="insTable:display" oncomplete="dlg.show()">
                        <f:setPropertyActionListener value="#{lndInstrument}" 
                                        target="#{instrumentBean.selectedInstrument}" />
                        <h:outputText value="#{lndInstrument.name}" />
                    </p:commandLink>                                    
                </p:column>
            </p:dataTable>
            <p:dialog id="dlg" modal="true" widgetVar="dlg">
                <h:panelGrid id="display">
                    <h:outputText value="Name:" />
                    <h:outputText value="#{instrumentBean.selectedInstrument.name}" />
                </h:panelGrid>
            </p:dialog>                            
        </h:form>
    </p:tab>
</p:tabView>

When I click the <p:commandLink>, the code stops working and gives the message:

Cannot find component with expression "insTable:display" referenced from "tabs:insTable:select".

When I try the same using <f:ajax>, then it fails with a different message basically telling the same:

<f:ajax> contains an unknown id "insTable:display" cannot locate it in the context of the component "tabs:insTable:select"

When it happens during another Ajax postback and the JSF project stage is set to Development, then it fails with a JavaScript alert with the message:

malformedXML: During update: insTable:display not found

How is this caused and how can I solve it?

Solution

Look in HTML output for actual client ID

You need to look in the generated HTML output to find out the right client ID. Open the page in browser, do a rightclick and View Source. Locate the HTML representation of the JSF component of interest and take its id as client ID. You can use it in an absolute or relative way depending on the current naming container. See following chapter.

Note: if it happens to contain iteration index like :0:, :1:, etc (because it's inside an iterating component), then you need to realize that updating a specific iteration round is not always supported. See bottom of answer for more detail on that.

Memorize NamingContainer components and always give them a fixed ID

If a component which you'd like to reference by ajax process/execute/update/render is inside the same NamingContainer parent, then just reference its own ID.

<h:form id="form">
    <p:commandLink update="result"> <!-- OK! -->
    <h:panelGroup id="result" />
</h:form>

If it's not inside the same NamingContainer, then you need to reference it using an absolute client ID. An absolute client ID starts with the NamingContainer separator character, which is by default :.

<h:form id="form">
    <p:commandLink update="result"> <!-- FAIL! -->
</h:form>
<h:panelGroup id="result" />

<h:form id="form">
    <p:commandLink update=":result"> <!-- OK! -->
</h:form>
<h:panelGroup id="result" />

<h:form id="form">
    <p:commandLink update=":result"> <!-- FAIL! -->
</h:form>
<h:form id="otherform">
    <h:panelGroup id="result" />
</h:form>

<h:form id="form">
    <p:commandLink update=":otherform:result"> <!-- OK! -->
</h:form>
<h:form id="otherform">
    <h:panelGroup id="result" />
</h:form>

NamingContainer components are for example <h:form>, <h:dataTable>, <p:tabView>, <cc:implementation> (thus, all composite components), etc. You recognize them easily by looking at the generated HTML output, their ID will be prepended to the generated client ID of all child components. Note that when they don't have a fixed ID, then JSF will use an autogenerated ID in j_idXXX format. You should absolutely avoid that by giving them a fixed ID. The OmniFaces NoAutoGeneratedIdViewHandler may be helpful in this during development.

If you know to find the javadoc of the UIComponent in question, then you can also just check in there whether it implements the NamingContainer interface or not. For example, the HtmlForm (the UIComponent behind <h:form> tag) shows it implements NamingContainer, but the HtmlPanelGroup (the UIComponent behind <h:panelGroup> tag) does not show it, so it does not implement NamingContainer. Here is the javadoc of all standard components and here is the javadoc of PrimeFaces.

Solving your problem

So in your case of:

<p:tabView id="tabs"><!-- This is a NamingContainer -->
    <p:tab id="search"><!-- This is NOT a NamingContainer -->
        <h:form id="insTable"><!-- This is a NamingContainer -->
            <p:dialog id="dlg"><!-- This is NOT a NamingContainer -->
                <h:panelGrid id="display">

The generated HTML output of <h:panelGrid id="display"> looks like this:

<table id="tabs:insTable:display">

You need to take exactly that id as client ID and then prefix with : for usage in update:

<p:commandLink update=":tabs:insTable:display">

Referencing outside include/tagfile/composite

If this command link is inside an include/tagfile, and the target is outside it, and thus you don't necessarily know the ID of the naming container parent of the current naming container, then you can dynamically reference it via UIComponent#getNamingContainer() like so:

<p:commandLink update=":#{component.namingContainer.parent.namingContainer.clientId}:display">

Or, if this command link is inside a composite component and the target is outside it:

<p:commandLink update=":#{cc.parent.namingContainer.clientId}:display">

Or, if both the command link and target are inside same composite component:

<p:commandLink update=":#{cc.clientId}:display">

See also Get id of parent naming container in template for in render / update attribute

How does it work under the covers

This all is specified as "search expression" in the UIComponent#findComponent() javadoc:

A search expression consists of either an identifier (which is matched exactly against the id property of a UIComponent, or a series of such identifiers linked by the UINamingContainer#getSeparatorChar character value. The search algorithm should operates as follows, though alternate alogrithms may be used as long as the end result is the same:

• Identify the UIComponent that will be the base for searching, by stopping as soon as one of the following conditions is met:
  • If the search expression begins with the the separator character (called an "absolute" search expression), the base will be the root UIComponent of the component tree. The leading separator character will be stripped off, and the remainder of the search expression will be treated as a "relative" search expression as described below.
  • Otherwise, if this UIComponent is a NamingContainer it will serve as the basis.
  • Otherwise, search up the parents of this component. If a NamingContainer is encountered, it will be the base.
  • Otherwise (if no NamingContainer is encountered) the root UIComponent will be the base.
• The search expression (possibly modified in the previous step) is now a "relative" search expression that will be used to locate the component (if any) that has an id that matches, within the scope of the base component. The match is performed as follows:
  • If the search expression is a simple identifier, this value is compared to the id property, and then recursively through the facets and children of the base UIComponent (except that if a descendant NamingContainer is found, its own facets and children are not searched).
  • If the search expression includes more than one identifier separated by the separator character, the first identifier is used to locate a NamingContainer by the rules in the previous bullet point. Then, the findComponent() method of this NamingContainer will be called, passing the remainder of the search expression.

Note that PrimeFaces also adheres the JSF spec, but RichFaces uses "some additional exceptions".

"reRender" uses UIComponent.findComponent() algorithm (with some additional exceptions) to find the component in the component tree.

Those additional exceptions are nowhere in detail described, but it's known that relative component IDs (i.e. those not starting with :) are not only searched in the context of the closest parent NamingContainer, but also in all other NamingContainer components in the same view (which is a relatively expensive job by the way).

Never use prependId="false"

If this all still doesn't work, then verify if you aren't using <h:form prependId="false">. This will fail during processing the ajax submit and render. See also this related question: UIForm with prependId="false" breaks <f:ajax render>.

Referencing specific iteration round of iterating components

It was for long time not possible to reference a specific iterated item in iterating components like <ui:repeat> and <h:dataTable> like so:

<h:form id="form">
    <ui:repeat id="list" value="#{['one','two','three']}" var="item">
        <h:outputText id="item" value="#{item}" /><br/>
    </ui:repeat>

    <h:commandButton value="Update second item">
        <f:ajax render=":form:list:1:item" />
    </h:commandButton>
</h:form>

However, since Mojarra 2.2.5 the <f:ajax> started to support it (it simply stopped validating it; thus you would never face the in the question mentioned exception anymore; another enhancement fix is planned for that later).

This only doesn't work yet in current MyFaces 2.2.7 and PrimeFaces 5.2 versions. The support might come in the future versions. In the meanwhile, your best bet is to update the iterating component itself, or a parent in case it doesn't render HTML, like <ui:repeat>.

When using PrimeFaces, consider Search Expressions or Selectors

PrimeFaces Search Expressions allows you to reference components via JSF component tree search expressions. JSF has several builtin:

• @this: current component
• @form: parent UIForm
• @all: entire document
• @none: nothing

PrimeFaces has enhanced this with new keywords and composite expression support:

• @parent: parent component
• @namingcontainer: parent UINamingContainer
• @widgetVar(name): component as identified by given widgetVar

You can also mix those keywords in composite expressions such as @form:@parent, @this:@parent:@parent, etc.

PrimeFaces Selectors (PFS) as in @(.someclass) allows you to reference components via jQuery CSS selector syntax. E.g. referencing components having all a common style class in the HTML output. This is particularly helpful in case you need to reference "a lot of" components. This only prerequires that the target components have all a client ID in the HTML output (fixed or autogenerated, doesn't matter). See also How do PrimeFaces Selectors as in update="@(.myClass)" work?

Answered By - BalusC

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] How to change default p:dataTable emptyMessage message

Issue

I am using PrimeFaces' dataTable. I get "No records found." when table has no element. I want to change this message to something like "No result" and make this message i18n type.

I don't want to use

<p:dataTable 
    id="idTable" 
    ...
    emptyMessage="#{messages['general.message.EmptyList']}"
>

for every table.

How can I change p:dataTable default emptyMessage message?

Solution

From the PrimeFaces 3.5 DataTable source code:

210    public java.lang.String getEmptyMessage() {
211        return (java.lang.String) getStateHelper().eval(PropertyKeys.emptyMessage, "No records found.");
212    }

So, it's hard coded and there's no way to change it in a single place other way than hacking the PrimeFaces source or creating a tagfile (not composite!) <my:dataTable> which wraps the <p:dataTable> with the desired message set.

<ui:composition ...>
    <p:dataTable id="#{id}" value="#{value}" var="item" 
        emptyMessage="#{messages['general.message.EmptyList']}">
        <ui:insert />
    </p:dataTable>
</ui:composition>

<my:dataTable id="foo" value="#{bean.items}">
    <p:column>#{item.foo}</p:column>
    <p:column>#{item.bar}</p:column>
</my:dataTable>

If you actually don't want to change the message, but merely want to hide it altogether, then you could also opt for a pure CSS solution:

.ui-datatable-empty-message {
    display: none;
}

Answered By - BalusC

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How to process only the primefaces dialog in commandButton action?

Issue

My problem is. I have a primefaces dialog (modal window). Inside it has a commandbutton. When i open the dialog and click in commandbutton, then the inputs outside and behind dialog are validated too. I want process only the inputs inside dialog.

Important say that the i add the dialog in my page by . The dialog is in other file (include).

I tried use process="dialog id" attribute but not work.

Can anyone help me?

Solution

The commandButton generates a POST request submitting the form data of the form enclosing this button to the server. If you want to submit only the form inputs on the dialog enclose the dialog with a <h:form> and to get away with the problem of nesting the forms use appendToBody attribute on the dialog like this:

<p:dialog appendToBody="true">
  <h:form>
  </h:form>
</p:dialog>

This way dialog form will be outside the parent form.

Answered By - Ravi Kadaboina

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More