WebSphere Dashboard Framework - Creating a custom gauge-type dial chart

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 task involves the following steps:

1. Create a gauge using the IBM ILOG JViews Diagrammer Symbol Editor and save it as a .jar file.
2. Add the gauge to a dial chart in the IBM ILOG JViews Diagrammer Dashboard Editor and save it as an .idbd file.
3. Create a custom properties file that maps properties to the custom gauge.
4. Add the chart to your WebSphere Dashboard Framework project.

For information about creating other types of custom charts, see Creating a custom Dial chart or Creating a custom .CSS chart.

Creating the gauge in the JViews Symbol Editor

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.

1. Open IBM ILOG JViews Diagrammer - Symbol Editor.
2. From the Symbol Palettes list, under Controls, click Plastic_Style, then doubleclick Plastic_Gauge1.
   
3. Choose Edit -> New Parameter.
4. Name the parameter labelFont and set its type as Font and enter "labelFont" as the description.
5. In the Symbol Outline, click LabelMax.
6. In the Styling Customizer, click the Text Display tab.
7. Next to Font, right-click, the field and select Enter an expression.
   
8. Enter the expression @labelFont.
   
   This expression exports the labelMax font as a parameter.
9. Click File -> Save As.
10. Click New Palette.
11. Enter "PlasticGauge" as the Palette Name and click OK.
    
12. Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder and click Save.
    
13. Then click Save in the Symbol Editor to save the new symbol.
14. Close ILOG JViews Diagrammer Symbol Editor.

Creating a custom gauge dial chart in the JViews Dashboard Editor

1. Launch ILOG JViews Diagrammer - Dashboard Editor.
2. At the bottom of the Palettes list, click Load a Palette.
   
3. Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder where you saved the PlasticGauge palette.
4. .
5. Select PlasticGauge.jar and click Open.
6. Drag the PlasticGauge symbol to the workspace.
   
7. Find the labelFont property in the Property Sheet and click the Value field.
8. Select Arial 20 point Bold and click Apply.
   
9. Choose File -> Save.
10. 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.
    
    
11. Close ILOG JViews Diagrammer Dashboard Editor.
    

Creating a custom properties file for the custom gauge dial chart

The gauge dial chart must have a .properties file with the same prefix as the .idbd file, saved in the same location..

1. Open a text editor.
2. Navigate to the WebContent\solutions\dashboard\chartstyles folder and open the default dial.properties file.
3. Save the file as PlasticGauge.properties.
4. If the default properties shown in the Property Sheet in the JViews Diagrammer Dashboard Editor Property Sheet are different 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.
   
5. Close and save the file.

Adding a customized dial chart to a project

1. Open the project that will include the new chart in WebSphere Dashboard Framework.
2. Open the builder call editor for the chart-enabled builder.
3. Select Provide custom style and click the ellipses (...) next to the Chart Style field.
4. In the Choose File tab, click Add file to project.
   
5. Specify the PlasticGauge.idbd file and click Open.
   
   
6. Specify where you want to add the file in the project and click OK.
   
7. Click the ellipses (...) next to the Chart Style field again.
   
8. 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.
   
9. Make any other changes you need to make in the builder, then close and save the builder.

When you create a portlet with this dial chart, the Maximum label is bolder and larger than the Minimum label.