Connext Graphs Overview

Introduction

The basic idea behind connext-graphs is to make integrating the Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart/) as easy as possible.

History

The project was started because I wanted to use a chart library that looked similar to the Google charts in their Analyzer application. Struts 2.0 has a plug-in for the JFreeChart library but I wanted a chart that a user could interact with. When the user hovers over a chart point the properties of that point is shown and in this way the chart does not feel like an empty piece of information plonked on the site to take up space.

Features

1. Written as a Struts 2.0 plug-in so the initialization of the Flash object is taken care of
2. The chart data generation uses Java objects to model the different aspects of the chart
3. The styling is configurable by the data sent to the chart
4. Some aspects of the chart is stylable via CSS

To Be Done

1. Implement the Pie Charts
2. Remove the link to the Open Flash Chart site because the chart does this
3. Small fixes and improvements

Alternatives

1. JFreeChart (http://www.jfree.org/jfreechart/)
2. CeWolf (http://cewolf.sourceforge.net/new/index.html)
3. Fusion Charts (http://www.fusioncharts.com/)
4. Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart/)

Open Flash Chart is shown as an alternative because it includes a Java class to output the data file used by the chart library. This Java class was not used when developing connext-graphs.

Sketch Chart

The sketch chart is based upon the bar chart but has an extra `fun` option that indicates how interesting the chart should be rendered.

How to use

1. Create a chart controller that specifies the properties of the charting area

OFCGraphController controller = new OFCGraphController();
controller.getTitle().setText("Example Sketch Bar Chart");
controller.getTitle().setSize(12);
controller.getLabels().setLabels(Arrays.asList(labels));
controller.getYLegend().setText("No. of tasks");
controller.getYLegend().setColor("#8b0000");
controller.getYLegend().setSize(12);
controller.getXLegend().setText("Months");
controller.getXLegend().setColor("#8b0000");
controller.getXLegend().setSize(12);
controller.getColor().getBgColor().setColor("#FFFFFF");
controller.getColor().getXAxisColor().setColor("#e3e3e3");
controller.getColor().getYAxisColor().setColor("#e3e3e3");
controller.getColor().getXGridColor().setColor("#e3e3e3");
controller.getColor().getYGridColor().setColor("#e3e3e3");

2. Create the chart data series

It is possible to mix and match the different series types so you could a line chart and a sketch chart combined.

DefaultOFCGraphDataModel model = new DefaultOFCGraphDataModel();
model.setData(Arrays.asList(data01));
model.setFormat(new DecimalFormat("###0.000"));
model.setSeriesType(new OFCBarSketchSeriesType(55, 10, "#d070ac", "#000000", "Test", 10));

The offset parameter of OFCBarSketchSeriesType(alpha, offset, color, outlineColor, text, size) specifies the fun aspect of the chart.

The following values can be used:-

• 0 - 3 Boring
• 4 - 6 Fun
• 7 - Interesting

3. Add the series to the charting area

controller.add(model);

4. Render the chart data

value = controller.render();

Here the data string used by Open Flash Chart is assigned to the value property and this property is read by the graph.jsp view.

<%@ include file="include.jsp" %>
<s:property value="value" escape="false" />

5. Include the Flash component

Of course none of this would work if the Open Flash Chart object was not embedded into the Struts view.

The following :-

• declares the tag library of connext-graphs
• creates the Flash object
• links the data from the data view defined in steps 1 - 4

<%@ taglib prefix="m" uri="/connext" %>

<m:graph
id="graph"
width="400"
height="400"
align="middle"
bgcolor="#FFFFFF"
url="/Graph_exampleSketch.html"
/>

Screen shots

Figure 1 : Hovering over a chart point

Figure 2 : Sketch chart with an offset of 10

Figure 3 : Sketch chart with an offset of 2

Figure 4 : Sketch chart with an offset of 5

Figure 5 : Sketch chart with an offset of 15