Customize a charts symbol beyond the predefined parameters

Question

How to customize a charts symbol beyond the predefined parameters?

Answer

The chart palette in JViews Diagrammer is built on JViews  Charts.
The predefined palette offers only frequently used customizations. Although more specific customizations are not available in this palette, the functionality is available from JViews Charts. This functionality can be integrated into derived chart palettes.

For the customizations that are available in JViews Charts, refer to the JViews Charts Designer and to the CSS reference manual of JViews  Charts.

Here is a list of steps that will give you a derived chart palette with additional customizations.
As an example, creating a polyline chart where the line can be thicker than the 1-pixel default thickness:

• Step 1

  From the Symbol Editor, determine the kind of chart to start from; that is, determine the type of chart and select the symbol in the chart palette that represents this type of chart. 
  In the example, it is the 2D/Line/Polyline symbol.

• Step 2

  Determine the set of parameters that you need and that are not provided by the symbol.
  Better, provide a sample project (.icpr and .css file) from JViews Charts Designer showing such a chart. 
  In the example, you want a 'lineWidth' parameter of type 'Float', whose description is:

  "The width of the line that connects data points."

• Step 3

  Create a copy of the predefined symbol in your own palette.
  This can be done with the Symbol Editor.
  The Symbol Editor does not fully support chart palettes, but for the purposes of the example - copying a symbol and adding new parameters - it works fine.
  Launch the Symbol Editor :

  • From the menu, choose Palette > Open Palette; then choose the palette jar file jviews-diagrammer81/lib/palettes/jviews-palette-charts-8.1.jar.
  • Double-click the 2D/Line/Polyline symbol.
  • From the menu, choose Save As, create a "mycharts" palette, and save the symbol in this palette under the name "MyPolyline".
• Step 4

  Add the new symbol parameters.
  This can also be done with the Symbol Editor, despite the aforementioned limitation.
  Launch the Symbol Editor :

  • From the menu, choose Palette > Open Palette; then choose the mycharts.jar palette file created earlier.
  • Select the MyPolyline symbol and add the new parameters that you came up with in Step 2.
  • Then save the symbol.
• Step 5

  Add the behavior of the new symbol parameters.
  This is done by modifying the CSS files present in the palette jar file and testing the modifications iteratively in the Dashboard Editor.
  Unzip the mycharts.jar palette file (using "jar xvf" or "unzip -x") and edit the CSS files.
  For each new parameter 'param', you can either:

  • Change an existing declaration value, from a hardcoded value to "@param".
  • Add a declaration referring to "@param" to a rule.
  • Add a new rule with a selector that refers to the parameter, for example, chart[param].

  While doing so, keep referring to the CSS Reference manual of JViews  Charts and see how the customization was done in JViews Charts Designer.
  In the example, the CSS Reference documentation of "series" or IlvDataSeriesStyle shows that a property 'lineWidth' can be used in the 'series' rule.
  When you create a Designer project that shows a chart with a modified line width (series > Series > Appearance > Line/Contour  Stroke), it would use a property 'stroke' in the 'series' rule.
  Either works fine; choose the simpler one. That is, add to the 'series' rule in MyPolyline.css the line :

  lineWidth : "@lineWidth" ;

  Repack the microcharts.jar file.
  Then test it in the Dashboard Editor.
  Repeat this step until all the parameters have the desired effect.