Creating custom symbols for dial charts in dashboard applications
If your project requires a gauge-type dial chart, a style that is not included with the default WebSphere Dashboard Framework charts, you can use IBM ILOG JViews Diagrammer
tools to create the chart you need. This article teaches you how to do so with the following tasks:
- Create a gauge using the IBM ILOG JViews Diagrammer Symbol Editor and save it as a .jar file.
- Add the gauge to a dial chart in the IBM ILOG JViews Diagrammer Dashboard Editor and save it as an .idbd file.
- Create a custom properties file that maps properties to the custom gauge.
- Add the chart to your WebSphere Dashboard Framework project.
When you create a portlet with this dial chart, the Maximum label is bolder and larger than the Minimum label.
For information about creating other types of dial charts, see Creating a custom Dial chart.
Importing the sample gauge into a project
The attached CustomGauge.zip sample gives you an operational WebSphere Dashboard Framework model that includes the custom gauge and dial chart explained in this article. You can import the model into a project to see its design.
(See attached file: CustomGauge.zip)
Creating the gauge in the JViews Symbol Editor
- Save the attached sample file to a local drive.
- Open your project in WebSphere Dashboard Framework Designer.
- Choose File - Import and select WebSphere Portlet Factory - WebSphere Portlet Factory Archive and click Next.
- Click Browse and navigate to the location where you saved CustomGauge.zip. Select the file and click Open.
- Click Finish.
This procedure explains how to use a pre-defined gauge symbol, extend its function by exposing the label font of its maximum indicator as a new parameter, and save it as a custom symbol palette.
Creating a custom gauge dial chart in the JViews Dashboard Editor
- Open IBM ILOG JViews Diagrammer - Symbol Editor.
- From the Symbol Palettes list, under Controls, click Plastic_Style, then doubleclick Plastic_Gauge1.
- Choose Edit -> New Parameter.
- Name the parameter labelFont and set its type as Font and enter "labelFont" as the description.
- In the Symbol Outline, click LabelMax.
- In the Styling Customizer, click the Text Display tab.
- Next to Font, right-click the field and select Enter an expression.
- Enter the expression @labelFont.
This expression exports the labelMax font as a parameter.
- Click File -> Save As.
- Click New Palette.
- Enter "PlasticGauge" as the Palette Name and click OK.
- Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder and click Save.
- Then click Save in the Symbol Editor to save the new symbol.
- Close ILOG JViews Diagrammer Symbol Editor.
Creating a properties file for the custom gauge dial chart
- Launch ILOG JViews Diagrammer - Dashboard Editor.
- At the bottom of the Palettes list, click Load a Palette.
- Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder where you saved the PlasticGauge palette.
- Select PlasticGauge.jar and click Open.
- Drag the PlasticGauge symbol to the workspace.
- Find the labelFont property in the Property Sheet and click the Value field.
- Select Arial 20 point Bold and click Apply.
- Choose File -> Save.
- Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder where you saved the PlasticGauge.jar file.
Select Files of Type: Dashboard File (*.idbd) and give the file the same prefix as the .jar file, PlasticGauge. Then click Save.
- Close ILOG JViews Diagrammer Dashboard Editor.
The gauge dial chart must have a .properties file with the same prefix as the .idbd file, saved in the same location..
Adding a customized dial chart to a project
- Open a text editor.
- Navigate to the WebContent\solutions\dashboard\chartstyles folder and open the default dial.properties file.
- Save the file as PlasticGauge.properties.
- If the default properties shown in the Property Sheet in the JViews Diagrammer Dashboard Editor Property Sheet differ from the default values in the properties file, you must edit the file to map the properties correctly. In this example, change the values in the properties file as shown in the picture on the right.
- Close and save the file.
- Open the project that will include the new chart in WebSphere Dashboard Framework.
- Open the builder call editor for the chart-enabled builder.
- Select Provide custom style and click the ellipses (...) next to the Chart Style field.
- In the Choose File tab, click Add file to project.
- Specify the PlasticGauge.idbd file and click Open.
- Specify where you want to add the file in the project and click OK.
- Click the ellipses (...) next to the Chart Style field again.
- Select the file you just added to the project and click OK.
When you return to the builder window, you see the new file in the Chart Style field.
- Make any other changes you need to make in the builder, then close and save the builder.
- If you have updated an existing project to add the new dial chart, restart the server to force the changes to take effect.