B4J Tutorial Using JavaObject and JavaFx - LineChart

To help with my own learning I have played with JavaObject and JavaFX to create linecharts.

Here are the 3 examples I have made I have ported the code directly from the Oracle documentation.

The examples are fully documented and require the JavaObject Library.

The Oracle documentaton for LineChart is here.

I hope you find it useful.

 

[moster67]

Steve,

very nice and as usual your code/comments is like a tutorial.

Respect!

 

[rwblinn]

Steve,

very nice and as usual your code/comments is like a tutorial.

Respect!

Many thanks for shring this information. Based on that I have included a 3-1 linechart in a pane (based upon the example shared). In addition wanted to make adjustments to fonts etc., but using below nothing changes = no effect on the chart.

Question:What is missing in the code? In addition, how to change the size of the linechart? Make changes to the scale?

LineChart.RunMethod("setStyle",Array As Object(".chart-series-line {-fx-stroke-width: 2px; }"))
LineChart.RunMethod("setStyle",Array As Object(".chart {-fx-padding: 10px; }"))
LineChart.RunMethod("setStyle",Array As Object(".chart-content {-fx-padding: 30px; }"))
LineChart.RunMethod("setStyle",Array As Object(".chart-title {-fx-text-fill: #4682b4;-fx-Font-size: 0.6em; }"))   
   
Set the graph title
LineChart.RunMethod("setStyle",Array As Object("-fx-stroke-width: 1px;"))
LineChart.RunMethod("setTitle",Array As Object("Km/Hr"))

Set the XAxis Label
XAxis.RunMethod("setLabel",Array As Object("Month"))
XAxis.RunMethod("setLowerBound",Array As Object("10"))
XAxis.RunMethod("setUpperBound",Array As Object("100"))
XAxis.RunMethod("setStyle",Array As Object("-fx-Font-size: 0.6em;"))

 

[Erel]

You should call setStyle once with the complete style string. Otherwise you are overwriting the previous style.

 

[stevel05]

Hi Rob,

To set the lower and upper bounds, you need to turn off auto ranging:

XAxis.RunMethod("setAutoRanging",Array As Object(False))

The code was failing here:

XAxis.RunMethod("setLowerBound",Array As Object("10"))

As you must pass the correct type of object to the JavaObject Runmethod, setLowerBound reuires a Double, by sending "10" you are sending a string.

You need to do:

Dim Val As Double = 10
XAxis.RunMethod("setLowerBound",Array As Object(Val))

CSS to set the font-size has a lowercase f in font.

XAxis.RunMethod("setStyle",Array As Object("-fx-font-size: 0.6em;"))

and it's not possible to access the class CSS assignments from setStyle as in:

LineChart.RunMethod("setStyle",Array As Object(".chart-series-line {-fx-stroke-width: 2px; }"))

The target is the object that JavaObject is pointing at and as Erel says, each one will overwrite the previous, you'd need to create a style sheet and attach it to a scene, see the javafx css reference guide

 

[rwblinn]

Hi Rob,

To set the lower and upper bounds, you need to turn off auto ranging:

XAxis.RunMethod("setAutoRanging",Array As Object(False))

The code was failing here:

XAxis.RunMethod("setLowerBound",Array As Object("10"))

As you must pass the correct type of object to the JavaObject Runmethod, setLowerBound reuires a Double, by sending "10" you are sending a string.

You need to do:

Dim Val As Double = 10
XAxis.RunMethod("setLowerBound",Array As Object(Val))

CSS to set the font-size has a lowercase f in font.

XAxis.RunMethod("setStyle",Array As Object("-fx-font-size: 0.6em;"))

and it's not possible to access the class CSS assignments from setStyle as in:

LineChart.RunMethod("setStyle",Array As Object(".chart-series-line {-fx-stroke-width: 2px; }"))

The target is the object that JavaObject is pointing at and as Erel says, each one will overwrite the previous, you'd need to create a style sheet and attach it to a scene, see the javafx css reference guide

Hi Steve,

thanks for the comprehensive reply. Appreciate if you give a code example on how to use CSS stylesheet applied to a scene used in a chart. I looked up the doc as given, but not clear how to define a scene with CSS and use.

 

[stevel05]

With a little experimenting, the easiest way to do this is to use the Scene Builder to create a chart. It gives each items in the chart class references, but both axes have axis as their class. So we can use the ID. And we can also generate the variables in the B4J IDE, but to access their methods and fields we still need to create a JavaObject and assign the generated objects to it as they are all created as a Form.

