B4J Library jCharts

Vanja · Apr 6, 2017

Harris said:
Now closer with styling...
The following code styles the X axis... How to style the Y?

I have referred to:
https://docs.oracle.com/javafx/2/charts/css-styles.htm

for styling advice, but they only go so far...

Is there a doc which shows all the styling that can be performed?

Each of the 11 (pages), for the day selected in the table, will plot an hours worth of data (for each second of the hour).
I tried to load the entire day (35000 points in many cases), but it took over 10 minutes to load.
This works well - loading a smaller subset. One can zoom in on any plot, down to the second. Sweet!!!

Thanks

B4X:

Dim FirstLineStyle As Map = LineChart.GetChildStyleMap(".default-color0.chart-series-line") FirstLineStyle.Put("-fx-stroke", "black") FirstLineStyle.Put("-fx-stroke-width", "1px") LineChart.SetChildStyleMap(".default-color0.chart-series-line", FirstLineStyle) Dim FirstLineStyle As Map = LineChart.GetChildStyleMap(".axis") FirstLineStyle.Put("-fx-font-size", "20px" ) FirstLineStyle.Put("-fx-tick-length", "15" ) FirstLineStyle.Put("-fx-tick-label-fill", "blue" ) FirstLineStyle.Put("-fx-tick-label-font-size", "1.2em" ) FirstLineStyle.Put("-fx-font-family", "Tahoma" ) FirstLineStyle.Put("-fx-minor-tick-length", "10" ) LineChart.SetChildStyleMap(".axis", FirstLineStyle) Dim FirstLineStyle As Map = LineChart.GetChildStyleMap(".axis-tick-mark") FirstLineStyle.Put("-fx-stroke","black") FirstLineStyle.Put("-fx-stroke-width","2") LineChart.SetChildStyleMap(".axis-tick-mark", FirstLineStyle) Dim FirstLineStyle As Map = LineChart.GetChildStyleMap(".axis-minor-tick-mark") FirstLineStyle.Put("-fx-stroke","black") FirstLineStyle.Put("-fx-stroke-width","1") LineChart.SetChildStyleMap(".axis-minor-tick-mark", FirstLineStyle)

View attachment 49534

I wonder if you can tell me how did you manage to make Mouse Moved event with Time as we can see it on picture in post #10? It has to be a number on X axis. Did you convert time to number or did u used some other method?

Lahksman · Jul 26, 2017

I have a linechart with 5 series and I would like to give each one its own color.
I know it can be done by css but the problem is that the users can choose which series they want to display in runtime.

So the order and number of series isn't always the same. Is there any way i can solve this?

Informatix · Jul 26, 2017

Lahksman said:
I have a linechart with 5 series and I would like to give each one its own color.
I know it can be done by css but the problem is that the users can choose which series they want to display in runtime.

So the order and number of series isn't always the same. Is there any way i can solve this?
View attachment 58096 View attachment 58098

B4X:

Dim FirstLineStyle As Map = LineChart.GetChildStyleMap(".default-color0.chart-series-line")
FirstLineStyle.Put("-fx-stroke", "#your_color")
LineChart.SetChildStyleMap(".default-color0.chart-series-line", FirstLineStyle)
Dim SecondLineStyle As Map = LineChart.GetChildStyleMap(".default-color1.chart-series-line")
SecondLineStyle.Put("-fx-stroke", "#your_color")
LineChart.SetChildStyleMap(".default-color1.chart-series-line", SecondLineStyle)
etc.

Lahksman · Jul 27, 2017

Got the line colors working. Each series has its own color.
Now facing the next challenge. Somehow the legend isn't following the line colors.

Right now I use this code to set the line and symbol style.

B4X:

Dim LineStyle As Map = DockNode3LineChart.GetChildStyleMap(".default-color" & (seriesNumber) & ".chart-series-line")
    Dim SymbolStyle As Map = DockNode3LineChart.GetChildStyleMap(".default-color" & (seriesNumber) & ".chart-line-symbol")
    Select series
        Case "Average": LineStyle.Put("-fx-stroke", "red")
            SymbolStyle.Put("-fx-background-color", "red, white")
            ...
    End Select
    DockNode3LineChart.SetChildStyleMap(".default-color" & (seriesNumber) & ".chart-series-line", LineStyle)
    DockNode3LineChart.SetChildStyleMap2(".default-color" & (seriesNumber) & ".chart-line-symbol", SymbolStyle)

I've been googling this but haven't been able to resolve it. Is there a separate css for the legend symbol colors?

Informatix · Jul 27, 2017

Lahksman said:
Got the line colors working. Each series has its own color.
Now facing the next challenge. Somehow the legend isn't following the line colors.

Right now I use this code to set the line and symbol style.

B4X:

