How to Define Markers per Series in HTML5 Scatter Chart

Issue Description

I have a HTML scatter chart. In our data it's quite frequent that 2points from different series will have exactly the same x,y value.I'd like to define the size, symbol and color of 3 first series, so that the user will definitely see that there are 2 points and not 1.

Resolution

You can define the markers per series index by sorting by the series field and defining a variable that counts distinct field values.

Then, create Bucker Properties for each of required HTML5 chart property:

Property Name: color
Property expression: $V{markerColors}.get(($V{nameCount} - 1) % $V{markerColors}.size())

Property Name: radius
Property expression: $V{markerRadii}.get(($V{nameCount} - 1) % $V{markerRadii}.size())

Property Name: symbol
Property expression:$V{markerSymbols}.get(($V{nameCount} - 1) % $V{markerSymbols}.size())

Where the variables are Lists of values (java.util.List):

markerColors  - java.util.Arrays.asList("rgba(223, 183, 103, .5)", "rgba(119,152,191,.5)", "rgba(119,191,152,.5)")
markerSymbols - java.util.Arrays.asList("square", "triangle", "triangle-down")
markerRadii   - java.util.Arrays.asList(5, 10, 15)

The next step is to specify the bucket property values as Measure advanced properties

Please find attached JRXML report that demonstrates the idea.

Ref. Case 00071530

scatterchart.jrxml