Create charts and Graph to your web Application Using Cewolf and Jfree API

Cewolf is based on Jfree and uses it’s rendering engine to render the final chart image into the clients response stream. No files are created on server side. Everything is based on lightweight session objects and dynamic data analysis. Cewolf consists of one servlet which handles the chart rendering and a taglibrary which translates the chart definition included in the JSP into an HTML img tag which consults the rendering servlet for retrieval of the appropriate chart.

How to Create Graph using Cewolf

For creating graph using cewolf  Api download cewolf  from http://cewolf.sourceforge.net/new/index.html after downloading  the cewolf   add the cewolf  libraies in your lib folder and  give the servlet  mapping on your web.xml file

<servlet><servlet-name>CewolfServlet</servlet-name>

<servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>

<init-param>
<param-name>storage</param-name>
<param-value>de.laures.cewolf.storage.TransientSessionStorage</param-value>

</init-param>

<!-- turn on or off debugging logging -->

<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>

</init-param>

</servlet>

After servlet mapping you can use cewolf  tag  in the jsp . For using the cewolf  api you  have to create dataset using jfree chart .(Below is the example of the how to create dataset using Jfree chart ). You can use different – different dataset according to the your need   http://www.jfree.org/jfreechart/api/javadoc/index.html

package foo.bar.util;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.jfree.data.category.DefaultCategoryDataset;
import java.io.Serializable;
import de.laures.cewolf.DatasetProduceException;
import de.laures.cewolf.DatasetProducer;

public class  ProduceData implements DatasetProducer, Serializable {
private static final Log log = LogFactory
public ProduceData () {
}

public Object produceDataset(Map params) throws DatasetProduceException {
DefaultCategoryDataset defaultcategorydataset = new DefaultCategoryDataset();
defaultcategorydataset.addValue(1, "a", "12-3-05");
defaultcategorydataset.addValue(5, "a", "13-3-05");
defaultcategorydataset.addValue(8, "a", "14-3-05");
defaultcategorydataset.addValue(4, "a", "12-3-05");
defaultcategorydataset.addValue(6, "b", "13-3-05");
defaultcategorydataset.addValue(9, "b", "14-3-05");
defaultcategorydataset.addValue(1, "b", "12-3-05");
defaultcategorydataset.addValue(12, "c", "13-3-05");
defaultcategorydataset.addValue(13, "c", "14-3-05");
defaultcategorydataset.addValue(4, "c", "12-3-05");
return defaultcategorydataset;
}
}

After creating the dataSet object for eg.(ProduceData  produceData=new ProduceData (); ) pass the object to  your jsp and use that dataset ( produceData  object ) inside cewolf  tag.Below is the example how to use  dataset inside the jsp

<%@ include file=”/common/taglibs.jsp” %>
<%@ taglib uri=’/WEB-INF/cewolf.tld’ prefix=’cewolf’ %>
<c:if test=”${produceData ne null}”>
<cewolf:chart id=”scatter” title=”" type=”line” xaxislabel=”" yaxislabel=”Rating” showlegend=”true”>
<cewolf:data>
<cewolf:producer id=”produceData “/>
</cewolf:data>
</cewolf:chart>
<div>
<cewolf:img chartid=”scatter” renderer=”cewolf” width=”900″ height=”300″/>
</div>
</c:if>
<c:if test=”${produceData eq null}”>
<div>
No data found
</div>
</c:if>

By this way the graph or chart  is rendered on your jsp .But  If you want any graphic on your chart such as your want to change the background color , dotted line in the graphs , stroke points in  lines such as triangle ,curicular etc for all these things you have to write chartpostprocessor . Below is the example how to write chartpostprocessor and how to use chartpostprocessor inside the cewolf  tag .

Create a  chartpostprocessor class using Jfree api  for example :

package com.foo.util;
import java.awt.*;
package foo.bar.util
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.CategoryLabelPositions;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.renderer.category.LineAndShapeRenderer;
import org.jfree.data.Range;

