GreenPoint WebCharts builder inputs - Portlet Factory v6.1.2

GreenPoint WebCharts builder inputs

+
Search Tips | Advanced Search

This topic describes the GreenPoint WebCharts builder inputs.

General inputs
Chart Style and Data
Chart Properties
Chart Click Action
Axis Properties
Data Labels

General inputs

Input Name Description
Name Name for this builder call. The WebSphere Portlet Factory Designer displays this name in the builder call list.
Page Location Use the Page Location input to specify the page or pages on which this builder call will act.

Chart Style and Data

Input Name Description
Chart Type Use this select list to choose a chart type. Depending on the type you choose, additional inputs might be available elsewhere in the builder call editor. You can choose among the following chart types:

Bar
Line
Pyramid
Area
Pie
Dial
Radar
Step

Provide Custom Style Enable this input to create a chart with a style that you specify.
Note: You must provide style and chart data when this selection is enabled.
If you use the default chart style in a dial chart and define only one segment in the Dial Ranges input, the chart renders correctly but has strange side effects.
Style Data This input is available when the Provide Custom Style input is enabled.
Use the picker control to specify a file that provides the style data for the chart. The path to the file is relative to your applications servable content.
Note: This file is typically created using the WebCharts Designer utility, and saved in your project where you want it in your application. When you save a file with WebCharts Designer, the default behavior is to save the WCP file. However, the Style Data input is expecting an XML file.
To create an XML file that can be consumed by the Style Data input:

Use the WebCharts Designer utility to create a style.
Go to the XML Style tab. The XML you see here is what the WebCharts builder is expecting (and is different from the contents of the WCP file).
Click the Save button in the lower-right corner. In the resulting Save window, choose the location and name of the XML file. Specify this file in the Style Data input text box or navigate to it with the reference chooser.

Chart Data Specifies the XML data to be used as the source chart data.
Use the reference chooser to reference the results of a service call or method, or the contents of a variable.
Example: ${Variables/chartData}
Note: This input is not available for a dial chart.
Upper Limit This input is available when the Chart Type input is Dial.
Use this input to specify the value that represents the upper limit displayed on the dial chart.
Value This input is available when the Chart Type input is Dial.
Use this input to specify the value the dial chart needle points to. This value should be between 0 and the value you specify in the Upper Limit input.
Dial Ranges This input is available when the Chart Type input is Dial. Use this input to define the dial chart segments.
You can configure the dial chart so that different sections are in different colors. The Dial Ranges input most commonly points to an XML variable that defines the boundaries between these sections. The contents of such a variable might look as follows:
<Segments>  <Underperforming>60</Underperforming>  <Tracking>10</Tracking>  <Overperforming>30</Overperforming> </Segments>

In this example, the first 60% of the dial chart is one color, the next 10% another color, and the last 30% yet another color.
Note: You must define at least one segment in Dial Ranges. If you define only one segment and use the default chart style, set the Show Chart Legend input to No Legend and the Popup input to Disabled. This avoids strange side effects in the default style for one segment dials.

Data Transformation

Input Name Description
Data Source Format Use this section to specify an optional transformation to perform on the chart data before passing the data to the charting engine. You can choose:

Tabular

Transforms data in the following form:
<RowSet> <Row> <EMPNO>000020</EMPNO> <COMM>3300.00</COMM> <SALARY>41250.00</SALARY> </Row> <Row> <EMPNO>000030</EMPNO> <COMM>3060.00</COMM> <SALARY>38250.00</SALARY> </Row> </RowSet>

WebCharts Format

Disables the transformation of data and uses native WebChart format.

X Axis Tag This input is available for the Tabular option in Data Source Format.
Specify a column in the source data that should not be considered a column of data in the chart, but rather an additional dimension on the data. For example, in a bar chart, you can have the following data:
<RowSet> <Row> <EMPNO>000020</EMPNO> <COMM>3300.00</COMM> <SALARY>41250.00</SALARY> </Row> <Row> <EMPNO>000030</EMPNO> <COMM>3060.00</COMM> <SALARY>38250.00</SALARY> </Row> <Row> <EMPNO>000050</EMPNO> <COMM>3214.00</COMM> <SALARY>40175.00</SALARY> </Row> </RowSet>

