Dynamic generation of Bar Charts in Primefaces - jsf

I am using Primefaces 4.0. I have a requirement to generate Bar charts depending on the number of results of a query.The Title and color of Bar charts should also be able to set dynamically for all using the query results. Example of bar chart as follows:-
<p:barChart id="barStats"
value="#{Bean.categoryModel}" legendPosition="ne"
style="width:300px;height:250px;"
title="Break Down(Barchart)" barMargin="10" min="0"
barPadding="10" max="40" animate="true" />
In the above example of bar chart the value attribute will load only 1 category model with fixed title.So i was figuring out how can i solve this problem. Further i also need a different color for each bar chart generated.
The query results could be any number from starting from 0(no data).

The solution is to use p:barchart into a p:datagrid. This datagrid will be loaded through a list of barcharts.
Further create the list with a class type which contains barchart,title and color as attributes.And this perfectly solves your problem.
Solution:
<p:dataGrid id="chartdataGrid" var="list" value="#{Bean.chartList}" columns="2" style="border:none;">
<p:barChart
value="#{list.chart}" title="#{list.title}"
style="height:190px;width:350px"
barMargin="20" min="0" barPadding="10" animate="true" seriesColors="#{list.barColor}" />
</p:dataGrid>
if any you need any further clarification for this problem and its detail solution then i will love to provide it.
Hope my Solution helps you.

Related

Unable to set value from a Custom dialog to a field in Maximo

n work order tracking application on Vendor field we need to have a custom look up that would display vendor details based on some condition. I have created a custom dialog in order to display this custom look up. This custom dialog maps to a relationship between WORKORDER and CXDEMO object (CXDEMO holds the data based on custom condition). Now when user clicks on the navigation menu on WORKORDER.VENDOR field then the custom look up appears and the data also gets displayed in the dialog however after selecting the value it does not get persisted to the WORKORDER.VENDOR field. I do understand that this can be achieved using bean class however I would like to understand whether there is any other way to achieve the same. Below is the dialog,
<dialog id="CXDEMO" label="Frame agreement vendors" relationship='CXDEMO'>
<table id="CXDEMO_1" label="Vendors" inputmode="readonly" selectmode="single">
<tablebody displayrowsperpage="6" filterable="true" filterexpanded="true" id="CXDEMO_grid1_1_1_pmalert_table_tablebody">
<tablecol dataattribute="vendor" id="CXDEMO_grid1_1_1_pmalert_table_tablebody_2" mxevent="selectrecord" mxevent_desc="Go To %1" sortable="true" type="link"/>
</tablebody>
</table>
<buttongroup id="CXDEMO_2">
<pushbutton default="true" id="CXDEMO_2_2" label="Cancel" mxevent="dialogcancel"/>
</buttongroup>
</dialog>
You need to specify a bean class to manage your dialog but I don't think you need to create a new one. You should only change your definition to use the lookup bean.
Like this:
<dialog id="CXDEMO" label="Frame agreement vendors" relationship='CXDEMO' beanclass="psdi.webclient.system.beans.LookupBean">
By referencing this bean you tell Maximo what class to use for the important selectrecord event/method.

Group of radio buttons in different location

I am developing a JSF page where I have to place two radio buttons in different locations. First one will have two calendar components, and the next one will have an input text.
The components will be as follows (All components in a single row).
The problem is that the 2 radio buttons are not near each other but having components in between(if they were near each other I could use h:selectOneRadio).
Is there any way to achieve this in JSF or Richfaces?
Any suggestion is appreciated!!!
You could use CSS and position the buttons where they need to be, but if you need to style each one individually that's not going to work.
Or you can use basic radio buttons with <a4j:jsFunction>, something like this:
<input type="radio" onclick="changeValue(1)">
<calendar> …
<input type="radio" onclick="changeValue(2)">
<h:input… >
<a4j:jsFunction name="changeValue" >
<a4j:param assignTo="#{bean.value}" name="value" />
</a4j:jsFunction>

h:panelGrid with embedded h:graphicImage not displaying correctly

My question regards the display of h:graphicImage within a h:panelGrid
<h:panelGrid border="0" cellspacing="0" cellpadding="0" >
<h:graphicImage height="63" width="270" value="images/NewAOnly.PNG" />
<h:graphicImage height="60" width="270" value="images/NewABottom.PNG" />
</h:panelGrid>
The top .PNG file is 270 x 63 with no border area. The bottom .PNG is 270 x 60 with no border area.
My question is, with border="0", cellspacing="0" and cellpadding="0", why do the two images not sit one on top of the other with no space between them?
This will happen when you use a strict doctype. Long story short, check the article on Mozilla Developer Network: Images, Tables, and Mysterious Gaps. As to the doctype, you can fix this by using a quirks or transitional doctype (as a quick test, remove the DOCTYPE line altogether). This is however not recommended these days.
If you're absolutely positive that the table is the right tool for your concrete functional requirement of displaying images this way and e.g. a div is for some dubious reason absolutely not an option (and you're fully aware of the importance of "Semantic HTML"), then you can fix this by making the images in table cells block level elements.
td img {
display: block;
}
Please note that this problem is completely unrelated to JSF. JSF is in the context of this question merely a HTML code generator.

How to set <aui:button> icon in Liferay without using Javascript?

I'm trying to set icon to <aui:button> like on this tutorial.
But solution described there doesn't work well in my case, because I have a table and on each row I have a button with different resourceUrl. Like this:
<portlet:resourceURL id="saveReport" var="saveReportURL">
<portlet:param name="reportId" value="${report.reportId}" />
</portlet:resourceURL>
<aui:button onclick="location.href = '${saveReportURL}'">
Is it possible to set icon in <aui:button> without using JavaScript as described in tutorial?
Thanks
You can write this below code for setting icon in liferay alloy button
<aui:button type="cancel" cssClass="btn-info" icon="icon-upload-alt" iconAlign="right" value="upload" />
you need to use the icon attribute for this setting "Icon glyphs"
you need to use cssClass for adding extra design button class for the designing
you need to set iconAlign attribute for left or right side of the button text value
You should be able to add an icon to a button without using JavaScript by adding one of these Icon CSS classes to your button. For example, if you wanted to create a button with a calendar icon, your code should look something like this:
<aui:button class="icon-calendar" ... />

Why is MyFaces/Trinidad rendering my disabled inputTexts as divs?

Deceptively simple question, but I'm at my wits' end here.
I have a document. It contains a form. Which contains a subform. Which contains a read-only text field. Here's the relevant part of the structure:
<tr:document ...>
<tr:form ....>
<tr:subform ...>
<div ...><div ...>
<tr:panelGroupLayout>
<tr:panelFormLayout>
<tr:inputText id="selectedAmount"
label="#{...}"
value="#{...}"
disabled="true" />
</tr:panelFormLayout>
</tr:panelGroupLayout>
</div></div>
</tr:subform>
</tr:form>
</tr:document>
(none of the attributes on the ... are setting style information.)
Why is it that MyFaces produces for the innermost element a div rather than input type="text"? I've seen forms with (apparently) this exact same structure that didn't have this problem.
The reason why this is silly and unacceptable is because the div, when empty, doesn't show as a box but as a single line (the border collapses since there is no content and no height style). Manually setting a height via css isn't acceptable either, because the font may vary from computer to computer. I really just wanted it to always render an input tag.
Any ideas? Feel free to ask for details if you want to confirm any suspicion. There's too many data for me to just dump everything in here.

Resources