Assigning multiple series to secondary axis on HTML5 Multi-axis Chart

0

Mariano suggests that it's possible to assign a specific measure to the line series for multi-axis charts.

"In that chart type the last measure is always the line (you can change this in the advanced properties if you want)" -http://community.jaspersoft.com/questions/843913/jasper-multi-axis-report-high-chart

​Is there an example/documentation for this?

Can multiple measures be assigned as lines to the secondary axis and if so how?

 

 

 

robinm_1's picture
Joined: Jul 12 2016 - 6:14am
Last seen: 5 months 3 weeks ago

Thanks Lucian, your solution works, but when starting with a StackedColumn or StackedColumnLine plot, the stacking rule applies to each chart type/axis pair.  An example would be

  • two or more measures in a stacked column chart with one axis on the left
  • two ore more measures as lines with one axis on the right

Since plotOptions.stacking applies everywhere, the lines are also stacked.  A workaround is to create an additional Y axis for each line since the min and max values are predetermined in our case.  However, the extra (third) axis would have to be hidden.  Setting yAxis.visible to false doesn't seem to have the desired effect (the axis is still visible).

<hc:chartSetting name="yAxis">
                        <hc:chartProperty name="_jrAxisIndex">
                            <hc:propertyExpression><![CDATA[2]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="max">
                            <hc:propertyExpression><![CDATA[100]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="min">
                            <hc:propertyExpression><![CDATA[0]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="opposite">
                            <hc:propertyExpression><![CDATA[true]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.text" value=""/>
                        <strong><hc:chartProperty name="visible">
                            <hc:propertyExpression><![CDATA[false]]></hc:propertyExpression>
                        </hc:chartProperty></strong>
                    </hc:chartSetting>

We can fall back to a regular multi-axis chart but is there a way to achieve the desired result with HTML5 charts?

robinm_1 - 3 years 4 months ago

If the builtin stacked column chart types do not work for you, you can revert to a basic chart type and set the stacking property per series type (e.g. plotOptions.column.stacking) or per individual series using a SeriesProperty contributor.

 

lucianc - 3 years 4 months ago

perfect

robinm_1 - 3 years 4 months ago

1 Answer:

1

You can explicitly create Y axes and assign series to specific axes.

See the attached sample report: the yAxis chart settings creates a new axis (_jrAxisIndex=1 means it's the second axis) and sets some properties for it, and SeriesProperty contributors set the series types and assings the series to the second axis.

Regards,

Lucian

Attachments: 
AttachmentSize
Binary Data highchartschart.jrxml3.59 KB
lucianc's picture
7146
Joined: Jul 17 2006 - 1:10am
Last seen: 2 days 14 hours ago
Feedback