If you specify EMPNO as the X Axis (and also apply the RowsetRow transformation), the chart has the EMPNO values along the horizontal axis, each with two bars above it for SALARY and COMM.
Note: If the data variable has a schema, the X Axis drop-down list is pre-populated from the tags in the XML variable. If no schema is associated with the variable, know the name of the tag corresponding to the X Axis tag and enter that text.
Include or Exclude Columns This input is available for the Tabular option in Data Source Format.
Choose to include or exclude columns in the final chart data.

Use All Columns

Includes all available columns.

Include Columns

Includes specific columns.

Exclude Columns

Excludes specific columns.

Column List This input is available for the Tabular option in Data Source format, if you selectInclude or Exclude Columns.
Use this table to specify which columns in the source data is to be included in or excluded from the final chart data. Pickers in each column cell allow you to select columns by name.
Note: For included columns, the order columns have in this table is the order in which they appear in the chart.
Make Non-Numeric Columns Null Enable this input to exclude from the transformed data columns that contain nonnumeric data.
Localized Resource Use this input to specify a localized resource to use with this builder. This resource is used to localize the Row label and Column label.
Select localization information specified in the Localized Resource builder and stored in the variable created by that builder. (By default, this variable is named LocaleData, but that name can be changed.)
Localization Prefix Use this input to customize the way data labels appear in WebCharts.
By applying a prefix to localization data, you can generate multiple versions of the data labels associated with a specific set of data. Thus, if you have multiple WebChart builders pointing at the same data set, and you want each WebChart builder to have different data labels, you can specify a prefix in each WebChart Localization Prefix input, and then use that prefix in your resource bundle.
For example, your resource bundle has the following data:
EMPNO=Employee Number COMM=Commission SALARY=Salary

If you want one WebChart to use these data labels, and another to display this data using different labels, you specify a localization prefix in the second WebChart builder, say different_, and then add entries using that localization prefix to your resource bundle as follows:
different_EMPNO=Different Employee Number different_COMM=Different Commission different_SALARY=Different Salary

The WebCharts builder assigned the localization prefix uses the prefixed data in the resource bundle. A WebChart without the prefix accesses the non-prefixed data in the resource bundle the usual way. This results in each WebChart displaying different data labels even though they are using the same data source.
In this example, the first WebChart data labels would be Employee Number, Commission, and Salary. The second WebChart (the one with the localization prefix configured) has data labels of Different Employee Number, Different Commission, and Different Salary.
Log Chart Data Enable this input to send chart data to the console and the debug.txt file.
This allows you to see the data that is used as input to the chart.

Chart Properties

Input Name Description
Chart Title Optional. Specifies a chart title. Enter title text or use the picker to select a variable or resource bundle.
Note: Title style is controlled by the Style Data input.
Image Type Charts can be produced in one of several file formats to include:

PNG (Portable Network Graphics)

This format provides a portable, legally unencumbered, well-compressed, well-specified standard for lossless bitmapped image files. It produces the images compatible in size with GIF images and is supported by all major browsers.

JPG (Joint Photographic Experts Group)

The JPEG implementation uses JFIF (JPEG File Interchange Format) that implements lossy compression of the original image. JPEG format is not suited for the transmitting charts images and produces larger files with potentially lower quality.

SWF (Macromedia Flash movie)

SWF files store commands for the Flash plugin rather than the image pixels themselves. This is a very efficient format, especially for the large charts, and produces better quality images.

SVG (Adobe Scaleable Vector Graphics)

SVG files store XML statements for the Adobe plugin rather than the image pixels themselves. WebCharts SVG implementation produces XML in the compressed form.

WBMP (Wireless Bitmap Format)

The WBMP format enables graphical information to be sent to a variety of handsets. A WBMP image can be used in WAP pages to display charts on the wireless devices. Currently, there is only one type of WMBP specified by the Wireless Application Environment Specification. This format supports only monochrome images.

Width Optional. The width of the chart in pixels.
If no width is specified, the width setting from the Style Data input is used.
Height Optional. The height of the chart in pixels.
If no height is specified, the height setting from the Style Data input is used.
Show Chart as 3D Optional. Specifies whether to use three-dimensional effects when displaying the chart.

Use Chart Style

Defaults this setting to whatever is defined in the Provide Custom Style input.

3D

Displays chart with three-dimensional effect.

2D

