Fusionchart

From Documentation

Fusionchart


Employment/Purpose

The Fusionchart which integrates the FusionCharts Free with ZK. The technology makes use of Flash to draw charts and enables the user to customize the style of charts such as bar or line colors.

Fusionchart separates the presentation layer from the data, providing the users with a API to supply data in a clean MVC based manner. In addition to updating the data dynamically, it provides a pleasant user experience as the visual display is updated immediately.

Common Attributes

Name
Description
title Title of chart
threeD Set true to show three dimensional graph(Note: Some types may not support 3D)
type Type of chart
fgAlpha Foreground alpha
model Model of chart

Supported Model

Type
Model
3D
bar CategoryModel *
line CategoryModel, XYModel X
pie PieModel O
combination CategoryModel O
stacked_bar CategoryModel O
area CategoryModel X
gantt GanttModel X

Note: 3D bar chart of Fusionchart does not support horizontal orientation now. If you want to use horizontal 3D bar chart, please use Chart component.

Example

Bar Chart

2D Bar Chart

Vertical Bar Chart

Barchart 2d.png

<zk>
<fusionchart id="mychart" title="Bar Chart" type="bar"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

Horizontal Bar Chart

Barchart 2d h.png

<zk>
<fusionchart id="mychart" title="Horizontal Bar Chart" type="bar" orient="horizontal"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

3D Vertical Bar Chart

Barchart 3d.png

<zk>
<fusionchart id="mychart" title="3D Bar Chart" type="bar" threeD="true"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

Bar Chart Configurations

You could set the color of every category by the CategoryChartConfig, here's a sample code for setting first one and second one to different color .

  	CategoryChartConfig config = new CategoryChartConfig();
  	SeriesPropertiesMap seriesPropertiesMap = config.getSeriesPropertiesMap();

      // Use the index to config the chart 
      // The color value is required to be HEX code without # due to the restriction of Fuscionchart core. 
	seriesPropertiesMap.createSeriesProperties(0).addProperty("color","AFD8F8");  
	seriesPropertiesMap.createSeriesProperties(1).addProperty("color","FF8000");

      /* Or  another way , use category name instead of index. */

//      seriesPropertiesMap.createSeriesProperties("2001").addProperty("color","AFD8F8");
//	seriesPropertiesMap.createSeriesProperties("2002").addProperty("color","FF8000");         



       fusionchart.setChartConfig(config);

The color is changed after we set the config ,here's the demo image. Fusionchart barchartconfig.png

Line Chart

Linechart.png

<zk>
<fusionchart id="mychart" title="Line Chart" type="line"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		XYModel xymodel = new SimpleXYModel();
		xymodel.addValue("2001", new Integer(20), new Integer(120));
		xymodel.addValue("2001", new Integer(40), new Integer(135));
		xymodel.addValue("2001", new Integer(60), new Integer(140));
		xymodel.addValue("2001", new Integer(80), new Integer(160));
		xymodel.addValue("2001", new Integer(25), new Integer(120));
		xymodel.addValue("2001", new Integer(75), new Integer(135));
		xymodel.addValue("2001", new Integer(65), new Integer(140));
		xymodel.addValue("2001", new Integer(85), new Integer(160));
		xymodel.addValue("2002", new Integer(30), new Integer(120));
		xymodel.addValue("2002", new Integer(31), new Integer(135));
		xymodel.addValue("2002", new Integer(32), new Integer(140));
		xymodel.addValue("2002", new Integer(90), new Integer(160));
		xymodel.addValue("2002", new Integer(35), new Integer(120));
		xymodel.addValue("2002", new Integer(55), new Integer(135));
		xymodel.addValue("2002", new Integer(75), new Integer(140));
		xymodel.addValue("2002", new Integer(80), new Integer(160));
		mychart.setModel(xymodel);
	</zscript>
</fusionchart>
</zk>

Pie Chart

2D Pie Chart

Piechart 2d.png

<zk>
<fusionchart id="mychart" title="Pie Chart" type="pie"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		PieModel piemodel = new SimplePieModel();
		piemodel.setValue("C/C++", new Double(12.5));
		piemodel.setValue("Java", new Double(50.2));
		piemodel.setValue("VB", new Double(20.5));
		piemodel.setValue("PHP", new Double(15.5));
		mychart.setModel(piemodel);
	</zscript>
</fusionchart>
</zk>

3D Pie Chart

Piechart 3d.png

<zk>
<fusionchart id="mychart" title="3D Pie Chart" type="pie" threeD="true"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		PieModel piemodel = new SimplePieModel();
		piemodel.setValue("C/C++", new Double(12.5));
		piemodel.setValue("Java", new Double(50.2));
		piemodel.setValue("VB", new Double(20.5));
		piemodel.setValue("PHP", new Double(15.5));
		mychart.setModel(piemodel);
	</zscript>
</fusionchart>
</zk>

Combination Chart

2D Combination Chart

Combinationchart 2d.png

