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 summary="">
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 <pre>{@code
128 // 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 <P>We can define more series objects similarly. Following code
134 snippet shows how to create a BarChart with 3 categories and its X
135 and Y axis:
136 </P>
137 <pre>{@code
138 static String[] years = {"2007", "2008", "2009"};
139 final CategoryAxis xAxis = new CategoryAxis();
140 final NumberAxis yAxis = new NumberAxis();
141 final BarChart<String,Number> bc = new BarChart<String,Number>(xAxis, yAxis);
142 xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList(years)));
143 bc.getData().addAll(series1, series2, series3);
144 }</pre>
145 <P>JavaFX charts lends itself very well for real time or dynamic
146 Charting (like online stocks, web traffic etc) from live data sets.
147 Here is an example of a dynamic chart created with simulated data. A
148 {@link javafx.animation.Timeline} is used to simulate dynamic data
149 for stock price variations over time(hours).
150 </P>
151 <pre><code>
152 {@literal private XYChart.Series<Number,Number> hourDataSeries;}
153 private NumberAxis xAxis;
154 private Timeline animation;
155 private double hours = 0;
156 private double timeInHours = 0;
157 private double prevY = 10;
158 private double y = 10;
159
160 // timeline to add new data every 60th of a second
161 animation = new Timeline();
162 {@literal animation.getKeyFrames().add(new KeyFrame(Duration.millis(1000 / 60), new EventHandler<ActionEvent>()} {
163 {@literal @Override public void handle(ActionEvent actionEvent)} {
164 // 6 minutes data per frame
165 {@literal for(int count = 0; count < 6; count++)} {
166 nextTime();
167 plotTime();
168 }
169 }
170 }));
171 animation.setCycleCount(Animation.INDEFINITE);
172 xAxis = new NumberAxis(0, 24, 3);
173 final NumberAxis yAxis = new NumberAxis(0, 100, 10);
174 {@literal final LineChart<Number,Number> lc = new LineChart<Number,Number>(xAxis, yAxis)};
175
176 lc.setCreateSymbols(false);
177 lc.setAnimated(false);
178 lc.setLegendVisible(false);
179 lc.setTitle("ACME Company Stock");
180
181 xAxis.setLabel("Time");
182 xAxis.setForceZeroInRange(false);
183 yAxis.setLabel("Share Price");
184 yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis, "$", null));
185
186 {@literal hourDataSeries = new XYChart.Series<Number,Number>();}
187 hourDataSeries.setName("Hourly Data");
188 {@literal hourDataSeries.getData().add(new XYChart.Data<Number,Number>(timeInHours, prevY));}
189 lc.getData().add(hourDataSeries);
190
191 private void nextTime() {
192 if (minutes == 59) {
193 hours++;
194 minutes = 0;
195 } else {
196 minutes++;
197 }
198 timeInHours = hours + ((1d/60d) * minutes);
199 }
200
201 private void plotTime() {
202 if ((timeInHours % 1) == 0) {
203 // change of hour
204 double oldY = y;
205 y = prevY - 10 + (Math.random() * 20);
206 prevY = oldY;
207 {@literal while (y < 10 || y > 90) y = y - 10 + (Math.random() * 20);}
208 {@literal hourDataSeries.getData().add(new XYChart.Data<Number, Number>(timeInHours, prevY));}
209 // after 25hours delete old data
210 {@literal if (timeInHours > 25) hourDataSeries.getData().remove(0)};
211 // every hour after 24 move range 1 hour
212 {@literal if (timeInHours > 24)} {
213 xAxis.setLowerBound(xAxis.getLowerBound() + 1);
214 xAxis.setUpperBound(xAxis.getUpperBound() + 1);
215 }
216 }
217 }
218 </code></pre>
219
220 <P>The start method needs to call animation,.play() to start the
221 simulated dynamic chart.</P>
222 <P>Please refer to javafx.scene.control package documentation on CSS
223 styling. An example for styling a Chart via CSS is as follows:- to
224 set the chart content background to a certain color:</P>
225 <P>.chart-content { -fx-background-color: cyan;}</P>
226 <P>Line Chart line color can be styled as follows:-</P>
227 <P>.chart-series-line { -fx-stroke: green; -fx-stroke-width: 4px;}</P>
228 <P STYLE="margin-bottom: 0in"><BR>
229 </P>
230 </BODY>
231 </HTML>