JSF Chart Creator

[david.gilbert]

Can I customize how a chart looks like ? for example, for a 2D line chart can I set the weight of the line and the points to be visible and a tooltip on the points ?

Yes, of course. Most of the methods in the JFreeChart API are concerned with customising the appearance of the charts. For example, to change the weight of the lines in a chart, get a reference to the renderer then call the setSeriesStroke(int, Stroke) method.

[kinster]

Hi. I just downloaded the new release for ChartCreator... Thanks!

I'm trying to get a simple chart work into an IBM portlet. Is it possible? I just copied your example, for the jsf-comp/Chart creator page. But it doesn't work in my portlet. I followed the instructions...but chart doesn't appear. I copied and pasted your <c:chart> code into my portletview jsp.

my bean has your code for getPieDataSet. Also, I tried changing the context-param to true and false...still doesn't appear...

Thanks for your help!!

Hi

it doesn't appear on mine either. I've configured it to be the same as your example

[dcurry]

I'm trying to use Chart Creator 1.2.0 in under Liferay 4.2.2 on JBoss 4.0.5 (Tomcat 5.5) with MyFaces 1.1.5 using MyFacesGenericPortlet. The chart image doesn't appear when the portlet initializes (the broken image icon displays instead).

I took my example chart from the Chart Creator web application. It works just fine as a JSF servlet application in the same configuration with USE_CHARTLET set to "true". When I deploy it as a portlet, I set USE_CHARTLET to "false".

The problem seems to be a dilema in ChartListener:

When invoked from MyFacesGenericPortlet, the ExternalContext of the RESTORE_VIEW phase has the chartId parameter in its RequestParameterMap, however the ExternalContext response type is ActionResponse. So, although handleChartRequest() will be called from afterPhase(), writeChartWithPortletResponse() will not be called because the response is an ActionResponse, not a RenderResponse.

If ChartListener is changed to handle the RENDER_RESPONSE phase, the chartId parameter is not present in the RequestParameterMap, so handleChartRequest() will never be called.

Unfortunately, the ActionResponse interface does not contain an equivalent of RenderResponse's getOutputStream() method. This prevents a simple approach of adding a "writeChartWithActionResponse" method.

This may not happen with other JSF implementations or portal containers because the equivalent of MyFacesGenericPortlet uses a response type that implements RenderResponse during the RESTORE_VIEW phase.

I have to say that I'm stuck on this. I can see what's wrong, but I can't figure out what to do about it. Any help would be much appreciated.

[tg]

dcurry, I have the same problem. If you happen to find any solution please let me know. Have you managed to see any chart ( on your portlet ) with USE_CHARTLET set to true?

Regards,
tg

[tktbus]

Does anyone have a working example of using Chart Creator in a portlet?

I am developing in RAD 6.0 running on Websphere Portal 5.1. I am not using MyFaces, but am having the same trouble as many others in getting
the portlet to display the chart image.

Thank you.

[Scott Reynolds]

The usual problem -- simple example within my webapp works fine except that graph images are not rendered.
App log shows an exception:
java.lang.NoClassDefFoundError
at org.jfree.chart.ChartFactory.createAreaChart(ChartFactory.java:864)
at net.sf.jsfcomp.chartcreator.utils.ChartUtils.createChartWithCategoryDataSet(Unknown Source)
at net.sf.jsfcomp.chartcreator.utils.ChartUtils.createChartWithType(Unknown Source)
at net.sf.jsfcomp.chartcreator.ChartListener.handleChartRequest(Unknown Source)
at net.sf.jsfcomp.chartcreator.ChartListener.afterPhase(Unknown Source)
at org.apache.myfaces.lifecycle.PhaseListenerManager.informPhaseListenersAfter(PhaseListenerManager.java:89)
at org.apache.myfaces.lifecycle.LifecycleImpl.restoreView(LifecycleImpl.java:181)
at org.apache.myfaces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:66)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:137)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:269)

Chartlet is configured and mapped just as in the example, so I have to wonder why the listener is being invoked. I did notice that chartcreator-1.2.0.jar contains its own faces-config.xml which includes...
<lifecycle>
<phase-listener>net.sf.jsfcomp.chartcreator.ChartListener</phase-listener>
</lifecycle>
Could that be a problem?
The line reported in the exception has ChartFactory attempting to instantiate JFreeChart -- I don't see how you can possibly be in ChartFactory and not be able to load JFreeChart from the exact same package.