The css file is stored in the Files folder. There are a lot of possible objects to add css to and it took some playing and reading to find the XAxis Label.

You can also turn auto ranging off and specify the bounds within the Scene Builder. Select the appropriate axis from the Hierarchy panel or double click on it.

I've added the css file to the AnchorPane but you could add it to the chart if you prefer. It may save unwanted clashes elsewhere.

Attached is an example using Scene Builder, css and JavaObject to create the data sets.

 

[rwblinn]

With a little experimenting, the easiest way to do this is to use the Scene Builder to create a chart. It gives each items in the chart class references, but both axes have axis as their class. So we can use the ID. And we can also generate the variables in the B4J IDE, but to access their methods and fields we still need to create a JavaObject and assign the generated objects to it as they are all created as a Form.

The css file is stored in the Files folder. There are a lot of possible objects to add css to and it took some playing and reading to find the XAxis Label.

You can also turn auto ranging off and specify the bounds within the Scene Builder. Select the appropriate axis from the Hierarchy panel or double click on it.

I've added the css file to the AnchorPane but you could add it to the chart if you prefer. It may save unwanted clashes elsewhere.

Attached is an example using Scene Builder, css and JavaObject to create the data sets.

Hi Steve,

many thanks for your help. Indeed lost and lots to explore. I am slowly progressing - see attached.

Next is to find out how to use own controls, like a numbertextfield by creating an own library class (java), use them the fxml file and b4j.
So far got stuck - but have opened already a new thread for this.

Appreciated

 

[Olaan]

Hi Steve,
In post#1 at 3-1.zip file,I see the line of coding as below.

Series.InitializeNewInstance("javafx.scene.chart.XYChart.Series",Null)

Why do you set it as Null? I don't understand. I don't see where is javafx.scene.chart.XYChart.Series?

 

[Olaan]

I'm sorry that I found it.

 

[Olaan]

Hi Steve again,
Is there way easy to searching(Technique) the javafx.scene.chart.NumberAxis in Oracle's manual? (In post#1 at 3-1.zip file) I think it 's difficult for me. Please guide to me.

 

[stevel05]

I apologize if I am not understanding your question correctly, but the easiest way to find the javafx classes in the manual is to search google.

JavaFx numberaxis

and the oracle document page is normally fairly close to the top.

 

[Olaan]

Hi steve,
How do you know to search the key word "numberaxis" ? (and then you get the suceed)

 

[stevel05]

From a reference in another part of the documentation, in this case LineChart. If you are looking at the Oracle documentation, at the top are two options, Frames and NoFrames. If you click Frames, all of the classes are listed in a panel on the left hand side, no need to search.

 

[Olaan]

I will try tomorrow. Thank you,Steve

 

[Olaan]

Thank you ,Steve You are clever. I will register in my website.

 

[positrom2]

In post #5 above Steve105 said:

To set the lower and upper bounds, you need to turn off auto ranging:
Code:
XAxis.RunMethod("setAutoRanging",ArrayAsObject(False))

But, I receive the error
"unknown member": runmethod
The same error with

Dim Val AsDouble = 10
XAxis.RunMethod("setLowerBound",ArrayAsObject(Val))

Furthermore, since I have several Charts, how to refer to an axis in a specific Chart?

 

[stevel05]

ArrayAsObject(False)

'should be

Array As Object(False)

with spaces, to refer to each axis give them each a unique variable name. i.e.

Chart1XAxis

 

[positrom2]

Thanks,
the spaces had been lost somewhere on the way to that post...
Actually, I had defined an Yaxis node in the designer. But I had misssed the second line in the code below, and your answer triggered me to guess what might be wrong, so I found out. Java not being my motherlanguage, unfortunately.

Private MiYaxis As Node
miyaxis1=MiYaxis
MiYaxis.RunMethod("setAutoRanging",Array As Object(False))

But autoranging does not seem to work when the curve has moved completely below the zero line: The max of the curve (being negative) does not go to the top of the chart. The other way around it works: as soon as there are positive values the max coincides with the top of the chart.
So, the zero line seems to wish to be always included in the chart.

 

[stevel05]

The code doesn't seem quite right as you are assigning a new, uninitialized Node to miyaxis1. If miyaxis1 is defined in the designer, you are breaking the link to it with that assignment. It's difficult to tell without seeing all of the code. Can you zip and post your project?