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