Chart

Added by Anna G O'Neal | Edited by IBM contributor

Anna G O'Neal on December 7, 2008 | Version 19

No abstract provided.

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.

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

Bar chart

A bar chart displays two or more values in a chart with rectangular bars that represent the values. A bar chart is useful for displaying data in a format that is easy to visualize. Unlike tables that display data in a linear format, bar charts can organize the data so that it highlights patterns and trends. Users can hover their cursors over the bars to see exact values. If the data types are defined, the bar chart skips over that row when it looks for values to display in the chart.

Pie chart

A pie chart displays data in a circle graph divided into sectors. Each sector represents a value as a percentage of some whole. For example, if a value is 20 units out of 100, the sector takes up 20% of the circle. A pie chart is useful for displaying one-dimensional data in a format that is easy to visualize. Unlike tables that display data in a linear format, pie charts graphically show how values compare to each other in relation to the whole. Users can hover their cursors over the pieces of the pie chart to see exact values.

By default, when the pie chart receives the CSV data, it displays the data for the first row that contains numerical values. In the CSV data example above, the pie chart displays data for Potato. If the data types are defined, the pie chart skips over that row when it looks for values to display in the chart. Just like the first example, the pie chart displays data for Potato.

Line chart

A line chart displays values as dots that are connected to form a line on a chart. A line chart is useful for displaying data in a format that is easy to visualize. Unlike simple data tables, line charts organize data so that it shows how pieces of information are related to each other based on a scale. Users can hover their cursors over the lines to see exact values.

If the data types are defined, the line chart skips over that row when it looks for values to display in the chart.

Configuration tips

When configuring the Chart widget, refer to the following field descriptions:

These fields are located in the Data section:

Field Description
Data type Data type can be either XML or CSV data.
Data source URL The URL that points to the file that contains the data.
Is vertical data table When selected, the labels and values are reversed in the chart. For example, look at this sample data:

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

If this option is not selected (the default), when this data displays in a chart, the bars, lines, or sectors represent the values in the first column under Vegetables:

Potato
Onion
Carrot
Cabbage
Total

Note: The chart interprets the second row as data type definitions and skips over it.

When this option is selected, the data is reversed. Now, the bars, lines, or sectors represent the values in the column headers:

Y2005
Y2006
Y2007
Total

Labels By default, when the Is vertical data table option is not selected, the labels on the x-axis are taken from the first row of alphanumerical data. You can use the Labels option to change the row. You can either specify the row number or the name of the first item in the row. For example, using the sample data above, the default labels are as follows:

Y2005
Y2006
Y2007
Total

If you type 4 in the Labels field, the items in the Onion row display as labels:

6
7
6
19

Note that the chart counts the row with data types when you use a number.

If you type Carrot in the Labels field, the labels change to the following:

10
11
12
33

If you select the Is vertical data table option to reverse the values and labels, use the names of columns instead of rows in the Labels field.
Values By default, when the Is vertical data table option is not selected, the bars, lines, or sectors display in the chart to show the values for all rows of data that contain numerical data. You can use the Values option to change which values display in the chart. You can either specify the row number or the name of the first item in the row. For example, using the sample data above, the bars, lines, or sectors show values for all the items in the first column:

Potato
Onion
Carrot
Cabbage
Total

If you type 4 in the Values field, only the values for Onion display in the chart:

6
7
6
19

Note that the chart counts the row with data types when you use a number.

If you type Carrot in the Values field, only the values for Carrot display in the chart:

10
11
12
33

If you select the Is vertical data table option to reverse the values and labels, use the names of columns instead of rows in the Values field.
Exclude columns Specify which columns you want to exclude in the chart, for example 5, 5–7, or 5,7. If you know the names of the column headers that you want to exclude, you can type the name or names in the field, for example Y2007 or Y2007,Total.
Exclude rows Specify which rows you want to exclude in the chart, for example 5, 5–7, or 5,7. If you know row value or values that you want to exclude, you can type the name or names in the field, for example Potato or Potato,Carrot.

These fields are located in the Display section:

Field Description
Chart type Select to display the data as a bar, line, or pie chart
Caption text The title that displays above the chart.
Subcaption text The title that displays below the chart.
Style A list of style options. Similar to a CSS style sheet, each option defines the fonts, background color, and more for the overall chart. Your administrator can add more styles, if needed.

These fields are located in the Axes section:

Field Description
X-axis name The name of the x-axis.
Prefix and suffix to labels A prefix or suffix that is added to all the labels in the x-axis. For example, if a label is ’2005’, and you set the prefix to be ’Y’, the label that displays in the chart is ’Y2005’. If a label is ’100’, and you set the suffix to be ’K’, the label that displays in the bar chart is ’100K’.
Y-axis name The name of the y-axis.
Prefix and suffix to values A prefix that is added to the beginning of all the values in the y-axis. For example, if a value is ’2005’, and you set the prefix to be ’Y’, the value that displays in the bar chart is ’Y2005’. if a value is ’100’, and you set the suffix to be ’K’, the value that displays in the bar chart is ’100K’.

Events

See the following table to learn which events the Bar Chart widget can send and receive:

Send Receive
This widget does not send event data.

Display Data using Any Data - receives data in either XML or comma-separated value (CSV) format.
Display Data using URL - receives a URL string that points to a file that contains CSV data.

Example scenario

Goal:
Display the total sales for a set of customers for the past three years in a bar chart.

Steps required:

Create a TXT file in comma-separated value (CSV) format to contain the customer sales data. For example, your data may look something like this:

Customers,Y2005,Y2006,Y2007,Total|
string,string,string,string,string|
Acme,19,18,20,57|
Jones Inc.,6,7,6,19|
Creative Doors Inc.,10,11,12,33|
George’s Goods,9,9,6,24|
Total,44,45,44,133

Post your TXT file to a remote server, and copy the fully qualified URL to your clipboard.

Drag the Chart widget onto the page.

Hover your cursor over the Chart widget, and click the menu option icon .

Click Edit Settings to open the configuration window.

In the Data source URL field, paste the fully qualified URL of the TXT file, and click Save. Note that the bar chart is already selected by default. Now the customer data in the TXT file should display in the bar chart.