1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
5 <TITLE>javafx.scene.chart</TITLE>
6 <META NAME="GENERATOR" CONTENT="OpenOffice.org 3.3 (Win32)">
7 <META NAME="CREATED" CONTENT="0;0">
8 <META NAME="CHANGED" CONTENT="20110913;10015018">
9 <STYLE TYPE="text/css">
10 <!--
11 PRE.cjk { font-family: "NSimSun", monospace }
12 -->
13 </STYLE>
14 </HEAD>
15 <BODY LANG="en-US" DIR="LTR">
16 <P>The JavaFX User Interface provides a set of chart components that
17 are a very convenient way for data visualization. Application
18 developers can make use of these off-the-rack graphical charts
19 provided by the JavaFX runtime, to visualize a wide variety of data.</P>
20 <P>Commom types of charts such as {@link javafx.scene.chart.BarChart
21 Bar}, {@link javafx.scene.chart.LineChart Line}, {@link
22 javafx.scene.chart.AreaChart Area}, {@link
23 javafx.scene.chart.PieChart Pie}, {@link
24 javafx.scene.chart.ScatterChart Scatter} and {@link
25 javafx.scene.chart.BubbleChart Bubble} charts are provided. These
26 charts are easy to create and are customizable. JavaFX Charts API is
27 a visual centric API rather than model centric.
28 </P>
29 <P>JavaFX charts supports animation of chart components as well as
30 auto ranging of chart Axis. In addition, as with other JavaFX UI
31 controls, chart visual components can be styled via CSS. Thus, there
32 are several public visual properties that can be styled via CSS. An
33 example is provided later in the document.
34 </P>
35 <P>Below is a table listing the existing Chart types and a brief
36 summary of their intended use.</P>
37 <TABLE CELLPADDING=2 CELLSPACING=2>
38 <TR>
39 <TH>
40 <P>Chart</P>
41 </TH>
42 <TH>
43 <P>Summary</P>
44 </TH>
45 </TR>
46 <TR>
47 <TD>
48 <P>{@link javafx.scene.chart.LineChart}</P>
49 </TD>
50 <TD>
51 <P>Plots line between the data points in a series. Used usually to
52 view data trends over time.</P>
53 </TD>
54 </TR>
55 <TR>
56 <TD>
57 <P>{@link javafx.scene.chart.AreaChart}</P>
58 </TD>
59 <TD>
60 <P>Plots the area between the line that connects the data points
61 and the axis. Good for comparing cumulated totals over time.</P>
62 </TD>
63 </TR>
64 <TR>
65 <TD>
66 <P>{@link javafx.scene.chart.BarChart}</P>
67 </TD>
68 <TD>
69 <P>Plots rectangular bars with heights indicating data values they
70 represent, and corresponding to the categories they belongs to.
71 Used for displaying discontinuous / discrete data</P>
72 </TD>
73 </TR>
74 <TR>
75 <TD>
76 <P>{@link javafx.scene.chart.PieChart}</P>
77 </TD>
78 <TD>
79 <P>Plots circular chart divided into segments with each segment
80 representing a value as a proportion of the total. It looks like a
81 Pie and hence the name
82 </P>
83 </TD>
84 </TR>
85 <TR>
86 <TD>
87 <P>{@link javafx.scene.chart.BubbleChart}</P>
88 </TD>
89 <TD>
90 <P>Plots bubbles for data points in a series. Each plotted entity
91 depicts three parameters in a 2D chart and hence a unique chart
92 type.</P>
93 </TD>
94 </TR>
95 <TR>
96 <TD>
97 <P>{@link javafx.scene.chart.ScatterChart}</P>
98 </TD>
99 <TD>
100 <P>Plots symbols for the data points in a series. This type of
101 chart is useful in viewing distribution of data and its
102 corelation, if there is any clustering.</P>
103 </TD>
104 </TR>
105 </TABLE>
106 <P>The {@link javafx.scene.chart.Chart} is the baseclass for all
107 charts. It is responsible for drawing the background, frame, title
108 and legend. It can be extended to create custom chart types. The
109 {@link javafx.scene.chart.XYChart} is the baseclass for all two axis
110 charts and it extends from Chart class. It is mostly responsible for
111 drawing the two axis and the background of the chart plot. Most
112 charts extend from XYChart class except for PieChart which extends
113 from Chart class as it is not a two axis chart.
114 </P>
115 <P>The {@link javafx.scene.chart} package includes axis classes that
116 can be used when creating two axis charts. {@link
117 javafx.scene.chart.Axis} is the abstract base class of all chart
118 axis. {@link javafx.scene.chart.CategoryAxis} plots string categories
119 where each value is a unique category along the axis. {@link
120 javafx.scene.chart.NumberAxis} plots a range of numbers with major
121 tick marks every tickUnit.
122 </P>
123 <P>For Example BarChart plots data from a sequence of {@link
124 javafx.scene.chart.XYChart.Series} objects. Each series contains
125 {@link javafx.scene.chart.XYChart.Data} objects.
126 </P>
127 <UL>
128 <PRE CLASS="western">// add data
129 XYChart.Series<String,Number> series1 = new XYChart.Series<String,Number>();
130 series1.setName("Data Series 1");
131 series1.getData().add(new XYChart.Data<String,Number>(“2007”, 567));
132 </PRE>
133 </UL>
134 <P>We can define more series objects similarly. Following code
135 snippet shows how to create a BarChart with 3 categories and its X
136 and Y axis:
137 </P>
138 <UL>
139 <PRE CLASS="western">static String[] years = {"2007", "2008", "2009"};
140 final CategoryAxis xAxis = new CategoryAxis();
141 final NumberAxis yAxis = new NumberAxis();
142 final BarChart<String,Number> bc = new BarChart<String,Number>(xAxis,yAxis);
143 xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList(years)));
144 bc.getData().addAll(series1, series2, series3);
145 </PRE>
146 </UL>
147 <P>JavaFX charts lends itself very well for real time or dynamic
148 Charting (like online stocks, web traffic etc) from live data sets.
149 Here is an example of a dynamic chart created with simulated data. A
150 {@link javafx.animation.Timeline} is used to simulate dynamic data
151 for stock price variations over time(hours).
152 </P>
153 <UL>
154 <PRE CLASS="western">private XYChart.Series<Number,Number> hourDataSeries;
155 private NumberAxis xAxis;
156 private Timeline animation;
157 private double hours = 0;
158 private double timeInHours = 0;
159 private double prevY = 10;
160 private double y = 10;
161
162 <FONT FACE="Courier New, monospace">// timeline to add new data every 60<SUP>th</SUP> of a second</FONT>
163 <FONT FACE="Courier New, monospace">animation = new Timeline();</FONT>
164 <FONT FACE="Courier New, monospace">animation.getKeyFrames().add(new KeyFrame(Duration.millis(1000 / 60), new EventHandler<ActionEvent>() {</FONT>
165 <FONT FACE="Courier New, monospace">@Override public void handle(ActionEvent actionEvent) {</FONT>
166 <FONT FACE="Courier New, monospace">// 6 minutes data per frame</FONT></PRE>
167 <UL>
168 <PRE CLASS="western"> <FONT FACE="Courier New, monospace">for(int count=0; count < 6; count++) {</FONT></PRE>
169 <UL>
170 <PRE CLASS="western"><FONT FACE="Courier New, monospace">nextTime();</FONT>
171 <FONT FACE="Courier New, monospace">plotTime();</FONT></PRE>
172 </UL>
173 <PRE CLASS="western"> <FONT FACE="Courier New, monospace">}</FONT>
174 <FONT FACE="Courier New, monospace">}</FONT></PRE>
175 </UL>
176 <PRE CLASS="western"><FONT FACE="Courier New, monospace"><FONT SIZE=2>}));</FONT></FONT>
177 <FONT FACE="Courier New, monospace"><FONT SIZE=2>animation.set</FONT></FONT><FONT FACE="Courier New, monospace">CycleCount(Animation.INDEFINITE);</FONT>
178
179 <FONT FACE="Courier New, monospace"><FONT SIZE=2>xAxis = new NumberAxis(0,24,3);</FONT></FONT></PRE>
180 </UL>
181 <PRE CLASS="western"> <FONT FACE="Courier New, monospace">final NumberAxis yAxis = new NumberAxis(0,100,10);</FONT>
182 <FONT FACE="Courier New, monospace">final LineChart<Number,Number> lc = new LineChart<Number,Number>(xAxis,yAxis);</FONT>
183
184 <FONT FACE="Courier New, monospace">lc.setCreateSymbols(false);</FONT>
185 <FONT FACE="Courier New, monospace">lc.setAnimated(false);</FONT>
186 <FONT FACE="Courier New, monospace">lc.setLegendVisible(false);</FONT>
187 <FONT FACE="Courier New, monospace">lc.setTitle("ACME Company Stock");</FONT>
188
189 <FONT FACE="Courier New, monospace">xAxis.setLabel("Time");</FONT>
190 <FONT FACE="Courier New, monospace">xAxis.setForceZeroInRange(false);</FONT>
191 <FONT FACE="Courier New, monospace">yAxis.setLabel("Share Price");</FONT>
192 <FONT FACE="Courier New, monospace">yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis,"$",null));</FONT>
193
194 <FONT FACE="Courier New, monospace">hourDataSeries = new XYChart.Series<Number,Number>();</FONT>
195 <FONT FACE="Courier New, monospace">hourDataSeries.setName("Hourly Data");</FONT>
196 <FONT FACE="Courier New, monospace">hourDataSeries.getData().add(new XYChart.Data<Number,Number>(timeInHours,prevY));</FONT>
197 <FONT FACE="Courier New, monospace">lc.getData().add(hourDataSeries);</FONT>
198
199 <FONT FACE="Courier New, monospace">private void nextTime() {</FONT>
200 <FONT FACE="Courier New, monospace">if (minutes == 59) {</FONT>
201 <FONT FACE="Courier New, monospace">hours ++;</FONT>
202 <FONT FACE="Courier New, monospace">minutes = 0;</FONT>
203 <FONT FACE="Courier New, monospace">} else {</FONT>
204 <FONT FACE="Courier New, monospace">minutes ++;</FONT>
205 <FONT FACE="Courier New, monospace">}</FONT>
206 <FONT FACE="Courier New, monospace">timeInHours = hours + ((1d/60d)*minutes);</FONT>
207 <FONT FACE="Courier New, monospace">}</FONT>
208
209 <FONT FACE="Courier New, monospace">private void plotTime() {</FONT>
210 <FONT FACE="Courier New, monospace">if ((timeInHours % 1) == 0) {</FONT>
211 <FONT FACE="Courier New, monospace">// change of hour</FONT>
212 <FONT FACE="Courier New, monospace">double oldY = y;</FONT>
213 <FONT FACE="Courier New, monospace">y = prevY - 10 + (Math.random()*20);</FONT>
214 <FONT FACE="Courier New, monospace">prevY = oldY;</FONT>
215 <FONT FACE="Courier New, monospace">while (y < 10 || y > 90) y = y - 10 + (Math.random()*20);</FONT>
216 <FONT FACE="Courier New, monospace">hourDataSeries.getData().add(new XYChart.Data<Number, Number>(timeInHours, prevY));</FONT>
217 <FONT FACE="Courier New, monospace">// after 25hours delete old data</FONT>
218 <FONT FACE="Courier New, monospace">if (timeInHours > 25) hourDataSeries.getData().remove(0);</FONT>
219 <FONT FACE="Courier New, monospace">// every hour after 24 move range 1 hour</FONT>
220 <FONT FACE="Courier New, monospace">if (timeInHours > 24) {</FONT>
221 <FONT FACE="Courier New, monospace">xAxis.setLowerBound(xAxis.getLowerBound()+1);</FONT>
222 <FONT FACE="Courier New, monospace">xAxis.setUpperBound(xAxis.getUpperBound()+1);</FONT>
223 <FONT FACE="Courier New, monospace">}</FONT>
224 <FONT FACE="Courier New, monospace">}</FONT>
225 <FONT FACE="Courier New, monospace">}</FONT></PRE><P STYLE="margin-bottom: 0in">
226 <BR>
227 </P>
228 <P>The start method needs to call animation,.play() to start the
229 simulated dynamic chart.</P>
230 <P>Please refer to javafx.scene.control package documentation on CSS
231 styling. An example for styling a Chart via CSS is as follows:- to
232 set the chart content background to a certain color:</P>
233 <P>.chart-content { -fx-background-color: cyan;}</P>
234 <P>Line Chart line color can be styled as follows:-</P>
235 <P>.chart-series-line { -fx-stroke: green; -fx-stroke-width: 4px;}</P>
236 <P STYLE="margin-bottom: 0in"><BR>
237 </P>
238 <UL>
239 <PRE CLASS="western" STYLE="margin-bottom: 0.2in"> </PRE>
240 </UL>
241 </BODY>
242 </HTML>