Dim LineStyle As Map = DockNode3LineChart.GetChildStyleMap(".default-color" & (seriesNumber) & ".chart-series-line") Dim SymbolStyle As Map = DockNode3LineChart.GetChildStyleMap(".default-color" & (seriesNumber) & ".chart-line-symbol") Select series Case "Average": LineStyle.Put("-fx-stroke", "red") SymbolStyle.Put("-fx-background-color", "red, white") ... End Select DockNode3LineChart.SetChildStyleMap(".default-color" & (seriesNumber) & ".chart-series-line", LineStyle) DockNode3LineChart.SetChildStyleMap2(".default-color" & (seriesNumber) & ".chart-line-symbol", SymbolStyle)

I've been googling this but haven't been able to resolve it. Is there a separate css for the legend symbol colors?

Only after the form is shown:

B4X:

Dim StyleMap As Map = LineChart.GetChildStyleMap(".default-color0.chart-legend-item-symbol")
If StyleMap.IsInitialized Then
     StyleMap.Put("-fx-background-color", "#your_color")
     LineChart.SetChildStyleMap(".default-color0.chart-legend-item-symbol", StyleMap)
End If

Pravin Shah · Jul 27, 2017

Dear @Informatix, Very good charting library for B4J.

I am working on Stock market related application using B4J where I need to show stock prices using candlestick chart. I could not find the candlestick option in the above library so is it possible to draw candlestick charts using above library?
I will have the stock data in the format of Open, High, Low, Close and Volume.

Lahksman · Jul 27, 2017

Pravin Shah said:
I could not find the candlestick option in the above library

I don't think that javafx.scene.chart (on which this lib is based) contains candlestick charts.

Pravin Shah · Jul 27, 2017

Lahksman said:
I don't think that javafx.scene.chart (on which this lib is based) contains candlestick charts.

Thanks @Lahksman for quick reply. Do you or anyone know any Chart library supporting candlestick charts?

I tried searching the forum but could not find any library for B4J. There are some libraries available for B4A supporting candlestick but not for B4J. I would appreciate if anyone could point me to this library

Lahksman · Jul 27, 2017

You could take a look at google charts.
See this post for more info.

EDIT: If you have any more questions about this, it's best to start a new topic. Otherwise we would be hijacking this thread.

Informatix · Jul 27, 2017

Pravin Shah said:
Dear @Informatix, Very good charting library for B4J.

I am working on Stock market related application using B4J where I need to show stock prices using candlestick chart. I could not find the candlestick option in the above library so is it possible to draw candlestick charts using above library?
I will have the stock data in the format of Open, High, Low, Close and Volume.

Two ideas:
- using a StackedBarChart with two series where the first one is invisible (so you have the candle body for Open/Close);
- drawing a line at each position with the Plot event for High/Low (see the ChartWithjGraphiblib demo).
or drawing everything with the Plot event.

Pravin Shah · Jul 27, 2017

Informatix said:
Two ideas:
- using a StackedBarChart with two series where the first one is invisible (so you have the candle body for Open/Close);
- drawing a line at each position with the Plot event for High/Low (see the ChartWithjGraphiblib demo).
or drawing everything with the Plot event.

Thank you @Informatix, I will give it a try. Appreciate your help.

Pravin Shah · Jul 27, 2017

Lahksman said:
You could take a look at google charts.
See this post for more info.

EDIT: If you have any more questions about this, it's best to start a new topic. Otherwise we would be hijacking this thread.

Thanks @Lahksman for the link. The google charts are available for web, I am looking for desktop application.

tufanv · Jul 31, 2017

Hello,
I have 3 questions
1) solution found to q1

2) is it possible to hide the values of x axis as seen in the pic as 0 , 2.5 , 5.0 .... etc

3)I am trying to change the default color of red (or pink ) of area chart , I chedked post 11 and trying to use :

B4X:

    Dim style As Map = AreaChart.GetChildStyleMap(".default-color1.chart-symbol")
    style.Put("-fx-background-color", "red" )
    AreaChart.SetChildStyleMap(".default-color1.chart-symbol", style)

I am not sure if my code is correct but I always get map not nitialized error even if i initialize it first. Can you lease help me change the color of the area that is under the line.

Thanks

Informatix · Jul 31, 2017

tufanv said:
Hello,
I have 3 questions
1) solution found to q1

2) is it possible to hide the values of x axis as seen in the pic as 0 , 2.5 , 5.0 .... etc

3)I am trying to change the default color of red (or pink ) of area chart , I chedked post 11 and trying to use :

B4X:

Dim style As Map = AreaChart.GetChildStyleMap(".default-color1.chart-symbol") style.Put("-fx-background-color", "red" ) AreaChart.SetChildStyleMap(".default-color1.chart-symbol", style)

I am not sure if my code is correct but I always get map not nitialized error even if i initialize it first. Can you lease help me change the color of the area that is under the line.

