Manipulating Chart Model"

From Documentation
m (correct highlight (via JWB))
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{ZKChartsEssentialsPageHeader}}
 
{{ZKChartsEssentialsPageHeader}}
 
{{Template:UnderConstruction}}
 
  
 
= Manipulating Model =
 
= Manipulating Model =
Line 9: Line 7:
 
In this section, we will create another example to manipulate chart model in MVVM approach.
 
In this section, we will create another example to manipulate chart model in MVVM approach.
  
We get started from creating an <javadoc directory="zk">org.zkoss.zul.XYModel</javadoc> and put the data we want to handle:
+
We get started from creating an <javadoc directory="zkcharts">org.zkoss.chart.model.XYModel</javadoc> and put the data we want to handle:
  
 
==== ChartData.java ====
 
==== ChartData.java ====
Line 66: Line 64:
  
 
|-
 
|-
| <center><tt>line</tt></center>
+
| <code>line</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>spline</tt></center>
+
| <code>spline</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>area</tt></center>
+
| <code>area</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>areaspline</tt></center>
+
| <code>areaspline</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>arearange</tt></center>
+
| <code>arearange</code>
| <tt>XYZModel</tt>
+
| <code>XYZModel</code>
  
 
|-
 
|-
| <center><tt>areasplinerange</tt></center>
+
| <code>areasplinerange</code>
| <tt>XYZModel</tt>
+
| <code>XYZModel</code>
  
 
|-
 
|-
| <center><tt>bar</tt></center>
+
| <code>bar</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>column</tt></center>
+
| <code>column</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>columnrange</tt></center>
+
| <code>columnrange</code>
| <tt>XYModel</tt>
+
| <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>pie</tt></center>
+
| <code>pie</code>
| <tt>PieModel</tt>
+
| <code>PieModel</code>
  
 
|-
 
|-
| <center><tt>scatter</tt></center>
+
| <code>scatter</code>
| <tt>XYModel</tt>
+
| <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>bubble</tt></center>
+
| <code>bubble</code>
| <tt>XYModel</tt> or <tt>XYZModel</tt>
+
| <code>XYModel</code> or <code>XYZModel</code>
  
 
|-
 
|-
| <center><tt>gauge</tt></center>
+
| <code>gauge</code>
| <tt>DialModel</tt>
+
| <code>DialModel</code>
  
 
|-
 
|-
| <center><tt>polar</tt></center>
+
| <code>polar</code>
| <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>errorbar</tt></center>
+
| <code>errorbar</code>
| <tt>XYModel</tt>
+
| <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>waterfall</tt></center>
+
| <code>waterfall</code>
| <tt>CategoryModel</tt> or <tt>XYModel</tt>
+
| <code>CategoryModel</code> or <code>XYModel</code>
  
 
|-
 
|-
| <center><tt>funnel</tt></center>
+
| <code>funnel</code>
| <tt>SingleValueCategoryModel</tt>
+
| <code>SingleValueCategoryModel</code>
  
 
|-
 
|-
| <center><tt>errorbox</tt></center>
+
| <code>errorbox</code>
| <tt>XYModel</tt>
+
| <code>XYModel</code>
  
 
|}
 
|}
  
'''Note:''' Since ZK 7.0.1, <javadoc directory="zk">org.zkoss.zul.ChartModel</javadoc> also support ZK Charts as well. But we still recommend to use ZK Charts model instead.
+
'''Note:''' Since ZK 7.0.1, <javadoc directory="zk">org.zkoss.zul.ChartModel</javadoc> also supports ZK Charts as well, however,  it is recommended to use the new ZK <javadoc directory="zkcharts">org.zkoss.chart.model.ChartsModel</javadoc> instead.
  
 
= Examples =
 
= Examples =
Line 147: Line 145:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.PieChartComposer">
 
<div apply="demo.PieChartComposer">
<charts id="chart" type="pie" width="480" height="300" title="Pie Chart Demo"/>
+
<charts id="chart" type="pie" width="480"  
 +
height="300" title="Pie Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 174: Line 173:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.FunnelChartComposer">
 