Displays chart with two dimensions.

Show Chart Legend Optional. Specifies whether to show the chart legend.

Use Chart Style

Defaults this setting to whatever is defined in the Provide Custom Style input.

Has Legend

Displays a legend for the chart.

No Legend

Suppresses display of a chart legend.

If the Chart Type input is set to Dial and the Dial Ranges input defines only one segment when the default chart style is used, set the No Legend value to avoid style side effects.
Popup Optional. Select a cursor action that activates chart popups. You can choose:

Use Chart Style

Uses the popup activate action defined in the chart style file.

Mouse Over

Opens a popup on a mouse over action.

Mouse Down

Opens a popup on a mouse-down (click) action.

Disabled

Suppresses the display of chart popup.
Note: If you enable any click actions, those continue to work when popups are disabled.
If the Chart Type input is set to Dial and the Dial Ranges input defines only one segment when the default chart style is used, set the Disabled value to avoid style side effects.

Alternate Text This input corresponds to the alt= attribute in the HTML image tag. Enter the text that appears when the mouse pointer is placed over the image or when the image cannot be displayed. For example: This is an alt text string.

Chart Click Action

Input Name Description
Enable Click Action Optional. If checked, additional builder inputs appear that allow you to specify the type of action to take when the user clicks on the chart.
Specify the type of action in the Action Type input.
Action Type Select an action type.

WebApp Action

Uses an action in the current model.

JavaScript

Uses a JavaScript snippet you provide that is executed when the user clicks the chart.

Method to Call This input is available when the Action Type input is WebApp.
Specify a method to call when the on-click action occurs. (See Compatibility Note in the Inputs input.)
This method usually translates a label into a score. This method is often available from the Lookup Table builder. Example: scoreDescriptionValue
Inputs This input is available when the Action Type input is WebApp.
Use this table to specify any required arguments to pass to the method specified in the Method to Call input. Compatibility
Note: Click actions based on a variables that were created with older versions of the WebCharts builder must be re-mapped using the UI controls available in this builder. Do this by re-selecting the method and then using the value picker to assign chart values to individual method arguments that automatically populate the Name column in the input table.
Evaluate Arguments This input is available when the Action Type input is WebApp. Specify when method arguments above are to be evaluated.

When the action is run
As page is rendered

OnClick Javascript This input is available when the Action Type input is JavaScript. Use this input to enter JavaScript code that is executed when the user clicks the chart. For example, you can use the following code to pop up an alert:
javascript:window.alert('$(colLabel) $(rowLabel) was clicked')

Note: See the WebCharts user documentation for more information about parameterized event handlers.

Axis Properties

Input Name Description
Axis Settings Optional. This group of inputs allows you to specify individual settings for each axis of the chart. Depending on the chart, there can be a maximum of five axes.
The list on the left of these inputs represents the chart axes for the chart type specified in the file or variable in the Chart Style Source input. The attributes you can specify for each axis include:

Axis

Use this column to select a graph axis to work with. Available choices are defined in the style file.

Multi Line

Select From Style, Yes, or No. The From Style option uses the preference in the style file.

Format Pattern

Optional. For the detailed description of the pattern format and other attributes, see Java documentation for DecimalFormat and SimpleDateFormat classes.

Parse Pattern

Optional. For the detailed description of the pattern format and other attributes, see Java documentation for DecimalFormat and SimpleDateFormat classes.

Scale Min

Optional. Specifies the minimum value that the chart represents. Leave this blank to use the setting in the chart style file or variable, which typically does not specify any value. In this case, the value is derived from the chart data.

Scale Max

Optional. Specifies the maximum value that the chart represents. Leave this blank to use the setting in the chart style file or variable, which typically does not specify any value. In this case, the value is derived from the chart data.

Data Labels

Input Name Description
Data Label Placement Optional. Specify the display location of data labels in the chart.

Use Chart Style

Places labels according to locations defined in the Provide Custom Style input.

Outside

Places labels outside the area of the chart.

Inside

Places labels within the area of the chart.

Data Label Style Specify a style for the data labels.

Use Chart Style

Adopts default style associated with chart.

None

Uses plain text.

Value

Uses style for values.

RowLabel

Uses style associated with row labels.

ColumnLabel

Uses style associated with column labels.

Pattern

Uses style associated with the Label Pattern input.