<zk>
<fusionchart id="mychart" title="2D Combination Charts" type="combination"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
		import org.zkoss.zul.FusionchartCategoryModel.FusionchartCombinSeries;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		FusionchartCombinSeries productA = new FusionchartCombinSeries(
				"Product A", 128, "P");
		FusionchartCombinSeries productB = new FusionchartCombinSeries(
				"Product B", 128, "P");
		FusionchartCombinSeries productC = new FusionchartCombinSeries(
				"Product C", 128, "S");
		catmodel.setValue(productA, "08/01", new Integer(20));
		catmodel.setValue(productA, "08/02", new Integer(35));
		catmodel.setValue(productA, "08/03", new Integer(40));
		catmodel.setValue(productA, "08/04", new Integer(55));
		catmodel.setValue(productB, "08/01", new Integer(40));
		catmodel.setValue(productB, "08/02", new Integer(60));
		catmodel.setValue(productB, "08/03", new Integer(70));
		catmodel.setValue(productB, "08/04", new Integer(90));
		catmodel.setValue(productC, "08/01", new Integer(90));
		catmodel.setValue(productC, "08/02", new Integer(30));
		catmodel.setValue(productC, "08/03", new Integer(60));
		catmodel.setValue(productC, "08/04", new Integer(10));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

3D Combination Chart

Combinationchart 3d.png

<zk>
<fusionchart id="mychart" title="3D Combination Charts" type="combination" threeD="true"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
		import org.zkoss.zul.FusionchartCategoryModel.FusionchartCombinSeries;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		FusionchartCombinSeries productA = new FusionchartCombinSeries(
				"Product A", 128, "P");
		FusionchartCombinSeries productB = new FusionchartCombinSeries(
				"Product B", 128, "P");
		FusionchartCombinSeries productC = new FusionchartCombinSeries(
				"Product C", 128, "S");
		catmodel.setValue(productA, "08/01", new Integer(20));
		catmodel.setValue(productA, "08/02", new Integer(35));
		catmodel.setValue(productA, "08/03", new Integer(40));
		catmodel.setValue(productA, "08/04", new Integer(55));
		catmodel.setValue(productB, "08/01", new Integer(40));
		catmodel.setValue(productB, "08/02", new Integer(60));
		catmodel.setValue(productB, "08/03", new Integer(70));
		catmodel.setValue(productB, "08/04", new Integer(90));
		catmodel.setValue(productC, "08/01", new Integer(90));
		catmodel.setValue(productC, "08/02", new Integer(30));
		catmodel.setValue(productC, "08/03", new Integer(60));
		catmodel.setValue(productC, "08/04", new Integer(10));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

Stacked Chart

2D Stacked Chart

Stackedchart 2d.png

<zk>
<fusionchart id="mychart" title="2D Stacked Bar Charts" type="stacked_bar"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

3D Stacked Chart

Stackedchart 3d.png

<zk>
<fusionchart id="mychart" title="3D Stacked Bar Charts" type="stacked_bar"  threeD="true"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

Area Chart

Areachart.png

<zk>
<fusionchart id="mychart" title="Area Charts" type="area" 
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
</fusionchart>
</zk>

Gantt Chart

Gantt.png

<zk>
<fusionchart id="mychart" title="Gantt Chart" type="gantt"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
		import org.zkoss.zul.GanttModel.GanttTask;
		import java.util.*;
		
		public Date date(int year, int month, int day) {
			final java.util.Calendar calendar = java.util.Calendar.getInstance();
			calendar.set(year, month - 1, day);
			return calendar.getTime();
		}
	
		GanttModel ganttmodel = new GanttModel();
		
		String scheduled = "Scheduled";
		String actual = "Actual";
		
		ganttmodel.addValue(scheduled,
				new GanttTask(
						"Write Proposal", date(2008, 4, 1), date(2008, 4, 5), 0.0));
		ganttmodel.addValue(scheduled, 
				new GanttTask(
						"Requirements Analysis", date(2008, 4, 10), date(2008, 5, 5), 0.0));
		ganttmodel.addValue(scheduled,
				new GanttTask(
						"Design Phase", date(2008, 5, 6), date(2008, 5, 30), 0.0));
		ganttmodel.addValue(scheduled, 
				new GanttTask(
						"Alpha Implementation", date(2008, 6, 3), date(2008, 7, 31), 0.0));

		ganttmodel.addValue(actual,
				new GanttTask(
						"Write Proposal", date(2008, 4, 1), date(2008, 4, 3), 0.0));
		ganttmodel.addValue(actual, 
				new GanttTask(
						"Requirements Analysis", date(2008, 4, 10), date(2008, 5, 15), 0.0));
		ganttmodel.addValue(actual,
				new GanttTask(
						"Design Phase", date(2008, 5, 15), date(2008, 6, 17), 0.0));
		ganttmodel.addValue(actual, 
				new GanttTask(
						"Alpha Implementation", date(2008, 7, 1), date(2008, 9, 12), 0.0));
		mychart.setModel(ganttmodel);
	</zscript>
	<attribute name="onClick">
		Map data = (Map) event.getData();
		Messagebox.show(data.toString());
	</attribute>
</fusionchart>
</zk>

Event Handling

Fusionchart supports mouse clicking event. You can receive information from event object, including clicked series, category, and value.

The following sample will show how to get an event object and display information on a message dialog.

<zk>
<fusionchart id="mychart" title="Bar Chart" type="bar"
	width="500" height="250" fgAlpha="128">
	<zscript>
		import org.zkoss.zul.*;
		import java.util.*;
	
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		mychart.setModel(catmodel);
	</zscript>
	<attribute name="onClick">
		Map data = (Map) event.getData();
		Messagebox.show(data.toString());
	</attribute>
</fusionchart>
</zk>

Supported Events

Name
Event Type
onClick Mouse clicking event. You can get information of clicked area from this event.

Supported Children

*None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2012/04/17


Version Date Content
6.0.1 April. 2012 add new component


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.