<div apply="demo.FunnelChartComposer">
<charts id="chart" type="funnel" width="480" height="300" title="Funnel Chart Demo"/>
+
<charts id="chart" type="funnel" width="480" height="300"  
 +
title="Funnel Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 204: Line 204:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.LineChartComposer">
 
<div apply="demo.LineChartComposer">
<charts id="chart" type="line" width="480" height="300" title="Line Chart Demo"/>
+
<charts id="chart" type="line" width="480"  
 +
height="300" title="Line Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 235: Line 236:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYLineChartComposer">
 
<div apply="demo.XYLineChartComposer">
<charts id="chart" type="line" width="480" height="300" title="XY Line Chart Demo"/>
+
<charts id="chart" type="line" width="480"  
 +
height="300" title="XY Line Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 260: Line 262:
 
}
 
}
 
</source>
 
</source>
 +
 
== Spline Chart ==
 
== Spline Chart ==
 
=== Basic Spline Chart ===
 
=== Basic Spline Chart ===
Line 265: Line 268:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.SplineChartComposer">
 
<div apply="demo.SplineChartComposer">
<charts id="chart" type="spline" width="480" height="300" title="Spline Chart Demo"/>
+
<charts id="chart" type="spline" width="480"  
 +
height="300" title="Spline Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 290: Line 294:
 
}
 
}
 
</source>
 
</source>
 +
 
=== XY Spline Chart ===
 
=== XY Spline Chart ===
 
[[File:XYSplineChartDemo.png|480x300px]]
 
[[File:XYSplineChartDemo.png|480x300px]]
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYSplineChartComposer">
 
<div apply="demo.XYSplineChartComposer">
<charts id="chart" type="spline" width="480" height="300" title="XY Spline Chart Demo"/>
+
<charts id="chart" type="spline" width="480"  
 +
height="300" title="XY Spline Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 325: Line 331:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.AreaChartComposer">
 
<div apply="demo.AreaChartComposer">
<charts id="chart" type="area" width="480" height="300" title="Area Chart Demo"/>
+
<charts id="chart" type="area" width="480"  
 +
height="300" title="Area Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 355: Line 362:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYAreaChartComposer">
 
<div apply="demo.XYAreaChartComposer">
<charts id="chart" type="area" width="480" height="300" title="XY Area Chart Demo"/>
+
<charts id="chart" type="area" width="480"  
 +
height="300" title="XY Area Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 380: Line 388:
 
}
 
}
 
</source>
 
</source>
 +
 
=== Stacked Area Chart ===
 
=== Stacked Area Chart ===
 
[[File:StackedAreaChartDemo.png|480x300px]]
 
[[File:StackedAreaChartDemo.png|480x300px]]
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.StackedAreaChartComposer">
 
<div apply="demo.StackedAreaChartComposer">
<charts id="chart" type="area" width="480" height="300" title="Stacked Area Chart Demo"/>
+
<charts id="chart" type="area" width="480"  
 +
height="300" title="Stacked Area Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 416: Line 426:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYStackedAreaChartComposer">
 
<div apply="demo.XYStackedAreaChartComposer">
<charts id="chart" type="area" width="480" height="300" title="XY Stacked Area Chart Demo"/>
+
<charts id="chart" type="area" width="480"  
 +
height="300" title="XY Stacked Area Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 449: Line 460:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.AreaSplineChartComposer">
 
<div apply="demo.AreaSplineChartComposer">
<charts id="chart" type="areaspline" width="480" height="300" title="Area Spline Chart Demo"/>
+
<charts id="chart" type="areaspline" width="480"  
 +
height="300" title="Area Spline Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 480: Line 492:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYAreaSplineChartComposer">
 
<div apply="demo.XYAreaSplineChartComposer">
<charts id="chart" type="areaspline" width="480" height="300" title="XY Area Spline Chart Demo"/>
+
<charts id="chart" type="areaspline" width="480"  
 +
height="300" title="XY Area Spline Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 510: Line 523:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.StackedAreaSplineChartComposer">
 
<div apply="demo.StackedAreaSplineChartComposer">
<charts id="chart" type="areaspline" width="480" height="300" title="Stacked Area Spline Chart Demo"/>
+
<charts id="chart" type="areaspline" width="480"  
 +