Thanks

2)
By setting properly TickUnit, LowerBound and UpperBound (for a NumberAxis), you should get the expected result.

3)
".default-color1.chart-symbol" is obviously an invalid style name.

B4X:

Dim FirstAreaStyle As Map = AreaChart.GetChildStyleMap(".default-color0.chart-series-area-fill")
FirstAreaStyle.Put("-fx-fill", "#your_color")
AreaChart.SetChildStyleMap(".default-color0.chart-series-area-fill", FirstAreaStyle)

tufanv · Jul 31, 2017

Informatix said:
2)
By setting properly TickUnit, LowerBound and UpperBound (for a NumberAxis), you should get the expected result.

3)
".default-color1.chart-symbol" is obviously an invalid style name.

B4X:

Dim FirstAreaStyle As Map = AreaChart.GetChildStyleMap(".default-color0.chart-series-area-fill") FirstAreaStyle.Put("-fx-fill", "#your_color") AreaChart.SetChildStyleMap(".default-color0.chart-series-area-fill", FirstAreaStyle)

Hi Informatix ,

Thanks very much for the answer. An interesting thing happens when i use the code snippet you put. The fill is happening for a second for my selected color , than changes back to red-pink again.

edit: by thw way for the x axis I want to show dates but I cant use a date format there I always get java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Number , Is there a way to show date for the x axis instead of numbers ? , sorry I am trying to understand by reading past posts but cant figure it out , I think it is possible for line chart for example but not for area chart)

Informatix · Aug 2, 2017

tufanv said:
An interesting thing happens when i use the code snippet you put. The fill is happening for a second for my selected color , than changes back to red-pink again.

There's probably something in your code that restores the original color or negates the change. Try my code in the demo. You won't get this issue.

tufanv said:
edit: by thw way for the x axis I want to show dates but I cant use a date format there I always get java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Number , Is there a way to show date for the x axis instead of numbers ?

In the demo, if you replace XAxisSAC by XAxisBC, which is a CategoryAxis, and Series by Series1 and Series2 for the data, you will display months on the XAxis.
The only thing that is not possible is to have a CategoryAxis for the Y axis (pretty logical for a stacked chart).

tufanv · Aug 2, 2017

Informatix said:
There's probably something in your code that restores the original color or negates the change. Try my code in the demo. You won't get this issue.

In the demo, if you replace XAxisSAC by XAxisBC, which is a CategoryAxis, and Series by Series1 and Series2 for the data, you will display months on the XAxis.
The only thing that is not possible is to have a CategoryAxis for the Y axis (pretty logical for a stacked chart).

Thanks very much for your help ! I will do as you say.

tufanv · Aug 12, 2017

Everything works perfect now , my problem is just , If I add the areachart with designer, I cant set lower bounds and upperbounds as xaxissac and yaxissac is not anymore used by the code , how can i set that when I add it by designer ?

( because i dont use anymore this code when adding with designer :

B4X:

    XAxisSAC.Initialize("")
    YAxisSAC.Initialize("")

    AreaChart.Initialize(XAxisSAC, YAxisSAC, "AC")

these also dont work:

B4X:

          YAxisSAC.AutoRanging=False
            YAxisSAC.LowerBound=listegrafik.Get(0)
            YAxisSAC.LowerBound=YAxisSAC.LowerBound
            YAxisSAC.UpperBound=listegrafik.Get(listegrafik.Size-1)
            YAxisSAC.UpperBound=YAxisSAC.UpperBound

and i cant reach the axis controls when added with designer.

Informatix · Aug 13, 2017

tufanv said:
Everything works perfect now , my problem is just , If I add the areachart with designer, I cant set lower bounds and upperbounds as xaxissac and yaxissac is not anymore used by the code , how can i set that when I add it by designer ?

( because i dont use anymore this code when adding with designer :

B4X:

XAxisSAC.Initialize("") YAxisSAC.Initialize("") AreaChart.Initialize(XAxisSAC, YAxisSAC, "AC")

these also dont work:

B4X:

YAxisSAC.AutoRanging=False YAxisSAC.LowerBound=listegrafik.Get(0) YAxisSAC.LowerBound=YAxisSAC.LowerBound YAxisSAC.UpperBound=listegrafik.Get(listegrafik.Size-1) YAxisSAC.UpperBound=YAxisSAC.UpperBound

and i cant reach the axis controls when added with designer.

You can get them with the XAxis and YAxis properties of your chart (e.g. YAxisSAC = AreaChart.YAxis).

FabioRome · Nov 26, 2017

hello everyone, how can I see the values entered in LINECHART?
thank you

(google translate)

B4J Library jCharts

Attachments

New Member

Active Member

Expert

Active Member

Expert

Member

Active Member

Member

Active Member

Expert

Member

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Similar Threads