See the WebCharts user documentation for more information about defining data label patterns
Is Label Multi-line Specify the arrangement of data labels.

Use Chart Style

Uses label properties defined in the Provide Custom Style input.

Multiline

Uses labels on multiple lines.

Single Line

Uses single-line labels.

Data Label Decoration Optional. Specify the border style and shape of the data label. Choose from a variety of styles, including: None, Simple, Double, Bevel, ThinRound, Round, Shadow, RoundShadow, FrameOpened, FrameClosed, and FrameTopBottom.
In addition, you can default this setting to the decoration defined in the Chart Style input.
Label Pattern This input is available when Pattern is selected as the Data Label Style input.
Specify a parameterized pattern string for the information in the data label. For example: $(colLabel) $(value)
See the WebCharts user documentation for more information about defining data label patterns

Parent topic: GreenPoint WebCharts builder

Library | Support |

Input Name	Description
Name	Name for this builder call. The WebSphere Portlet Factory Designer displays this name in the builder call list.
Page Location	Use the Page Location input to specify the page or pages on which this builder call will act.

Input Name	Description
Chart Type	Use this select list to choose a chart type. Depending on the type you choose, additional inputs might be available elsewhere in the builder call editor. You can choose among the following chart types: Bar Line Pyramid Area Pie Dial Radar Step
Provide Custom Style	Enable this input to create a chart with a style that you specify. Note: You must provide style and chart data when this selection is enabled. If you use the default chart style in a dial chart and define only one segment in the Dial Ranges input, the chart renders correctly but has strange side effects.
Style Data	This input is available when the Provide Custom Style input is enabled. Use the picker control to specify a file that provides the style data for the chart. The path to the file is relative to your applications servable content. Note: This file is typically created using the WebCharts Designer utility, and saved in your project where you want it in your application. When you save a file with WebCharts Designer, the default behavior is to save the WCP file. However, the Style Data input is expecting an XML file. To create an XML file that can be consumed by the Style Data input: Use the WebCharts Designer utility to create a style. Go to the XML Style tab. The XML you see here is what the WebCharts builder is expecting (and is different from the contents of the WCP file). Click the Save button in the lower-right corner. In the resulting Save window, choose the location and name of the XML file. Specify this file in the Style Data input text box or navigate to it with the reference chooser.
Chart Data	Specifies the XML data to be used as the source chart data. Use the reference chooser to reference the results of a service call or method, or the contents of a variable. Example: ${Variables/chartData} Note: This input is not available for a dial chart.
Upper Limit	This input is available when the Chart Type input is Dial. Use this input to specify the value that represents the upper limit displayed on the dial chart.
Value	This input is available when the Chart Type input is Dial. Use this input to specify the value the dial chart needle points to. This value should be between 0 and the value you specify in the Upper Limit input.
Dial Ranges	This input is available when the Chart Type input is Dial. Use this input to define the dial chart segments. You can configure the dial chart so that different sections are in different colors. The Dial Ranges input most commonly points to an XML variable that defines the boundaries between these sections. The contents of such a variable might look as follows: <Segments> <!-- first 60% --> <Underperforming>60</Underperforming> <!-- next 10% --> <Tracking>10</Tracking> <!-- last 30% --> <Overperforming>30</Overperforming> </Segments> In this example, the first 60% of the dial chart is one color, the next 10% another color, and the last 30% yet another color. Note: You must define at least one segment in Dial Ranges. If you define only one segment and use the default chart style, set the Show Chart Legend input to No Legend and the Popup input to Disabled. This avoids strange side effects in the default style for one segment dials.