height="300" title="Stacked Area Spline Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 542: Line 556:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYStackedAreaSplineChartComposer">
 
<div apply="demo.XYStackedAreaSplineChartComposer">
<charts id="chart" type="areaspline" width="480" height="300" title="XY Stacked Area Spline Chart Demo"/>
+
<charts id="chart" type="areaspline" width="480"  
 +
height="300" title="XY Stacked Area Spline Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 569: Line 584:
 
}
 
}
 
</source>
 
</source>
 +
 
== Bar Chart ==
 
== Bar Chart ==
 
=== Basic Bar Chart ===
 
=== Basic Bar Chart ===
Line 574: Line 590:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.BarChartComposer">
 
<div apply="demo.BarChartComposer">
<charts id="chart" type="bar" width="480" height="300" title="Bar Chart Demo"/>
+
<charts id="chart" type="bar" width="480"  
 +
        height="300" title="Bar Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 604: Line 621:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYBarChartComposer">
 
<div apply="demo.XYBarChartComposer">
<charts id="chart" type="bar" width="480" height="300" title="XY Bar Chart Demo"/>
+
<charts id="chart" type="bar" width="480"  
 +
height="300" title="XY Bar Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 634: Line 652:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.StackedBarChartComposer">
 
<div apply="demo.StackedBarChartComposer">
<charts id="chart" type="bar" width="480" height="300" title="Stacked Bar Chart Demo"/>
+
<charts id="chart" type="bar" width="480"  
 +
height="300" title="Stacked Bar Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 666: Line 685:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYStackedBarChartComposer">
 
<div apply="demo.XYStackedBarChartComposer">
<charts id="chart" type="bar" width="480" height="300" title="XY Stacked Bar Chart Demo"/>
+
<charts id="chart" type="bar" width="480"  
 +
height="300" title="XY Stacked Bar Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 699: Line 719:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.ColumnChartComposer">
 
<div apply="demo.ColumnChartComposer">
<charts id="chart" type="column" width="480" height="300" title="Column Chart Demo"/>
+
<charts id="chart" type="column" width="480"  
 +
height="300" title="Column Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 729: Line 750:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYColumnChartComposer">
 
<div apply="demo.XYColumnChartComposer">
<charts id="chart" type="column" width="480" height="300" title="XY Column Chart Demo"/>
+
<charts id="chart" type="column" width="480"  
 +
height="300" title="XY Column Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 759: Line 781:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.StackedColumnChartComposer">
 
<div apply="demo.StackedColumnChartComposer">
<charts id="chart" type="column" width="480" height="300" title="Stacked Column Chart Demo"/>
+
<charts id="chart" type="column" width="480"  
 +
height="300" title="Stacked Column Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 791: Line 814:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.XYStackedColumnChartComposer">
 
<div apply="demo.XYStackedColumnChartComposer">
<charts id="chart" type="bar" width="480" height="300" title="XY Stacked Column Chart Demo"/>
+
<charts id="chart" type="column" width="480"  
 +
height="300" title="XY Stacked Column Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 823: Line 847:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.ColumnRangeChartComposer">
 
<div apply="demo.ColumnRangeChartComposer">
<charts id="chart" type="columnrange" width="480" height="300" title="Column Range Chart Demo"/>
+
<charts id="chart" type="columnrange" width="480"  
 +
height="300" title="Column Range Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 849: Line 874:
 
</source>
 
</source>
  
== Errorbar Chart ==
+
== Error Bar Chart ==
 
[[File: ErrorbarChartDemo.png|480x300px]]
 
[[File: ErrorbarChartDemo.png|480x300px]]
 
<source lang="xml">
 
<source lang="xml">
<div apply="demo.ErrorbarChartComposer">
+
<div apply="demo.ErrorBarChartComposer">
<charts id="chart" type="errorbar" width="480" height="300" title="Errorbar Chart Demo"/>
+
<charts id="chart" type="errorbar" width="480"  
 +
height="300" title="Error Bar Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
 
<source lang="java">
 