public class  MyChartPostProcessor implements ChartPostProcessor {

public void processChart(java.lang.Object object, java.util.Map map) {

JFreeChart jfreechart = (JFreeChart) object;
jfreechart.setBackgroundPaint(Color.white);

CategoryPlot categoryplot = (CategoryPlot) jfreechart.getPlot();
categoryplot.setBackgroundPaint(Color.white);
categoryplot.setRangeGridlinePaint(Color.lightGray);

NumberAxis numberaxis = (NumberAxis) categoryplot.getRangeAxis();

Range range = new Range(0, 11);
numberaxis.setRange(range, false, true);

final CategoryPlot plot = (CategoryPlot) jfreechart.getPlot();

final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();

rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
rangeAxis.setAutoRangeIncludesZero(true);

final LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();

renderer.setSeriesStroke(
0, new BasicStroke(
2.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND,
1.0f, new float[] {10.0f, 6.0f}, 0.0f
)
);

renderer.setSeriesStroke(
1, new BasicStroke(
2.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND,
1.0f, new float[] {6.0f, 6.0f}, 0.0f
)
);

// rotate x-axis label by 90degrees

CategoryAxis domainAxis = categoryplot.getDomainAxis();
domainAxis.setCategoryLabelPositions(CategoryLabelPositions.createUpRotationLabelPositions(Math.PI / 2.0));
}
}

Now create a object of  your  chartpostprocessor in your jsp and use that object inside the cewolf  tag for example

<%@ include file=”/common/taglibs.jsp” %>
<%@ taglib uri=’/WEB-INF/cewolf.tld’ prefix=’cewolf’ %>
<c:if test=”${produceData ne null}”>
<jsp:useBean id=”postproducer” class=”foo.bar.util.MyChartPostProcessor “/>
<cewolf:chart id=”scatter” title=”" type=”line” xaxislabel=”" yaxislabel=”Rating” showlegend=”true”>
<cewolf:data>
<cewolf:producer id=”produceData “/>
</cewolf:data>
<cewolf:chartpostprocessor id=”postproducer“/>
</cewolf:chart>
<div>
<cewolf:img chartid=”scatter” renderer=”cewolf” width=”900″ height=”300″/>
</div>
</c:if>
<c:if test=”${produceData eq null}”>
<div>
No data found
</div>
</c:if>

By using the chartpostprocessor you can make your chart or graph more attractive .

Free Flash Graph Or Chart – Create Graph Using Fusion Chart (http://www.fusioncharts.com/free/)

FusionCharts Free is a flash charting component that can be used to render data-driven & animated charts for your web applications and presentations.

It is a cross-browser and cross-platform solution that can be used with PHP, Python, Ruby on Rails, ASP, ASP.NET, JSP, ColdFusion, simple HTML pages or even PowerPoint Presentations to deliver interactive and powerful flash charts.

How to Create Chart  Using Fusion Chart

Chart creating using fusion free is very easier . You have only create a xml of your data and includue FusionChartsHTMLRenderer.jsp , and swf file (according to the type of graph you need which is inside the \FusionChartsFree\Charts folder ) in your jsp . It automatically generate  flash chart in your jsp.

Here is the example how to fusion chart in the jsp

<%@ page import=”foo.bar.model.RatingGraph” %>
<%@ page import=”java.util.List” %>
<%@ include file=”/common/taglibs.jsp” %>
<%

String strXML = “”;
strXML += “<graph caption=” xAxisName=” yAxisName=” decimalPrecision=’0′ formatNumberScale=’0′ chartRightMargin=’30′>”;
strXML += “<set name=’” One “‘ value=’” 1 “‘ hoverText=’one’/>”;
strXML += “<set name=’” two “‘ value=’” 2 “‘ hoverText=’one’/>”;
strXML += “<set name=’” three”‘ value=’” 3 “‘ hoverText=’one’/>”;
strXML += “<set name=’” four”‘ value=’” 4 “‘ hoverText=’one’/>”;
strXML += “</graph>”;
}
%>

<jsp:include page=”/includes/FusionChartsHTMLRenderer.jsp” flush=”true”>
<jsp:param name=”chartSWF” value=”/flash/FusionCharts/FCF_Bar2D.swf”/>
<jsp:param name=”strURL” value=”"/>
<jsp:param name=”strXML” value=”<%=strXML%>”/>
<jsp:param name=”chartId” value=”myNext”/>
<jsp:param name=”chartWidth” value=”200″/>
<jsp:param name=”chartHeight” value=”150″/>
<jsp:param name=”debugMode” value=”false”/>
</jsp:include>

Fusion chart look more attractive and cool .

Chat with Rajendra Nautiyal