Input Name	Description
Data Source Format	Use this section to specify an optional transformation to perform on the chart data before passing the data to the charting engine. You can choose: Tabular Transforms data in the following form: <RowSet> <Row> <EMPNO>000020</EMPNO> <COMM>3300.00</COMM> <SALARY>41250.00</SALARY> </Row> <Row> <EMPNO>000030</EMPNO> <COMM>3060.00</COMM> <SALARY>38250.00</SALARY> </Row> </RowSet> WebCharts Format Disables the transformation of data and uses native WebChart format.
X Axis Tag	This input is available for the Tabular option in Data Source Format. Specify a column in the source data that should not be considered a column of data in the chart, but rather an additional dimension on the data. For example, in a bar chart, you can have the following data: <RowSet> <Row> <EMPNO>000020</EMPNO> <COMM>3300.00</COMM> <SALARY>41250.00</SALARY> </Row> <Row> <EMPNO>000030</EMPNO> <COMM>3060.00</COMM> <SALARY>38250.00</SALARY> </Row> <Row> <EMPNO>000050</EMPNO> <COMM>3214.00</COMM> <SALARY>40175.00</SALARY> </Row> </RowSet> If you specify EMPNO as the X Axis (and also apply the RowsetRow transformation), the chart has the EMPNO values along the horizontal axis, each with two bars above it for SALARY and COMM. Note: If the data variable has a schema, the X Axis drop-down list is pre-populated from the tags in the XML variable. If no schema is associated with the variable, know the name of the tag corresponding to the X Axis tag and enter that text.
Include or Exclude Columns	This input is available for the Tabular option in Data Source Format. Choose to include or exclude columns in the final chart data. Use All Columns Includes all available columns. Include Columns Includes specific columns. Exclude Columns Excludes specific columns.
Column List	This input is available for the Tabular option in Data Source format, if you selectInclude or Exclude Columns. Use this table to specify which columns in the source data is to be included in or excluded from the final chart data. Pickers in each column cell allow you to select columns by name. Note: For included columns, the order columns have in this table is the order in which they appear in the chart.
Make Non-Numeric Columns Null	Enable this input to exclude from the transformed data columns that contain nonnumeric data.
Localized Resource	Use this input to specify a localized resource to use with this builder. This resource is used to localize the Row label and Column label. Select localization information specified in the Localized Resource builder and stored in the variable created by that builder. (By default, this variable is named LocaleData, but that name can be changed.)
Localization Prefix	Use this input to customize the way data labels appear in WebCharts. By applying a prefix to localization data, you can generate multiple versions of the data labels associated with a specific set of data. Thus, if you have multiple WebChart builders pointing at the same data set, and you want each WebChart builder to have different data labels, you can specify a prefix in each WebChart Localization Prefix input, and then use that prefix in your resource bundle. For example, your resource bundle has the following data: EMPNO=Employee Number COMM=Commission SALARY=Salary If you want one WebChart to use these data labels, and another to display this data using different labels, you specify a localization prefix in the second WebChart builder, say different_, and then add entries using that localization prefix to your resource bundle as follows: different_EMPNO=Different Employee Number different_COMM=Different Commission different_SALARY=Different Salary The WebCharts builder assigned the localization prefix uses the prefixed data in the resource bundle. A WebChart without the prefix accesses the non-prefixed data in the resource bundle the usual way. This results in each WebChart displaying different data labels even though they are using the same data source. In this example, the first WebChart data labels would be Employee Number, Commission, and Salary. The second WebChart (the one with the localization prefix configured) has data labels of Different Employee Number, Different Commission, and Different Salary.
Log Chart Data	Enable this input to send chart data to the console and the debug.txt file. This allows you to see the data that is used as input to the chart.