<source lang="java">
public class ErrorbarChartComposer extends SelectorComposer<Div> {
+
public class ErrorBarChartComposer extends SelectorComposer<Div> {
 
@Wire
 
@Wire
 
Charts chart;
 
Charts chart;
Line 883: Line 909:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.ScatterChartComposer">
 
<div apply="demo.ScatterChartComposer">
<charts id="chart" type="scatter" width="480" height="300" title="Scatter Chart Demo"/>
+
<charts id="chart" type="scatter" width="480"  
 +
height="300" title="Scatter Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 913: Line 940:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.AreaRangeChartComposer">
 
<div apply="demo.AreaRangeChartComposer">
<charts id="chart" type="arearange" width="480" height="300" title="Area Range Chart Demo"/>
+
<charts id="chart" type="arearange" width="480"  
 +
height="300" title="Area Range Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 943: Line 971:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.AreaSplineRangeChartComposer">
 
<div apply="demo.AreaSplineRangeChartComposer">
<charts id="chart" type="areasplinerange" width="480" height="300" title="Area Spline Range Chart Demo"/>
+
<charts id="chart" type="areasplinerange" width="480"  
 +
height="300" title="Area Spline Range Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 973: Line 1,002:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.BubbleChartComposer">
 
<div apply="demo.BubbleChartComposer">
<charts id="chart" type="bubble" width="480" height="300" title="Bubble Chart Demo"/>
+
<charts id="chart" type="bubble" width="480"  
 +
height="300" title="Bubble Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 1,003: Line 1,033:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.WaterfallChartComposer">
 
<div apply="demo.WaterfallChartComposer">
<charts id="chart" type="waterfall" width="480" height="300" title="Waterfall Chart Demo"/>
+
<charts id="chart" type="waterfall" width="480"  
 +
height="300" title="Waterfall Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 1,029: Line 1,060:
 
<source lang="xml">
 
<source lang="xml">
 
<div apply="demo.DialChartComposer">
 
<div apply="demo.DialChartComposer">
<charts id="chart" type="gauge" width="480" height="300" title="Dial Chart Demo"/>
+
<charts id="chart" type="gauge" width="480"  
 +
height="300" title="Dial Chart Demo"/>
 
</div>
 
</div>
 
</source>
 
</source>
Line 1,057: Line 1,089:
 
 
 
chart.setModel(model);
 
chart.setModel(model);
 +
    }
 +
}
 +
</source>
 +
 +
== Polar Chart ==
 +
[[File:PolarChartDemo.png|480x300px]]
 +
<source lang="xml">
 +
<div apply="demo.PolarChartComposer">
 +
<charts id="chart" width="480" height="300"
 +
title="Polar Chart Demo" polar="true"/>
 +
</div>
 +
</source>
 +
<source lang="java">
 +
public class PolarChartComposer extends SelectorComposer<Div> {
 +
@Wire
 +
Charts chart;
 +
 +
public void doAfterCompose(Div comp) throws Exception {
 +
super.doAfterCompose(comp);
 +
 +
CategoryModel model = new DefaultCategoryModel();
 +
model.setValue("1900", "Q1", new Integer(110));
 +
model.setValue("1900", "Q2", new Integer(140));
 +
model.setValue("1900", "Q3", new Integer(40));
 +
model.setValue("1900", "Q4", new Integer(35));
 +
model.setValue("1901", "Q1", new Integer(40));
 +
model.setValue("1901", "Q2", new Integer(55));
 +
model.setValue("1901", "Q3", new Integer(130));
 +
model.setValue("1901", "Q4", new Integer(120));
 +
 +
chart.setModel(model);
 +
 +
chart.getXAxis().setTickmarkPlacement("on");
 +
chart.getPlotOptions().getSeries().setPointPlacement("on");
 +
chart.getSeries(0).setType("area");
 
     }
 
     }
 
}
 
}

Revision as of 03:09, 18 January 2022

Manipulating Chart Model


Manipulating Model

Models are the perfect way for developers to interact with the charts as they shield developers from complexities that they need not know or interact with. In addition to this ZK model supports many design patterns including MVC[1] and MVVM[2], which are both fully supported patterns.

ZK provides chart model [3] to handle data in the chart. Manipulating chart model with charts is the same as other ZK components handling their supporting models. We've used MVC approach to create the chart in previous section - Create your first ZK Charts. In this section, we will create another example to manipulate chart model in MVVM approach.