[Scott Reynolds]

Well, that was weird. Restarted tomcat a few times, blowing away all of its cached files, and suddenly my charts appear. Guess I'll file that one away under "Gremlins".

[Dipla]

Hi !


How can I change the range of my y-axis to a fix value ? (0-100)

I don't see any tag offering this configuration.


Thank you in advance

[polly]

Hi !


How can I change the range of my y-axis to a fix value ? (0-100)

I don't see any tag offering this configuration.


Thank you in advance

I also have this problem - I would like to set the range of the y axis. I wanted to use an 'xyarea' graph, but this seems to always start the y axis at 0 - my data consists of large numbers which are very close together so this makes the graph unreadable.

Looking at the examples, it seems to vary with the chart implementation. I tried using 'timeseries' which behaves a bit better for my needs - the scale on the y axis is generated as a range slightly larger than the range of my data, and the plot is more readable. Unfortunately, though, I don't want time series data on the x axis! I would love to know if there is any way to configure the different chart types to behave like this... if I could get 'xyarea' to work in the same way, that would be ideal.

[polly]

answering my own question, in case anyone else is interested

I don't think there's a way to do this through the taglib API. But a small amount of hacking around with the source revealed that what i wanted was this sort of thing:

in ChartUtils.createChartWithXYDataSet()

Code: Select all

			//default to not include zero
			if (chart.getXYPlot().getRangeAxis() instanceof NumberAxis) {
				NumberAxis rangeAxis = (NumberAxis) chart.getXYPlot().getRangeAxis();
				rangeAxis.setAutoRangeIncludesZero(false);
			}

A bit quick and dirty but it fixed my problem!

[dmosses]

Hi - I'd love to make use of chartcreator in my web app, but I really need to be able to produce meter charts. Is it possible to do this with chartcreator?

I thought I might be able to get at the various attributes of the chart and change as required by binding it to a my backing bean, but the type attribute is required...

[Leesy]

Hi,

I was just wondering if anyone has tried caching the images produced by JSF Chart Creator before? Our images don't change that often so we are considering caching the images to speed our application up a little. Has anyone tried adding some caching to JSF chart creator before?

[aloleary]

Any comments on JSF / Chart Creator having any Ajax support capability ? like Ajax4JSF wrapper etc ...

This would be fantastic... Imagine a JFree chart dynamically updating in the page without page re-load...

Any pointers on anyone working on this ... if not I will try and make something using Ajax4Jsf

-A-

[cagatay_civici]

Caching and Ajax features are coming soon:)

[MurphyRic]

Hello ALL,

I am trying to generate the JSF chart dynamically for 'n' datasets(say).
This parameter 'n' needs to be known dynamically and that many number of charts (say 3dBar) need to be generated.

All I need is generate the <c:chart> tag 'n' number of times dynamically so that in turn creates the Charts respectively.
confused with which class to use:-
net.sf.jsfcomp.chartcreator.taglib.ChartTag or UIChart
In the below code ,all I could see is "net.sf.jsfcomp.chartcreator.taglib.ChartTag@iu2345910kl" in the grid for 'n' numbers.
It looks like the chart is not created.

I don't really know if it is possible as I am very new to JSF.
I request you all to please help me on this.


buildUI method in Class DataBean
-----------------------------------------------

Code: Select all

public void getChartData(ActionEvent ae)
	{
                //Calls the database to get the List
		List data =	getDataList();
		buildUI(data);
	}
	


