GreenPoint WebCharts Builder
In this topic ...
Upgrading from WebCharts v. 4 to WebCharts v. 5
The GreenPoint WebCharts Builder works in conjunction with third-party software from GreenPoint, Inc. (see Note below) to create and display a wide variety of sophisticated charts and graphs. This Builder can deliver all standard and extended charts and graphs to all browsers. The Builder generates JSP code that makes calls to Java classes that in turn generate image maps representing various graph displays.
We can also use the Builder to transform your XML source data to the format used by the WebCharts software. A common transformation provided by the Builder, RowsetRow, can be used with the XML commonly returned from data source Builders.
The Builder also supports chart "click actions," which occur when an end-user clicks on a portion of a chart or graph, allowing developers to create interactive charts with drill-downs. For example, clicking on a section of a pie chart may transition to a new page, showing the details of the records in that section. The Builder creates an XML variable named <builder-name>ClickValues in the WebApp to catch the click values" for the Builder, such as the label of the column the user clicked on. These values can be used by the action specified to handle the chart click. (See Chart Click Action section in the Inputs Table below.)
In IBM WebSphere Portlet Factory, the WebCharts product provided is evaluation software. Generated charts will display a message indicating this. To use this Builder to create production-quality charts, we can purchase a fully functional copy of WebCharts software directly from GreenPoint, Inc. (http://www.gpoint.com). IBM WorkPlace Dashboard Framework includes a license to a full-function version of the WebCharts product. For more information, see the Workplace Dashboard Framework Readme file (Readme_dashboards.txt).
The Factory includes WebChart sample style files that illustrate the use of the WebCharts Builder. We can use these files to gain an understanding of what this Builder can do. These sample XML files are located at:
WEB-INF/factory/samples/WebCharts
. This directory also contains WebCharts project (WCP) files that can be used in conjunction with the WebCharts Designer tool to modify the associated sample XML files.
Specifying Inputs
This Builder takes the inputs described in the table below. For help on inputs common to many or all Builders such as those in the Properties input group, see "Using the Builder Call Editor"
Input Name Description Name Enter a name for this Builder call. The 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. See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.
Chart Style and Data 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 UI. You can choose among the following chart types:
- Bar
- Line
- Pyramid
- Area
- Pie
- Dial
- Radar
- Step
Provide Custom Style Enable this check box to create a chart with a style of your own making. Note that provide style, as well as chart, data when this selection is enabled.
Style Data
This input is available when Provide Custom Style is enabled above. 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.
This file is typically be 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:
1. Use the WebCharts Designer utility to create a style.
2. 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).
3. Click the Save button in the lower-right corner. In the resulting Save window, choose the location and name of the XML file this is the file you will be entering into the Style Data input's text box (or we can 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}
This input is not available for a Dial chart.
Upper Limit This input is available when the chart type 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 is Dial. Use this input to specify the value the Dial chart's needle will be pointing to. This value should be between 0 and the Upper Limit.
Dial Ranges This input is available when the chart type is Dial. Use this input to define the Dial chart's segments.
We 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 will be one color, the next 10% another color, and the last 30% yet another color.
You must define at least one segment in Dial Ranges.
Data Transformation 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. We can choose:
- Tabular - To transform 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- To disable the transformation of data and use native WebChart format
X Axis Tag This input is available for the Tabular 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, if you 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>
and you specified EMPNO as the X Axis (and also applied the RowsetRow transformation), the chart would have the EMPNO values along the horizontal axis, each with two bars above it for SALARY and COMM.
If the data variable has a schema, the X Axis drop-down list will be 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 Data Source Format. Choose to include or exclude columns in the final chart data. We can choose:
- Use All Columns - To include all available columns
- Include Columns - To include specific columns
- Exclude Columns - To exclude specific columns
Column List This input is available for the Tabular Data Source Format, when Include or Exclude columns is selected. Use this table to specify which columns in the source data should be included in, or excluded from, the final chart data. Pickers in each column cell allow you to select columns by name.
For included columns, the order columns have in this table will be the order in which they appear in the chart.
Make Non-Numeric Columns Null Enable this check box to exclude from the transformed data columns that contain non-numeric data. Localized Resource Use this input to specify a localized resource to use with this Builder. This resource will be 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, we 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, we can specify a prefix in each WebChart's Localization Prefix input, and then use that prefix in your resource bundle.
Consider this example. If your resource bundle has the following data:
EMPNO=Employee Number COMM=Commission SALARY=Salary
and 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 will use the prefixed data in the resource bundle. A WebChart without the prefix will access the non-prefixed data in the resource bundle the usual way. This will result in each WebChart displaying different Data Labels even though they are using the same data source.
In this example, the first WebChart's Data Labels would be Employee Number, Commission, and Salary, while the second WebChart the one with the Localization Prefix configured would have Data Labels of Different Employee Number, Different Commission, and Different Salary.
Log Chart Data Enable this check box to send chart data to the console and the debug.txt file. This allows you to see the data being fed to the chart.
Chart Properties Chart Title Optional. Specifies a chart title. Specify a title by entering title text or using the picker to select a variable or resource bundle. Title style is controlled by the Style Data file above.
Image Type Charts can be produced in one of several file formats. Choose the format you want to use for the chart. Available image types 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 well for the transmitting charts images and produces larger files with potentially lower quality.
- SWF (Macromedia Flash movie) - SFW 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 it 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 file is used.
Height Optional. The height of the chart in pixels. If no height is specified, the height setting from the Style Data file is used.
Show Chart as 3D Optional. Specifies whether to use 3D effects when displaying the chart. You can choose a variety of effects, including:
- Use Style File - To default this setting to whatever is defined in the Style File.
- 3D - To display chart with three-dimensional effect
- 2D - To display chart with two dimensions
Show Chart Legend Optional. Specifies whether to show the chart legend. We can choose:
- Use Style File - To default this setting to whatever is defined in the Style File.
- Has Legend - To display a legend for the chart
- No Legend - To suppress display of a chart legend
Popup Optional. Select a cursor action that will activate chart popups. We can choose:
- Use Chart Style - To use popup activate action defined in the chart style file
- Mouse Over - To open a popup on a mouse over action
- Mouse Down - To open a popup on a mouse-down (click) action
- Disabled - To suppress the display of chart popup. (Note that if you have enabled any click actions, those will continue to work when popups are disabled.)
Chart Click Action Enable Click Action Optional. If checked, additional Builder inputs will appear which allow you to specify the type of action to take when the user clicks on the chart. Two types of actions are available: WebApp or JavaScript
Action Type Select an action type. We can choose:
- WebApp Action - Choose this action type to use an action in the current model.
- JavaScript - Choose JavaScript to use a JavaScript snippet you provide that will be executed when the user clicks the chart.
Method to Call This input is available when the Action Type is WebApp. Specify a method to call when the on-click action occurs. (See Compatibility Note in "Inputs" below.)
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 is WebApp. Use this table to specify any required arguments to pass to the method above.
Compatibility Note: Click actions based on a variable 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 is WebApp. Specify when method arguments above are to be evaluated. We can choose:
- When the action is run
- As page is rendered
OnClick Javascript This input is available when the action type is JavaScript. Use this input to enter JavaScript code that will be executed when the user clicks the chart..
For example, you could use the following code to pop up an alert:
javascript:window.alert('$(colLabel) $(rowLabel) was clicked')
See the WebCharts User Guide for more information about parameterized event handlers.
Axis Properties 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 up to 5 axes. The list on the left of these inputs represents the chart axes for the chart type specified in the chosen Chart Style Source file or variable. The attributes we 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. From Style will use the preference in the style file.
- Format Pattern optional. For the detailed description of the pattern format and other attributes please refer to Java documentation for DecimalFormat and SimpleDateFormat classes.
- Parse Pattern Optional. For the detailed description of the pattern format and other attributes please refer to Java documentation for DecimalFormat and SimpleDateFormat classes.
- Scale Min Optional. Specifies the minimum value that the chart should represent. Leave this blank to use the setting in the chart style file/variable, which typically does not specify any value. In this case the value will be derived from the chart data.
- Scale Max Optional. Specifies the maximum value that the chart should represent. Leave this blank to use the setting in the chart style file/variable, which typically does not specify any value. In this case the value will be derived from the chart data.
Data Labels Data Label Placement Optional. Specify the display location of Data Labels in the chart. You can choose:
- Use Chart Style - To place labels according to locations defined in a Style File
- Outside - To place labels outside the area of the chart
- Inside -To place labels within the area of the chart
Data Label Style Specify a style for the data labels. We can choose:
- Use Chart Style - To adopt default style associated with chart
- None - To use plain text
- Value - To use style for values
- RowLabel - To use style associated with row labels
- ColumnLabel - To use style associated with column labels
- Pattern -To use style associated with Label pattern below
See the WebCharts User Guide for more information about defining Data Label patterns
Is Label Multi-line Specify if the data labels should be single or multiline. We can choose:
- Use Chart Style - To use label properties defined in a Style File
- Multiline - To use multiline labels
- Single Line -To use single-line labels
Data Label Decoration Optional. Specify the border style and shape of the data label. We can choose from a variety of styles, including: None, Simple, Double, Bevel, ThinRound, Round, Shadow, RoundShadow, FrameOpened, FrameClosed, FrameTopBottom. In addition, we can default this setting to the decoration defined in the Chart Style File.
Label Pattern This input is available when "Pattern" is selected as the Data Label Style. Specify a parameterized pattern string for the information in the data label.
For example: $(colLabel) $(value)
See the WebCharts User Guide for more information about defining Data Label patterns
XML Source Data Formats
WebCharts version 5 can accept chart source data in one of two formats. These formats are described below.
Data Format
This format is the basic format used by the chart engine.
<XML> <COL>2000</COL> <COL>2001</COL> <COL>2002</COL> <COL>2003</COL> <COL>2004</COL> <COL>2005</COL> <ROW col0="100.0" col1="350.0" col2="100.0" col3="180.0" col4="200.0" col5="400.0">Juice</ROW> <ROW col0="150.0" col1="200.0" col2="250.0" col3="230.0" col4="250.0" col5="350.0">Soda</ROW> </XML>
XML Transformed Data Format
This format is similar to what might be returned from a database.
<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>
Objects this Builder Creates
Linked Java Objects
<buildername>builderHelper
- LJO used to create the chart. This object is used by the generated JSP page.Variables
<buildername>ClickValues
XML variable that represents the row and column label and index that a user has clicked on. This is populated before executing the click action. Note: This variable exists for backwards compatibility with previous versions of WebCharts.
Upgrading from WebCharts v. 4 to WebCharts v. 5.
GreenPoint software has enhanced and improved its WebCharts product by releasing WebCharts v. 5. Factory versions 5.10 and later are designed to work with this newer version of WebCharts software. As a result, problems will be encountered if you upgrade to Factory 5.10 or later and attempt to edit a project built with an older WebCharts Builder. You will need to upgrade the project to use V5 of the WebCharts product. Here's how:
- Examine the WebCharts 5 sample chart styles that are shipped with the Factory. These styles closely mimic the styles found in the WebCharts 4 (bar, radar, pie etc..)
- To examine chart types locate the project's
WEB-INF/factory/samples/WebCharts
directory.This directory contains a collection of files you can use to view available chart types. Load files with a ".wcd" extension into the WebCharts 5 Designer for preview. Load files with a ".xml" extension into the WebCharts Builder for preview.
- In the WebCharts 5 Designer tool, load the sample style file associated with the chart selected above.
- Use the WebCharts 5 Designer tool to modify the chart to look like the existing WebCharts 4 chart.
- Access the source data used to generate the chart and reformat it for use with WebCharts 5.
Click here to learn about WebChart 5 data formats.
- Remove the WebCharts 4 Feature Set from the project.
- Rebuild the project's Factory Dev WAR to update the project and generate a new WAR file.
A WebCharts 5 chart now replaces the WebCharts 4 chart.
Upgrading a Demo to a Deployment License
By default, the WebCharts Builder is equipped with a demonstration license. This license causes a prompt to be placed on any chart created with the Builder, indicating that a Demo version of the software was used to create the chart. If you decide to purchase a non-demo version of the WebCharts product from GreenPoint Software, you will need to update the Demo version license with a Deployment version license. The following steps describe how to update a Demo license to a Deployment license:
- Step 1 - Halt the application or portal server.
- Step 2 - Copy an updated version of the
wc50.jar
file (See next section.) to an existing project and to the WebSphere Portlet Factory Designer project template so that all new projects will automatically contain an updated WebCharts license.- Step 3 - Refresh the project and restart the server.
Updating the wc50.jar JAR File
Follow these steps to update the WebCharts
wc50.jar
file.
- In a project's WEB-INF\lib directory, locate the file:
webcharts3D.xml
- Open the
webcharts3D.xml
file and locate the line that contains the "license" attribute:license=____-____-____-____/>
.
- Enter the WebCharts deployment license key in place of the blanks and save the file.
A deployment license key is available from GreenPoint Software when you upgrade to a full version of the WebCharts product.
- Add the updated
webcharts3d.xml
file into thewc50.jar
jar file, using the Java jar utility (or WinZip).Note that the
webcharts3d.xml
file must be located in the "root" of thewc50.jar
archive.
- Copy the updated
wc50.jar
jar file to a project or project template as required:* To Update an existing project - Copy the
wc50.jar
jar file to the project'sWEB-INF\lib
directory.* To Update the Designer's project template for all future projects - Copy the
wc50.jar
jar file to the project template located at:
<installdir>/FeatureSets/WEB-APP_<version-number>/Templates/Project/wpf.war/WEB-INF/lib
Using WebCharts on UNIX
Special configuration is required to use GreenPoint WebCharts software on a UNIX-based system. The configuration required depends on the version of the JDK used by the application or portal server. Before performing the step below, determine the JDK version and build author that your server is using. Once you have this information, follow the appropriate procedure described in the additional documentation provided for your specific brand of application server.
Modify the Server's JDK
Procedure for JDK V1.3.1
Refer to the additional documentation for your application or portal server as the specific steps vary from vendor to vendor.
Procedure for JDK V1.4 or Later
- Add the following JVM parameter to your application server.
-Djava.awt.headless=true
Restart the Application Server.
Determining JDK Information
Obtaining the Java make and build version can require some directory browsing. Consult your server's documentation for the location of your server's JVM. Once you have located your server's JVM, enter the use the following at a command prompt to determine the version and build:
%./java -version
Information similar to the following will be displayed:
java version "1.4.2_04" Java(TM) 2 Runtime Environment, Standard Edition (IBM build 1.4.2_04-b05 20040627) Java HotSpot(TM) Client VM (build 1.4.2_04-b05, mixed mode) IBM Java ORB build orb1420-20040626 XML build XSLT4J Java 2.6.1 XML build XmlCommonsExternal 1.2.02 XML build XML4J 4.3.1
Resolving X11 Display Errors
If your UNIX/Linux system is running an X server, but you are still getting X11 errors when trying to load Web Charts (you will see X11 exceptions in the WebSphere log), refer to: http://www.ibm.com/support/docview.wss?uid=swg21163846. This article discusses how to set the DISPLAY environment variable for WebSphere. Even though your system is running X, we can still use the java.awt.headless=true option if you wish.