We get started from creating an XYModel and put the data we want to handle:

ChartData.java

public class ChartData {

    static public XYModel getXYModel() {
        // Use the predefined implementation DefaultXYModel to create an model.
        XYModel model = new DefaultXYModel();

        model.addValue("2001", new Integer(20), new Integer(120));
        model.addValue("2001", new Integer(40), new Integer(135));
        model.addValue("2001", new Integer(60), new Integer(140));
        model.addValue("2001", new Integer(80), new Integer(160));
		 
        model.addValue("2002", new Integer(30), new Integer(120));
        model.addValue("2002", new Integer(50), new Integer(135));
        model.addValue("2002", new Integer(70), new Integer(140));
        model.addValue("2002", new Integer(90), new Integer(160));

        return model;
    }
}

Declare a POJO VM as well as the property's getter method.

ChartVM.java

public class ChartVM {

    public XYModel getModel() {
        return ChartData.getXYModel();
    }
}

Reference the ViewModel in ZUL:

chart.zul

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('ChartVM')">
    <charts type="bar" model="@bind(vm.model)" />
</window>

Enjoy the graphical presentation of data!

ChartMVVM.png

Supported Model

Type
Model
line CategoryModel or XYModel
spline CategoryModel or XYModel
area CategoryModel or XYModel
areaspline CategoryModel or XYModel
arearange XYZModel
areasplinerange XYZModel
bar CategoryModel or XYModel
column CategoryModel or XYModel
columnrange XYModel
pie PieModel
scatter XYModel
bubble XYModel or XYZModel
gauge DialModel
polar CategoryModel or XYModel
errorbar XYModel
waterfall CategoryModel or XYModel
funnel SingleValueCategoryModel
errorbox XYModel

Note: Since ZK 7.0.1, ChartModel also supports ZK Charts as well, however, it is recommended to use the new ZK ChartsModel instead.

Examples

Pie Chart

PieChartDemo.png

<div apply="demo.PieChartComposer">
	<charts id="chart" type="pie" width="480" 
		height="300" title="Pie Chart Demo"/>
</div>
public class PieChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		PieModel model = new DefaultPieModel();
		model.setValue("C/C++", new Double(12.5));
		model.setValue("Java", new Double(50.2));
		model.setValue("VB", new Double(20.5));
		model.setValue("PHP", new Double(15.5));
		
		chart.setModel(model);
    }
}

Funnel Chart

FunnelChartDemo.png

<div apply="demo.FunnelChartComposer">
	<charts id="chart" type="funnel" width="480" height="300" 
		title="Funnel Chart Demo"/>
</div>
public class FunnelChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		SingleValueCategoryModel model = new DefaultSingleValueCategoryModel();
		model.setValue("Step 1", new Double(142.2));
		model.setValue("Step 2", new Double(30.2));
		model.setValue("Step 3", new Double(40.4));
		model.setValue("Step 4", new Double(28.2));
		model.setValue("Step 5", new Double(10.2));
		
		chart.setModel(model);
		
    }
}

Line Chart

Basic Line Chart

LineChartDemo.png

<div apply="demo.LineChartComposer">
	<charts id="chart" type="line" width="480" 
		height="300" title="Line Chart Demo"/>
</div>
public class LineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
    }
}

XY Line Chart

XYLineChartDemo.png

<div apply="demo.XYLineChartComposer">
	<charts id="chart" type="line" width="480" 
		height="300" title="XY Line Chart Demo"/>
</div>
public class XYLineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Spline Chart

Basic Spline Chart

SplineChartDemo.png

<div apply="demo.SplineChartComposer">
	<charts id="chart" type="spline" width="480" 
		height="300" title="Spline Chart Demo"/>
</div>
public class SplineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
    }
}

XY Spline Chart

XYSplineChartDemo.png

<div apply="demo.XYSplineChartComposer">
	<charts id="chart" type="spline" width="480" 
		height="300" title="XY Spline Chart Demo"/>
</div>
public class XYSplineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Area Chart

Basic Area Chart

AreaChartDemo.png

