ILOG JViews Charts 8.1 Samples Summary
How to run the samples is explained in the
starting the samples
page.
Types of Charts
There are many types of charts, and each type has its own benefits.
Generally, a chart is more appropriate for gaining an overview and a quick
intuitive understanding of a collection of numbers, while a table is better
for looking up when details matter. Applications where
overview and details equally matter often have a combination of
chart and table, or a chart with tooltips and navigation interactions.
3D charts are fancier than plain 2D charts.
Note that 3D pie charts and 3D polyline charts can easily convey wrong
information to the human eye: the 3D pie chart display the slices as larger
that happen to lie on the front half of the circle, and the 3D polyline
chart emphasizes up or down of a particular angle.
In a 3D pie chart, the slices that lie on the front half of the circle appear
larger; in a 3D polyline chart, the top and down sides of a particular angle
are emphasized.
Similarly, a stacked 3D bar chart can be fallacious: it emphasizes the top
slice of each bar, even if this slice is numerically irrelevant. For these
reasons, 2D charts are still more used than 3D charts.
Bar charts, polyline charts and filled area charts are primarily used to
show trends. To display a value over time, the preferred choice is a
polyline chart. To display accumulating value over time (such as
interests or consumption), you can choose a filled area chart;
a polyline chart is also possible. A bar chart is used when the data set
is small, namely composed of 5 values or less.
Parametric charts are perfect to see
the correlation between two parameters.
The parameters are assigned to the x axis and the y axis, respectively.
Bubble charts show, like parametric charts,
the correlation between two parameters, and emphasize some data points.
Treemap charts show data attributes
according to their importance.
Radar charts are like transposed polyline
charts: they show different parameters on different axes that emerge radially
from a center. A data point slice - that is a vertical cut in a polyline chart
- here corresponds to a polygon around the center. This kind of chart is
common in some application areas, such as biology. However, it may be
difficult to understand for those people that are not familiar with it. Note
that choosing the good order of the parameters around the circle is important
for understanding the chart. Note also that a radar chart with filled
areas can easily convey wrong information, since the eye catches the
surface of the areas, which are meaningless in the case of a radar chart.
Polar charts are like parametric charts,
when one of the two parameters has a circular or "periodically repeatable"
semantics.
High-low charts are used for displaying
stock values over time.
Multiple pie charts, side-by-side, should be avoided: A bar chart in
stacked 100% mode conveys the same information in an easier way (because it is
easier to visually compare the lengths of parallel bars than rotated
angles).
This sample shows a gallery of various JViews Charts projects.
This sample shows a parametric chart that displays a set of values against a set of other values.
This sample shows how to display data with a bubble renderer.
Bubble charts show, like parametric charts, the correlation between two
parameters, and emphasize some data points.
This sample demonstrates a treemap chart.
Treemap charts show data attributes according to their importance.
This sample displays two representations of the same data set. When a
legend item is clicked, the graphical representations of the corresponding
data set are changed to reflect the selected state of the data set: the bar
chart renderer is filled with a hatched pattern, and the area chart
renderer draws a white circle for each point of the data set.
Radar charts are like transposed polyline charts: they show different
parameters on different axes that emerge radially from a center. A
data point slice - that is a vertical cut in a polyline chart - here
corresponds to a polygon around the center. This kind of chart is
common in some application areas, such as biology. However, it may be difficult to
understand for those people that are not familiar with it. Note that choosing the good order of parameters around the circle is important
for understanding the chart. Note also that a radar chart with filled
areas can easily convey wrong information, since the eye catches the
surface of the areas, which are meaningless in the case of a radar chart.
This sample shows how a Polar chart can be used to display mathematical functions.
Polar charts are like parametric charts, when one of the two parameters
has a circular or "periodically repeatable" semantics.
This sample shows how to use a logarithmic scale in a chart.
This sample displays three dynamic data sets whose minimum, maximum, and average values for each category are computed dynamically and indicated by the square scatter renderer, the circle scatter renderer, and the gray polyline renderer respectively.
Customizing Rendering
You can customize the rendering of a chart in different ways:
-
Many graphical parameters can be set through CSS or through
setter methods in the API. CSS - Cascading Style Sheets - allows
to develop the look of a chart without Java coding, and to store
a complete chart look as a plain file. The sample
Chart CSS Styling
shows CSS styling; whereas the sample
Logarithmic Scales shows
how to perform basic customizations through the API.
For a comparison between these two approaches, see
CSS versus Styling through the API.
-
The IlvStyle class, which performs all basic
drawing operations in terms of AWT/Java2D primitives, can be
subclassed. This can yield fancy drawings. See the sample
Custom Style.
-
You can change the presentation of a chart also by adding synthetic
data sets and reusing existing renderers. The IlvDataSet is an
abstract interface; this makes it easy to create data sets whose
values implicitly depend on values in other data sets. Furthermore
any number of data set renderings can be superimposed in a chart.
The sample Combined Data Sets
illustrates this technique.
This sample demonstrates the styling capabilities of the chart component.
This sample shows how you can define a custom style to render pretty line charts.
This sample shows the available 3-D representations.
3-D charts are fancier than plain 2D charts. Note that 3D pie charts and 3D polyline charts
can easily convey wrong information to the human eye: in a 3-D pie chart, slices that lie on the
front half of the circle appear larger; in a 3-D polyline chart, the top and down sides of a
particular angle are emphasized.
Similarly, a stacked 3-D bar chart can be fallacious: it emphasizes the top slice of each bar,
even if this slice is numerically irrelevant. For these reasons, 2-D charts are still more used than 3-D charts.
Bar charts, polyline charts and filled area charts are primarily used to
show trends. To display a value over time, the preferred choice is a polyline chart.
To display accumulating value over time (such as interests or consumption), the preferred choice is a filled area chart;
a polyline chart is also possible. A bar chart is used when the data set is small, namely composed of 5 values or less.
This sample shows how to use the standalone customizer for a chart.
Customizing Interaction
The samples shown so far presented a static chart. However, it is
also possible to let the user interact with the chart. ILOG JViews Charts has an extensible system of interactors.
Highlight interaction demonstrates how to change the look of a chart in response to user interactions.
Interactors demonstrates each of the predefined interactors. It also includes the source code of these interactors.
This sample shows a data set rendered by two different
graphical representations (as a pie chart and a bar chart). These charts react to mouse
movements by highlighting the data point over which the mouse cursor is placed.
This sample shows the interactors that are built-in in ILOG
JViews Charts. It also contains their source code.
Real-time Updates
A chart is automatically updated when the data in the data set changes.
The following samples show such updates:
Memory Monitor and
Data Set Listeners.
In these samples the updates are not particularly optimized or fast.
Additional optimization techniques are illustrated in the samples
Real-time Supervision and
Sound Player.
This sample simulates a real-time supervision system. Data is generated randomly by a sinusoidal value generator and added to the data sets each time a timer event occurs.
This sample displays the memory usage of the current JVM (the one executing the sample) over time. The information shown in the sample is:
- The instant memory used (as a gradient bar chart).
- The memory used (as a gradient polyline) compared to the moving average of the memory used (as a white polyline) over time.
- The free memory compared to the total memory over time.
This sample shows how to synchronize several datasets. It simulates the visualization of successive temperature samples. A first chart (on the top) is used to display the actual temperature measurements carried out every hour of the day. A second one is used to display the temperature variations during the day.
This sample shows how to handle real-time audio data. It is a simple sound player based on the Java Sound Technology. Audio data is read from an audio input stream and displayed in two charts, one for each channel.
Connecting to the Data
You can connect a chart to a data source in different ways.
The following samples show the different technologies involved:
These data sources are small enough and can be loaded into memory at once.
When data is too large and spread over a long x axis, JViews Charts
provides a load-on-demand data source. It is shown in
Using Load-On-Demand.
This sample displays data imported from an Excel file. The file contains two sets of data (that is, two Excel sheets), each one rendered by its own chart.
This sample demonstrates how to use the load-on-demand mechanism available
in ILOG JViews Charts. Two binary files hold the data displayed by this sample:
-
lodData.dat - Contains 100 000 32-bit integer records that will be loaded
according to the visible range displayed by the charts located at the bottom of the panel.
-
sampleData.dat - Contains 1000 sample records computed from the data stored
in the lodData.dat file. The top-most chart displays the contents of this file,
thus providing an overview of all the data. Several controls and interactions let you change the behavior of the load-on-demand
mechanism as well as the visible data displayed by the charts.
This sample loads data stored in a Swing TableModel and displays it in a chart as polylines. It also shows how to print the chart to PDF.
This sample displays the contents of an XML document (the DOM) in three different representations: as a text view, as a tree view, and as a chart.
This sample allows you to display the stock quotes of one or several companies,
as well as several technical market indicators. Two kinds of charts are used to display the stock
data:
- The upper chart, which displays the stock data of the company being analyzed.
Several other companies can be displayed in overlay,as well as indicators such as moving averages.
- Two lower charts, each of them displaying one technical indicator (Volume, RSI,MACD,
and so on).
A wide variety of interactions allow you to zoom and pan the visible time frame.
You can also highlight the data by setting lower and upper price limits, or
use a fisheye view that focuses on a specific time interval. Note that when the sample is run as
an applet, a default data file is read instead.
Web Deployment with JavaServer Faces
These Web Deployment samples are based on ILOG JViews Charts JavaServer Faces
component set. These components are using JSF as a server side component
framework and render themselves on the client using different client-side
technologies.
The following samples are based on JSF components rendering DHTML and raster
images:
Chart Components shows the set
of JSF DHTML components available to display and manipulate a chart on a Web
page.
Stock Viewer is a Web display
of a stock price and financial indicators evolution over time.
Bank Account represents the
various account operations of a bank statement using a JSF DHTML chart.
Polar Chart shows a JSF DHTML
polar chart with various functions represented.
Image Map shows how to use
image maps over the chart image to explode pie slices and display specific
information.
Treemap shows specifically
treemap charts and treemap specific interactions.
JDBC Sample displays a JSF DHTML
chart filled with data extracted through a JDBC request on a data source.
You will find more details about these technologies in the
Building Web Applications DHTML & JSF
documentation.
The following samples are based on the Rich Web Charts JSF components
using SVG as rendering technology:
-
Rich Web Charts Dashboard
displays a dashboard showing how Rich Web Charts can be updated in real time
in response to modifications of the data source on the server side.
-
Rich Web Stock Chart shows the
advanced Web display of stock price and financial indicators evolution over
time.
You will find more details about this technology in the
Building Web Applications Rich Web Charts
documentation.
This sample shows the available ILOG JViews Charts Faces components. These components include a chart view, a legend, an overview, a pan and a zoom interactor.
This sample shows how to generate server-side charts using the JavaServer Faces framework environment. A servlet retrieves quotes from the Yahoo finance Web site and generates the corresponding stock prices chart and various financial indicators on-the-fly.
The charts are then displayed on the client side by JViews Charts Faces components.
This sample shows a single view that contains a bank statement and a chart
that represents that bank statement.
This sample shows how a polar chart can be used to display mathematical functions using the JViews Charts Faces component.
This sample shows how to use a image maps with the JavaServer Faces chart view component.
A managed bean loads data from an XML file and fill a pie chart displayed by the JavaServer Faces Chart view component.
An image map is displayed on top of the chart image to display tooltips and to show the reference manual of the selected package.
This sample shows how to use treemap charts for navigation in a thin-client
environment, with the JSF chart component. A servlet loads a
tree-structured model and generates an image of a treemap chart and its
corresponding client-side image map.
This sample displays data imported from a Microsoft Excel file.
The first set of data (the Excel sheet) is displayed by a JViews Charts Faces component.
This Rich Web Charts sample displays a regularly updated
dashboard showing several indicators. The client-side display is done in SVG,
and server-side components are exposed as JavaServer Faces components.
This Rich Web Charts sample displays stock prices and
financial indicators as SVG on the Web client using JSF Components.
Integrating an ILOG JSF Chart view in a portlet environment.
Other Web Deployment
These Web Deployment samples are not using a server-side component framework
and are directly based on the Servlet technology.
-
Basic Servlet displays a chart
through a Servlet class.
-
The handling of interactions is shown in
Image Map.
-
Treemap shows specifically
treemap charts and treemap specific interactions.
Another Web Deployment usage of the JViews Charts library is illustrated in
Basic JSP Chart that has only
a JSP file and some CSS customizations; it does not require Java coding.
This sample shows how to generate server-side charts in a
thin-client environment. A servlet loads data from an XML data file
and renders them as PNG/JPEG/SVG images according to user preferences
set on the client.
This sample shows how to generate server-side charts in a thin-client environment using JSP technology. A JSP page loads data from an XML data file located on the server and dumps the corresponding chart in the HTTP response stream as a JPEG image.
This sample shows how to generate client-side image maps in a
thin-client environment. A servlet loads data from an XML file and
generates an image of a Pie chart and its corresponding client-side
image map.
This sample shows how to use treemap charts for navigation in a thin-client
environment. A servlet loads a tree-structured model and generates an image
of a treemap chart and its corresponding client-side image map.