| Original IBM content |
 English |
| Brazilian
Portuguese |
| German |
| French |
| Japanese |
| Korean |
| Spanish |
| Simplified Chinese |
| Traditional Chinese |
The
Chart widget displays data in a bar, pie, or line
chart. The
Chart widget can receive and display data in either XML
or comma-separated value (CSV) format. You can configure
the
Chart widget in many ways. For example, you can add titles both
above and below the chart and change the style. You can manipulate the
data by adding labels and values as well as exclude columns and rows from
the data. You can also add labels to the axis titles
as well as prefixes and suffixes to the axis values.
These are the sections covered in this article:
CSV data
XML data
Types of charts
Configuration tips
Events
Example scenario 1
Example scenario 2
Let's look more closely at the types of data that the
Chart widget
can display: XML and CSV.
Comma-separated value (CSV) data
Here is a sample of CSV data:
Vegetables,Y2005,Y2006,Y2007,Total|
Potato,19,18,20,57|
Onion,6,7,6,19|
Carrot,10,11,12,33|
Cabbage,9,9,6,24|
Total,44,45,44,133
It can also accept CSV data that has data types defined, for example:
Vegetables,Y2005,Y2006,Y2007,Total|
string,string,string,string,string|
Potato,19,18,20,57|
Onion,6,7,6,19|
Carrot,10,11,12,33|
Cabbage,9,9,6,24|
Total,44,45,44,133
To download a sample file of CSV data, click here.
XML data
When graphing XML data, the data can be in the form of a feed or a raw
XML document.
Example 1 is a sample of XML data that can be graphed
by the chart. This XML document contains sample (fictional) revenue data
for four companies:
Example 1
<?xml
version="1.0"?
<root
<series
<title
AIG</title
<data
<quarter
Q1</quarter
<amount
100000</amount
</data
<data
<quarter
Q2</quarter
<amount
200000</amount
</data
<data
<quarter
Q3</quarter
<amount
130000</amount
</data
<data
<quarter
Q4</quarter
<amount
110000</amount
</data
</series
<series
<title
COF</title
<data
<quarter
Q1</quarter
<amount
200000</amount
</data
<data
<quarter
Q3</quarter
<amount
100000</amount
</data
<data
<quarter
Q4</quarter
<amount
150000</amount
</data
</series
<series
<title
CSCO</title
<data
<quarter
Q1</quarter
<amount
100000</amount
</data
<data
<quarter
Q2</quarter
<amount
77000</amount
</data
<data
<quarter
Q3</quarter
<amount
50000</amount
</data
<data
<quarter
Q4</quarter
<amount
30000</amount
</data
</series
<series
<title
DELL</title
<data
<quarter
Q1</quarter
<amount
100000</amount
</data
<data
<quarter
Q2</quarter
<amount
17700</amount
</data
<data
<quarter
Q4</quarter
<amount
150000</amount
</data
</series
</root
Notice that certain quarter revenue data for is missing. In this case,
the widget displays 0 for the missing quarter.
To download a sample XML document similar to
Example 1, click
here.
You can also format the data in the following way (see
Example 2):
Example 2
<?xml version="1.0"?
<root
<series
<title
AIG</title
<data
<quarter
Q1</quarter
<amount
100000</amount
</data
</series
<series
<title
AIG</title
<data
<quarter
Q2</quarter
<amount
200000</amount
</data
</series
<series
<title
AIG</title
<data
<quarter
Q3</quarter
<amount
130000</amount
</data
</series
<series
<title
AIG</title
<data
<quarter
Q4</quarter
<amount
110000</amount
</data
</series
<series
<title
COF</title
<data
<quarter
Q1</quarter
<amount
200000</amount
</data
</series
<series
<title
COF</title
<data
<quarter
Q3</quarter
<amount
100000</amount
</data
</series
<series
<title
COF</title
<data
<quarter
Q4</quarter
<amount
150000</amount
</data
</series
<series
<title
CSCO</title
<data
<quarter
Q1</quarter
<amount
100000</amount
</data
</series
<series
<title
CSCO</title
<data
<quarter
Q2</quarter
<amount
77000</amount
</data
</series
<series
<title
CSCO</title
<data
<quarter
Q3</quarter
<amount
50000</amount
</data
</series
<series
<title
CSCO</title
<data
<quarter
Q4</quarter
<amount
30000</amount
</data
</series
<series
<title
DELL</title
<data
<quarter
Q1</quarter
<amount
100000</amount
</data
</series
<series
<title
DELL</title
<data
<quarter
Q2</quarter
<amount
17700</amount
</data
</series
<series
<title
DELL</title
<data
<quarter
Q4</quarter
<amount
150000</amount
</data
</series
</root
To download a sample XML document similar to
Example 2, click
here.
You can also format the data in the following
way (see
Example 3):
Example 3
<?xml version="1.0"?
<root
<series
<title
AIG</title
<data
<xx
<yy
<quarter
Q1</quarter
</yy
</xx
<amount
100000</amount
</data
<data
<xx
<yy
<quarter
Q2</quarter
</yy
</xx
<amount
200000</amount
</data
<data
<xx
<yy
<quarter
Q3</quarter
</yy
</xx
<amount
130000</amount
</data
<data
<xx
<yy
<quarter
Q4</quarter
</yy
</xx
<amount
110000</amount
</data
</series
<series
<title
COF</title
<data
<xx
<yy
<quarter
Q1</quarter
</yy
</xx
<amount
200000</amount
</data
<data
<xx
<yy
<quarter
Q3