<div apply="demo.AreaChartComposer">
	<charts id="chart" type="area" width="480" 
		height="300" title="Area Chart Demo"/>
</div>
public class AreaChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
    }
}

XY Area Chart

XYAreaChartDemo.png

<div apply="demo.XYAreaChartComposer">
	<charts id="chart" type="area" width="480" 
		height="300" title="XY Area Chart Demo"/>
</div>
public class XYAreaChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Stacked Area Chart

StackedAreaChartDemo.png

<div apply="demo.StackedAreaChartComposer">
	<charts id="chart" type="area" width="480" 
		height="300" title="Stacked Area Chart Demo"/>
</div>
public class StackedAreaChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getArea().setStacking("normal");
    }
}

XY Stacked Area Chart

XYStackedAreaChartDemo.png

<div apply="demo.XYStackedAreaChartComposer">
	<charts id="chart" type="area" width="480" 
		height="300" title="XY Stacked Area Chart Demo"/>
</div>
public class XYStackedAreaChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(20), new Integer(100));
		model.addValue("1901", new Integer(40), new Integer(120));
		model.addValue("1901", new Integer(60), new Integer(110));
		model.addValue("1901", new Integer(80), new Integer(140));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getArea().setStacking("normal");
    }
}

Area Spline Chart

Basic Area Spline Chart

AreaSplineChartDemo.png

<div apply="demo.AreaSplineChartComposer">
	<charts id="chart" type="areaspline" width="480" 
		height="300" title="Area Spline Chart Demo"/>
</div>
public class AreaSplineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
    }
}

XY Area Spline Chart

XYAreaSplineChartDemo.png

<div apply="demo.XYAreaSplineChartComposer">
	<charts id="chart" type="areaspline" width="480" 
		height="300" title="XY Area Spline Chart Demo"/>
</div>
public class XYAreaSplineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Stacked Area Spline Chart

StackedAreaSplineChartDemo.png

<div apply="demo.StackedAreaSplineChartComposer">
	<charts id="chart" type="areaspline" width="480" 
		height="300" title="Stacked Area Spline Chart Demo"/>
</div>
public class StackedAreaSplineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getArea().setStacking("normal");
    }
}

XY Stacked Area Spline Chart

XYStackedAreaSplineChartDemo.png

<div apply="demo.XYStackedAreaSplineChartComposer">
	<charts id="chart" type="areaspline" width="480" 
		height="300" title="XY Stacked Area Spline Chart Demo"/>
</div>
public class XYStackedAreaSplineChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(20), new Integer(100));
		model.addValue("1901", new Integer(40), new Integer(120));
		model.addValue("1901", new Integer(60), new Integer(110));
		model.addValue("1901", new Integer(80), new Integer(140));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getAreaSpline().setStacking("normal");
    }
}

Bar Chart

Basic Bar Chart

BarChartDemo.png

<div apply="demo.BarChartComposer">
	<charts id="chart" type="bar" width="480" 
        height="300" title="Bar Chart Demo"/>
</div>
public class BarChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
    }
}

XY Bar Chart

XYBarChartDemo.png

<div apply="demo.XYBarChartComposer">
	<charts id="chart" type="bar" width="480" 
		height="300" title="XY Bar Chart Demo"/>
</div>
public class XYBarChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Stacked Bar Chart

StackedBarChartDemo.png

<div apply="demo.StackedBarChartComposer">
	<charts id="chart" type="bar" width="480" 
		height="300" title="Stacked Bar Chart Demo"/>
</div>
public class StackedBarChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getBar().setStacking("normal");
    }
}

XY Stacked Bar Chart

XYStackedBarChartDemo.png

<div apply="demo.XYStackedBarChartComposer">
	<charts id="chart" type="bar" width="480" 
		height="300" title="XY Stacked Bar Chart Demo"/>
</div>
public class XYStackedBarChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(20), new Integer(100));
		model.addValue("1901", new Integer(40), new Integer(120));
		model.addValue("1901", new Integer(60), new Integer(110));
		model.addValue("1901", new Integer(80), new Integer(140));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getBar().setStacking("normal");
    }
}

Column Chart

