Creating a bar graph chart

These steps reference the Yahoo-Bonds portlet created as an example in the previous section, but you can use any portlet that contains tabular data.

Creating a bar graph of the Yahoo-Bonds portlet

In Web Studio, select Build | Portlets from the left pane.

In the detail view, select Status | New to locate your portlet. Right-click the portlet you just created and select Create Chart.

The Charting Portlet wizard opens in a new window and displays all available structured grid, table, or list objects included in the current portlet’s content.

Click Select to choose a grid, table, or list object and click Next.

Complete the these fields:

Chart Title – enter a title.
Chart Height – accept the default height, which is in pixels, or enter a different value.
Chart Width – accept the default width, which is in pixels, or enter a different value.
Font Name – accept the default font—Sans Serif—or enter a different font name. The font you specify must be a True Type font and the font must be installed on your local machine.

TrueType fonts are device-independent fonts stored as outlines. You can size the fonts to any height, and they print exactly as they appear on the screen.
Chart Legend – select where you want the chart legend positioned—None (no legend), Top (above the chart), Bottom (below the chart), Left (to the left of the chart), or Right (to the right of the chart).
Chart Type – select whether the chart should be Bar, Line, or Graph. For this example, select Bar.
Create an Image Map – select this option to create a clickable image map of the chart from which users can access the originating data.

When you select this option, you are required to complete these additional fields:
- Category Event Name – the name for the event
- Notify Now – send the event immediately.
- Notify Across Page – send the event across pages if there is a listener on another page; otherwise, look for events on the current page. for this example, do not select this option.
- Series Event Name – the name of the series.
- Notify Now – send the event immediately.
- Notify Across Page – send the event across pages if there is a listener on another page; otherwise, look for events on the current page. for this example, do not select this option.

Click Next when you finish with your entries. The Define Chart window appears.

The Preview section displays the original data from which the chart is built. The Chart Parameters section contains the fields where you define the chart’s appearance.

Complete the Chart Parameters:

X-Axis Label – enter labels for the X-axis and Y-axis of the chart. Our example labels the X-axis “Maturity” and the Y-axis “Yield”.
Category Labels – drop-down list lets you choose which data set to use as a label for the bar graphs. This example uses “Column 1”, for bond maturity rates.
Show Values – check box displays the literal number of the data above each bar; leaving it unchecked hides this information.
Series – Each Series represents one bar color of information. Choose meaningful names for display in the legend, and assign each data set a unique color for easy identification. This example uses columns 2, 3, 4, and 5 as series information, naming them “yield”, “yesterday”, “last week”, and “last month” respectively.

The Category Labels drop-down list determines which data you can select in Series. If the category label is “None,” choose any row or column for data. If the category label is a column, choose only columns. If the category label is a row, choose only rows.

Click Next for a preview of your chart. To save the results, click Finish.

A confirmation appears, indicating that the portlet has been saved and updated. Click OK.