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 .
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 .