Basic Column Chart

ColumnChartDemo.png

<div apply="demo.ColumnChartComposer">
	<charts id="chart" type="column" width="480" 
		height="300" title="Column Chart Demo"/>
</div>
public class ColumnChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
    }
}

XY Column Chart

XYColumnChartDemo.png

<div apply="demo.XYColumnChartComposer">
	<charts id="chart" type="column" width="480" 
		height="300" title="XY Column Chart Demo"/>
</div>
public class XYColumnChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Stacked Column Chart

StackedColumnChartDemo.png

<div apply="demo.StackedColumnChartComposer">
	<charts id="chart" type="column" width="480" 
		height="300" title="Stacked Column Chart Demo"/>
</div>
public class StackedColumnChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(75));
		model.setValue("1901", "Q3", new Integer(80));
		model.setValue("1901", "Q4", new Integer(120));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getColumn().setStacking("normal");
    }
}

XY Stacked Column Chart

XYStackedColumnChartDemo.png

<div apply="demo.XYStackedColumnChartComposer">
	<charts id="chart" type="column" width="480" 
		height="300" title="XY Stacked Column Chart Demo"/>
</div>
public class XYStackedColumnChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(20), new Integer(100));
		model.addValue("1901", new Integer(40), new Integer(120));
		model.addValue("1901", new Integer(60), new Integer(110));
		model.addValue("1901", new Integer(80), new Integer(140));
		
		chart.setModel(model);
		
		chart.getPlotOptions().getColumn().setStacking("normal");
    }
}

Column Range Chart

ColumnRangeChartDemo.png

<div apply="demo.ColumnRangeChartComposer">
	<charts id="chart" type="columnrange" width="480" 
		height="300" title="Column Range Chart Demo"/>
</div>
public class ColumnRangeChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Error Bar Chart

ErrorbarChartDemo.png

<div apply="demo.ErrorBarChartComposer">
	<charts id="chart" type="errorbar" width="480" 
		height="300" title="Error Bar Chart Demo"/>
</div>
public class ErrorBarChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Scatter Chart

ScatterChartDemo.png

<div apply="demo.ScatterChartComposer">
	<charts id="chart" type="scatter" width="480" 
		height="300" title="Scatter Chart Demo"/>
</div>
public class ScatterChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYModel model = new DefaultXYModel();
		model.addValue("1900", new Integer(20), new Integer(120));
		model.addValue("1900", new Integer(40), new Integer(135));
		model.addValue("1900", new Integer(60), new Integer(140));
		model.addValue("1900", new Integer(80), new Integer(160));
		model.addValue("1901", new Integer(30), new Integer(100));
		model.addValue("1901", new Integer(50), new Integer(120));
		model.addValue("1901", new Integer(70), new Integer(110));
		model.addValue("1901", new Integer(90), new Integer(140));
		
		chart.setModel(model);
    }
}

Area Range Chart

AreaRangeChartDemo.png

<div apply="demo.AreaRangeChartComposer">
	<charts id="chart" type="arearange" width="480" 
		height="300" title="Area Range Chart Demo"/>
</div>
public class AreaRangeChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYZModel model = new DefaultXYZModel();
		model.addValue("1900", new Integer(20), new Integer(140), new Integer(140));
		model.addValue("1900", new Integer(40), new Integer(180), new Integer(165));
		model.addValue("1900", new Integer(60), new Integer(180), new Integer(150));
		model.addValue("1900", new Integer(80), new Integer(220), new Integer(220));
		model.addValue("1901", new Integer(30), new Integer(110), new Integer(90));
		model.addValue("1901", new Integer(50), new Integer(110), new Integer(55));
		model.addValue("1901", new Integer(70), new Integer(140), new Integer(80));
		model.addValue("1901", new Integer(90), new Integer(180), new Integer(65));
		
		chart.setModel(model);
    }
}

Area Spline Range Chart

AreaSplineRangeChartDemo.png

<div apply="demo.AreaSplineRangeChartComposer">
	<charts id="chart" type="areasplinerange" width="480" 
		height="300" title="Area Spline Range Chart Demo"/>
