Creating a custom chart style for dashboard applications
If your project requires a chart style that is not included with the default WebSphere Dashboard Framework charts, you can use
IBM ILOG JViews Charts Designer to modify a default style. Follow these steps to modify a default WebSphere Dashboard Framework chart and use the modified .css file in your project. You can also use ILOG JViews Charts Designer to create your own charts from scratch and add them to your Dashboard project.
These instructions apply to all types of charts except Dial charts. For information about creating custom dial charts, see
Creating a custom Dial chart.
Customizing a chart in IBM LOG JViews Designer
- Launch IBM ILOG JViews Charts Designer.
- Navigate to the WebContent\solutions\dashboard\chartstyles folder in your WebSphere Dashboard Framework workspace folder.
- Select the .icpr file you want to customize and click Open.
- Make the style changes you want to make. In this example, the primary color for one of the bars was changed from Orange to Green.
- Save the file with a different name or in another location to avoid overwriting the default style.
Saving the style produces an .icpr file and .css file. You will reference the .css file for the builder in your project.
Adding the customized chart to a project
- 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 custom .css 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.