Fusionchart

Demonstration:
Java API: Fusionchart
JavaScript API: Fusionchart
Style Guide: N/A

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

<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

<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

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

Line Chart

<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

<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

<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

<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

<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

<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

<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

<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

<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

Last Update : 2012/04/17

Anonymous

Fusionchart

Namespaces

More

Page actions

Contents

Fusionchart

Employment/Purpose

Common Attributes

Supported Model

Example

Bar Chart

2D Bar Chart

Vertical Bar Chart

Horizontal Bar Chart

3D Vertical Bar Chart

Bar Chart Configurations

Line Chart

Pie Chart

2D Pie Chart

3D Pie Chart

Combination Chart

2D Combination Chart

3D Combination Chart

Stacked Chart

2D Stacked Chart

3D Stacked Chart

Area Chart

Gantt Chart

Event Handling

Supported Events

Supported Children

Use Cases

Version History