How to draw multiple axis on a chart using JAVAFX Charts

Question

Peace be upon you!

How to draw multiple axis using JavaFX charts API?

Following is an image of a trend in a huge software where some real time as well as history data is being plotted. There are two pens registered and separate axis for each pen is defined on the same trend.

I have been trying to do exactly this in JavaFX 2.0 charts. I have been able to plot a real time chart which is as follows:

I have been researching about multiple axis using JavaFX and could find the this link but I think this is an older version of JavaFX using FXML. However, I am using JavaFX regular classes to accomplish this.

HELP!!!

Solution 1

Here you can find my solution - MultipleAxesLineChart. It is not generic and just fits my needs, but I think it can give a good sight of how it can be done by using StackPane.

Solution 2

Place two charts in a StackPane.

Use css lookups on the top chart to translate (using translate-x and translate-y) it's axes and labels so that they can be read independently of the bottom chart. Leave the top chart's data plot so that it overlays the bottom chart. Modify colors and legends (or mix chart styles, e.g. line and bar) so that it is obvious which data plot belongs to which series.

Some of the techniques above are demonstrated:

• In the answer to: Move tick label JavaFx 2 (which shows how to draw multiple axes on what seems to be a single chart).
• In this sample code which layers a linechart on a barchart (but without the axis translation).