private void buildUI(List data)
	{
		try {

			FacesContext context = FacesContext.getCurrentInstance();
			UIForm form = (UIForm) context.getViewRoot().findComponent("form");
			UIPanel dataPanel = (UIPanel) form.findComponent("reportdata");
			dataPanel.getChildren().clear();
			if (data.size() > 0) {
				for (int i = 0; i < data.size(); i++) {
					UIOutput outputComponent = null;
					UIGraphic imageComponent = null;

					ReportOutTO to = (ReportOutTO) data.get(i);
					 DefaultCategoryDataset defaultcategorydataset = new DefaultCategoryDataset();
						defaultcategorydataset.addValue(to
								.getEntryDuration(), to.getEmpId(),
								to.getEntryStartTime());
					/**
					 * <c:chart
					 * datasource="#{BarCharts.sourceProvider.hourlyReportOfEmployees}"
					 * type="stackedbar" is3d="true"
					 * colors="magenta,#CACACA,blue" title="Chart with Clickable
					 * Regions and Tooltips" orientation="vertical"
					 * usemap="#stackedbarmap" generateMap="stackedbarmap"
					 * ongeneratedimagemapclick="stackedChartClick">
					 * <c:chartAxis domain="true" verticalTickLabels="true"/>
					 * </c:chart>
					 */
					
					UIChart chart = new UIChart();
					chart.setDatasource(defaultcategorydataset);
					 chart.setType("stackedbar"); chart.setIs3d(true);
					 chart.setBackground("magenta,#CACACA,blue");
					 chart.setTitle("My Chart");
					chart.setOrientation("vertical");
					 chart.setUsemap("#stackedbarmap");
					 chart.setGenerateMap("stackedbarmap");
					 chart.setOngeneratedimagemapclick("stackedChartClick");
					 UIChartAxis chartAxis = new UIChartAxis();
					chartAxis.setDomain(true);
					chartAxis.setVerticalTickLabels(true);
					
					ChartData chartData = new ChartData(chart);
					JFreeChart freeChart = ChartUtils.createChartWithCategoryDataSet(chartData);
					//ChartRenderer ren = new ChartRenderer();

					/*net.sf.jsfcomp.chartcreator.taglib.ChartTag tag = new ChartTag();
					tag.setDatasource("DataBean.defaultcategorydataset");
					tag.setType("stackedbar");
					tag.setIs3d("true");
					tag.setBackground("magenta,#CACACA,blue");
					tag.setTitle("Esse Chart");
					tag.setOrientation("vertical");
					tag.setUsemap("#stackedbarmap");
					tag.setGenerateMap("stackedbarmap");
					tag.setOngeneratedimagemapclick("stackedChartClick");*/

					// 1st column
					//outputComponent = new UIOutput();
					//ren.encodeBegin(context, freeChart);

					outputComponent.setValue(freeChart);
					dataPanel.getChildren().add(outputComponent);

					net.sf.jsfcomp.chartcreator.taglib.ChartAxisTag axis = new ChartAxisTag();
					axis.setDomain("true");
					axis.setVerticalTickLabels("true");
                     
					//ren.encodeEnd(context, chart);
					
					// 2nd column
					outputComponent = new UIOutput();
					outputComponent.setValue(" ");
					dataPanel.getChildren().add(outputComponent);
					// 3rd column
					outputComponent = new UIOutput();
					outputComponent.setValue(to.getEmpId());
					dataPanel.getChildren().add(outputComponent);

				}
			}
			dataPanel.setRendered(true);
		} catch (Exception e) {
			log.error(e);
			e.printStackTrace();
		}

	}

JSP- code
------------

Code: Select all

	 <f:view>
   			<h:form id="form">	
		   			<h:panelGrid styleClass="title-panel">
		        		<h:outputText value="My Report of Employees" styleClass="title-panel-text"/>
		        		<h:outputText value="Powered By Dynamic Faces" styleClass="title-panel-subtext"/>
		  		  	</h:panelGrid>
		  		  	<h:panelGrid border="1" columns="2">
		  		  	  <h:commandButton id="getReport" value="Get Report" 
	                onclick="DynaFaces.fireAjaxTransaction(this, {});return false;"
	                actionListener="#{DataBean.getChartData}" />
	                </h:panelGrid>
			   			
       		 
       		        <h:panelGrid id="reportdata" border="1" columns="3"
			       		 styleClass="panel-data-border" rendered="false">
					       		<h:panelGrid>
						            <f:facet name="header">
						                <h:outputText value="Keyer Graph"/>
						            </f:facet>
					        	</h:panelGrid>
						        <h:panelGrid>
						            <f:facet name="header">
						                <h:outputText value="No.of Srvc Lines"/>
						            </f:facet>
							    </h:panelGrid>
						        <h:panelGrid>
						            <f:facet name="header">
						                <h:outputText value="Name"/>
						            </f:facet>
						        </h:panelGrid>
			         </h:panelGrid>
       		 
				<script>
					function stackedChartClick(data) {
						alert(data);
					}
				</script>	
		
				
			</h:form>
   </f:view>
	

Thanks and Regards