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.
2. Add the gauge to a dial chart in the IBM ILOG JViews Diagrammer Dashboard Editor.
3. 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.
    

Creating a custom dial chart with the gauge in the JViews Dashboard Editor

1. Launch IBM ILOG JViews Diagrammer Dashboard Editor.
2. Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder.

Adding the custom gauge chart in your WebSphere Dashboard Framework project

1. Create a model named customDial.model.
2. Add some builders, such as Page builder and Portlet Adapter builder.
3. Add a Charts builder. For the Chart Style input, specify the .idbd file for the custom chart style you created.
4. Open the project that will include the new chart in WebSphere Dashboard Framework.
5. Open the builder call editor for the chart-enabled builder.
6. Select Provide custom style and click the ellipses (...) next to the Chart Style field.
7. In the Choose File tab, click Add file to project.
   
8. Specify the custom .idbd file and click Open.
   
9. Specify where you want to add the file in the project and click OK.
   
10. Click the ellipses (...) next to the Chart Style field again.
11. 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.
    
12. Make any other changes you need to make in the builder, then close and save the builder.
13. Publish the Portlet Factory project to Portal.

When you add the portlet to the page, notice that the Maximum label is bolder and larger than the Minimum label.

Creating custom dial charts for a dashboard application

If your project requires a dial chart style that is not included with the default WebSphere Dashboard Framework charts, you can use IBM ILOG JViews Diagrammer Dashboard Editor to modify the WebSphere Dashboard Framework default dial chart. Follow these steps to modify the default dial chart and use the modified .idbd file in your project.

These instructions apply to Dial charts. For information about creating other types of custom charts, see Creating a custom .CSS chart.

Customizing the dial chart in IBM LOG JViews Diagrammer

Using a custom dial chart in WebSphere Dashboard Framework requires an .idbd, .jar, and .properties file.

1. Launch IBM ILOG JViews Diagrammer Dashboard Editor.
2. Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder.
3. Select the default Dial chart style file, dial.idbd, and click Open.
   
4. Make the style changes you want to make. In this example, the value for max was decreased from 1,000 to 100.
   
5. Save the file with a different name or in another location to avoid overwriting the default style (for example, MyDial.idbd).
6. The chart also requires a .properties and .jar file with the same prefix as the .idbd file.
   Find the default dial.properties and dial.jar files in the WebContent\solutions\dashboard\chartstyles folder. Save copies of the default dial.properties and dial.jar in the same location as the new chart file, with the same prefix (for example, MyDial.properties and MyDial.jar).
   
   Note: In this example, you did not change any mappings in the default dial chart, so you do not need to edit the default dial.properties file when you save it with the name of your custom chart. If you had customized a default chart by altering its mappings, you would need to add a mapping statement to the custom .properties file (for example max=maximum).
   

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 custom .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.