Input Name	Description
Chart Title	Optional. Specifies a chart title. Enter title text or use the picker to select a variable or resource bundle. Note: Title style is controlled by the Style Data input.
Image Type	Charts can be produced in one of several file formats to include: PNG (Portable Network Graphics) This format provides a portable, legally unencumbered, well-compressed, well-specified standard for lossless bitmapped image files. It produces the images compatible in size with GIF images and is supported by all major browsers. JPG (Joint Photographic Experts Group) The JPEG implementation uses JFIF (JPEG File Interchange Format) that implements lossy compression of the original image. JPEG format is not suited for the transmitting charts images and produces larger files with potentially lower quality. SWF (Macromedia Flash movie) SWF files store commands for the Flash plugin rather than the image pixels themselves. This is a very efficient format, especially for the large charts, and produces better quality images. SVG (Adobe Scaleable Vector Graphics) SVG files store XML statements for the Adobe plugin rather than the image pixels themselves. WebCharts SVG implementation produces XML in the compressed form. WBMP (Wireless Bitmap Format) The WBMP format enables graphical information to be sent to a variety of handsets. A WBMP image can be used in WAP pages to display charts on the wireless devices. Currently, there is only one type of WMBP specified by the Wireless Application Environment Specification. This format supports only monochrome images.
Width	Optional. The width of the chart in pixels. If no width is specified, the width setting from the Style Data input is used.
Height	Optional. The height of the chart in pixels. If no height is specified, the height setting from the Style Data input is used.
Show Chart as 3D	Optional. Specifies whether to use three-dimensional effects when displaying the chart. Use Chart Style Defaults this setting to whatever is defined in the Provide Custom Style input. 3D Displays chart with three-dimensional effect. 2D Displays chart with two dimensions.
Show Chart Legend	Optional. Specifies whether to show the chart legend. Use Chart Style Defaults this setting to whatever is defined in the Provide Custom Style input. Has Legend Displays a legend for the chart. No Legend Suppresses display of a chart legend. If the Chart Type input is set to Dial and the Dial Ranges input defines only one segment when the default chart style is used, set the No Legend value to avoid style side effects.
Popup	Optional. Select a cursor action that activates chart popups. You can choose: Use Chart Style Uses the popup activate action defined in the chart style file. Mouse Over Opens a popup on a mouse over action. Mouse Down Opens a popup on a mouse-down (click) action. Disabled Suppresses the display of chart popup. Note: If you enable any click actions, those continue to work when popups are disabled. If the Chart Type input is set to Dial and the Dial Ranges input defines only one segment when the default chart style is used, set the Disabled value to avoid style side effects.
Alternate Text	This input corresponds to the alt= attribute in the HTML image tag. Enter the text that appears when the mouse pointer is placed over the image or when the image cannot be displayed. For example: This is an alt text string.

Input Name	Description
Enable Click Action	Optional. If checked, additional builder inputs appear that allow you to specify the type of action to take when the user clicks on the chart. Specify the type of action in the Action Type input.
Action Type	Select an action type. WebApp Action Uses an action in the current model. JavaScript Uses a JavaScript snippet you provide that is executed when the user clicks the chart.
Method to Call	This input is available when the Action Type input is WebApp. Specify a method to call when the on-click action occurs. (See Compatibility Note in the Inputs input.) This method usually translates a label into a score. This method is often available from the Lookup Table builder. Example: scoreDescriptionValue
Inputs	This input is available when the Action Type input is WebApp. Use this table to specify any required arguments to pass to the method specified in the Method to Call input. Compatibility Note: Click actions based on a variables that were created with older versions of the WebCharts builder must be re-mapped using the UI controls available in this builder. Do this by re-selecting the method and then using the value picker to assign chart values to individual method arguments that automatically populate the Name column in the input table.
Evaluate Arguments	This input is available when the Action Type input is WebApp. Specify when method arguments above are to be evaluated. When the action is run As page is rendered
OnClick Javascript	This input is available when the Action Type input is JavaScript. Use this input to enter JavaScript code that is executed when the user clicks the chart. For example, you can use the following code to pop up an alert: javascript:window.alert('$(colLabel) $(rowLabel) was clicked') Note: See the WebCharts user documentation for more information about parameterized event handlers.

Input Name	Description
Data Label Placement	Optional. Specify the display location of data labels in the chart. Use Chart Style Places labels according to locations defined in the Provide Custom Style input. Outside Places labels outside the area of the chart. Inside Places labels within the area of the chart.
Data Label Style	Specify a style for the data labels. Use Chart Style Adopts default style associated with chart. None Uses plain text. Value Uses style for values. RowLabel Uses style associated with row labels. ColumnLabel Uses style associated with column labels. Pattern Uses style associated with the Label Pattern input. See the WebCharts user documentation for more information about defining data label patterns
Is Label Multi-line	Specify the arrangement of data labels. Use Chart Style Uses label properties defined in the Provide Custom Style input. Multiline Uses labels on multiple lines. Single Line Uses single-line labels.
Data Label Decoration	Optional. Specify the border style and shape of the data label. Choose from a variety of styles, including: None, Simple, Double, Bevel, ThinRound, Round, Shadow, RoundShadow, FrameOpened, FrameClosed, and FrameTopBottom. In addition, you can default this setting to the decoration defined in the Chart Style input.
Label Pattern	This input is available when Pattern is selected as the Data Label Style input. Specify a parameterized pattern string for the information in the data label. For example: $(colLabel) $(value) See the WebCharts user documentation for more information about defining data label patterns