</div>
public class AreaSplineRangeChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYZModel model = new DefaultXYZModel();
		model.addValue("1900", new Integer(20), new Integer(140), new Integer(140));
		model.addValue("1900", new Integer(40), new Integer(180), new Integer(165));
		model.addValue("1900", new Integer(60), new Integer(180), new Integer(150));
		model.addValue("1900", new Integer(80), new Integer(220), new Integer(220));
		model.addValue("1901", new Integer(30), new Integer(110), new Integer(90));
		model.addValue("1901", new Integer(50), new Integer(110), new Integer(55));
		model.addValue("1901", new Integer(70), new Integer(140), new Integer(80));
		model.addValue("1901", new Integer(90), new Integer(180), new Integer(65));
		
		chart.setModel(model); 
    }
}

Bubble Chart

BubbleChartDemo.png

<div apply="demo.BubbleChartComposer">
	<charts id="chart" type="bubble" width="480" 
		height="300" title="Bubble Chart Demo"/>
</div>
public class BubbleChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		XYZModel model = new DefaultXYZModel();
		model.addValue("1900", new Integer(20), new Integer(120), new Integer(20));
		model.addValue("1900", new Integer(40), new Integer(135), new Integer(5));
		model.addValue("1900", new Integer(60), new Integer(140), new Integer(15));
		model.addValue("1900", new Integer(80), new Integer(160), new Integer(10));
		model.addValue("1901", new Integer(30), new Integer(120), new Integer(20));
		model.addValue("1901", new Integer(50), new Integer(135), new Integer(5));
		model.addValue("1901", new Integer(70), new Integer(140), new Integer(15));
		model.addValue("1901", new Integer(90), new Integer(160), new Integer(10));
		
		chart.setModel(model);
    }
}

Waterfall Chart

WaterfallChartDemo.png

<div apply="demo.WaterfallChartComposer">
	<charts id="chart" type="waterfall" width="480" 
		height="300" title="Waterfall Chart Demo"/>
</div>
public class WaterfallChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(20));
		model.setValue("1900", "Q2", new Integer(55));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(75));
		
		chart.setModel(model);
    }
}

Dial Chart

DialChartDemo.png

<div apply="demo.DialChartComposer">
	<charts id="chart" type="gauge" width="480" 
		height="300" title="Dial Chart Demo"/>
</div>
public class DialChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		DialModel model = new DefaultDialModel();
		DialModelScale scale = model.newScale(-10.0, 60.0, 220, -280, 10.0, 4);
		// scale's configuration data
		scale.setValue(46);
		scale.setText("Celsius");
		scale.newRange(-10, 0, "#B4C6D4", 0.9, 1);
		scale.newRange(40, 50, "#EDC435", 0.9, 1);
		scale.newRange(50, 60, "#E4CBCA", 0.9, 1);
		scale.setTickColor("#6D635D");

		model.setFrameFgColor("#624712");
		model.setFrameBgColor("#FFFFCC");
		
		model.setFrameBgColor1("#EEEEEE");
		model.setFrameBgColor2("#EEEEEE");
		
		chart.setModel(model);
    }
}

Polar Chart

PolarChartDemo.png

<div apply="demo.PolarChartComposer">
	<charts id="chart" width="480" height="300" 
		title="Polar Chart Demo" polar="true"/>
</div>
public class PolarChartComposer extends SelectorComposer<Div> {
	@Wire
	Charts chart;

	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);
		
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("1900", "Q1", new Integer(110));
		model.setValue("1900", "Q2", new Integer(140));
		model.setValue("1900", "Q3", new Integer(40));
		model.setValue("1900", "Q4", new Integer(35));
		model.setValue("1901", "Q1", new Integer(40));
		model.setValue("1901", "Q2", new Integer(55));
		model.setValue("1901", "Q3", new Integer(130));
		model.setValue("1901", "Q4", new Integer(120));

		chart.setModel(model);
		
		chart.getXAxis().setTickmarkPlacement("on");
		chart.getPlotOptions().getSeries().setPointPlacement("on");
		chart.getSeries(0).setType("area");
    }
}

References

< Get Complete Source Code of This Book >


Last Update : 2022/01/18

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