B4J Library [B4X] [XUI] xChart Class and b4xlib

Laurent95 · Mar 7, 2021

Good evening all

klaus said:
Currently you cannot use strings for the X axis in YXCharts and you cannot have missing values in Line charts.

Ok, thank you Klaus, at least i know that's YXChart isn't maybe the best way

klaus said:
EDIT:
Are you looking for something like this ?
.../...
Please test the attached version 7.0.

Thank you so much !!! ?
I will try that, i think that'll resolve my weird need with these rate exchange

Have a nice evening,
Laurent

Deleted member 103 · Mar 8, 2021

Hi Klaus,

I found a little bug, maybe you can fix it, I'll fix it for me anyway.
The variable "py (0)" contains the value "8.72", but the variable "txt" is "8.720000000000001".
I know this is because py (0) is a double variable, but that shouldn't happen normally.

Deleted member 103 · Mar 8, 2021

and another thing.
In the Sub "ClearData", the List "HLines" should also be cleared.

B4X:

'clears all data, not the title nor axis names
Public Sub ClearData
    Items.Clear
    Points.Clear
    HLines.Clear
End Sub

klaus · Mar 8, 2021

Thank you for reporting these points.

Filippo said:
The variable "py (0)" contains the value "8.72", but the variable "txt" is "8.720000000000001".

Amended for the next update.

Filippo said:
In the Sub "ClearData", the List "HLines" should also be cleared.

Which version are you using?
In the latest published version 6.8, this point is already amended.

Deleted member 103 · Mar 8, 2021

Which version are you using?
In the latest published version 6.8, this point is already amended.

Then everything is fine, I'm still using version 6.7.
I didn't know about version 6.8 yet.

klaus · Mar 8, 2021

Filippo said:
I didn't know about version 6.8 yet.

I am afraid that I updated the class without sending a post about the update.
Do you use the xChart.bas class or the xChart.b4xlib ?
If you use the xChart.b4xlib you see the latest version.

Anyway, a new update will come very soon.

Deleted member 103 · Mar 8, 2021

Do you use the xChart.bas class or the xChart.b4xlib ?

I only use "xChart.bas", so I didn't know about the new version.
But in any case, I just wanted to tell you the mistake, because I can handle it.

Laurent95 · Mar 9, 2021

Hello,

It's ok i found a solution with SQL to avoid to have skipped values on min or max rates exchange, so i can use line perfectly, below a screenshot with 3 years avg, min and max values :

3 years rates exchange from BCE on B4J with Avg-Min-Max.png

Now i have several questions.
1st one: How i can change the background color of legend ? If it's possible of course. Otherwise i saw that's possible to put all chart transparent, legend follow then, with à specific background, who's an altenative way.
2nd question: When i use line chart it's ok, see above, i can put the minScaleValue to the minimum rate exchange of the period and maxScale value to maximum rate exchange.
But if i take vBar type chart even the chart have the good limits the bars still start from 0, any way to avoid this ? See below the screenshot.
NOTE: on vBars i don't use the average, min and max yet, need to study how i can put group of bars before, so for now it's all days between the 2 dates

VBar chart with a bit more than 4 months rates exchange ok for values.png

I guess that'll be the same with radar chart type, but as i know Klaus want only eat the donut, i'll not ask ???
3rd question: How i can know, when the vBar can't be displayed, i have something in log but in code what's the trick ?
I can limit in code the vBar chart to 4 months max, who seems the max before bars width are too small and not displayed. But how ?
An example i use to inform the user to the limits on datepickers for max and min dates possibles in database:

Thanks for any help, didn't found how do it yet
5th question: Just for understand, i could sleep even if i continue to don't know ? Even the period is ok and vBar are shown i still have a log information about "Bar value text size too small", why ?
Below an extract of my code and the logs to better understanding my questions:

B4X:

    VBarChart1.ClearData
'-> Tried this way for the vBar, but can't inform user like that, it's just to avoid to still have old vBars displayed
    'Empty the Vertical Bar chart, works but how i can know that bar width is too small ?
    'VBarChart1.DrawEmptyChart

'.../... after i only put visible or not the good components

            Dim lst As List
            lst.Initialize
            Dim SQLRequest As String =  "SELECT Date, Rate, DateLong FROM Currencies WHERE Currency='PHP' AND DateLong >=" & DatePicker1.DateTicks & " AND DateLong <=" & DatePicker2.DateTicks
            lst = DBUtils.ExecuteMemoryTable(mySQL, SQLRequest, Null, 0)
            If (lst.Size >0) Then
                Dim MaxiRate As Double
                Dim MiniRate As Double
                Dim MonthLast As Int
                Dim lstMin, lstMax As List
                lstMin.Initialize
                lstMax.Initialize
                For i = 0 To lst.Size - 1
                    Dim result() As String = lst.Get(i)
                    'result(1) is the rate
                    lstMin.Add(VBarChart1.NumberFormat3(result(1),2))
                    lstMax.Add(VBarChart1.NumberFormat3(result(1),2))
                    'result(2) is Datelong format of record
                    MonthLast = DateTime.GetMonth(result(2))
                Next
                lstMin.Sort(True)
                lstMax.Sort(False)
                Log("Minimum rate: " & lstMin.Get(0))
                Log("Maximum rate: " & lstMax.Get(0))
                MiniRate = lstMin.Get(0)-1.0
                MaxiRate = lstMax.Get(0)+1.0
                lstMin=Null
                lstMax=Null
                ' set the chart properties
                VBarChart1.Title = "Taux de change € > Pesos Philippin"
                VBarChart1.XAxisName = "Dates"
                VBarChart1.YAxisName = "Taux"
                VBarChart1.IncludeLegend = "BOTTOM"
                VBarChart1.AddBar("PHP", xui.Color_Red)
                VBarChart1.BarValueOrientation = "VERTICAL"
                'Not found how to change Legend background too
                VBarChart1.ChartBackgroundColor = xui.Color_Black
                VBarChart1.GridFrameColor = xui.Color_Yellow
                VBarChart1.DrawVerticalGridLines = False
                VBarChart1.GridColor = xui.Color_LightGray
                VBarChart1.TitleTextColor = xui.Color_Green
                VBarChart1.ScaleTextColor = xui.Color_Yellow
                VBarChart1.AxisTextColor = xui.Color_Cyan
                ' Add the items.
                DateTime.DateFormat="dd/MM/yyyy"
                For i = 0 To lst.Size-1
                    Dim result() As String = lst.Get(i)
                    VBarChart1.AddBarPointData(DateTime.Date(result(2)), VBarChart1.NumberFormat3(result(1),4))
                Next
                'VBarChart1.DrawOuterFrame = True
                VBarChart1.AutomaticTextSizes = True
                'Not sure the both are needed !
                VBarChart1.YScaleMinValue = MiniRate
                VBarChart1.YScaleMaxValue = MaxiRate
                VBarChart1.YMinValue = MiniRate
                ' And  even with that the vBars continue to start at 0 ?
                VBarChart1.YMaxValue = MaxiRate
                VBarChart1.DrawChart
            Else
                xui.MsgboxAsync("Pas de données à afficher.","Fill BCE Database")
            End If

Log:

B4X:

'Don't copy that in any code, it's log !!!!

-> WITH DATE BETWEEN 01/10/2020 AND 03/03/2021 note: date format is "dd/MM/yyy"
ExecuteMemoryTable: SELECT Date, Rate, DateLong FROM Currencies WHERE Currency='PHP' AND DateLong >=1601503200000 AND DateLong <=1614726000000
Minimum rate: 56
Maximum rate: 59
-> But old vBars are shown ???
Bar width = too small !!! Drawing of Bar chart skipped

For the last question :
ExecuteMemoryTable: SELECT Date, Rate, DateLong FROM Currencies WHERE Currency='PHP' AND DateLong >=1604271600000 AND DateLong <=1614726000000
Minimum rate: 56
Maximum rate: 59
-> When it's work still have in log this strange info ?
Bar value text size too small

Thanks for any help
If it's needed i can try to do a sample project code with the only problems encoutered, but at the moment project is big especially the database 6M°

Have a nice day,
Laurent

EDIT: Oooops, forget that, examples are under B4J with B4x libray v6.9 that Klaus gave.

madru · Mar 9, 2021

Hi,

found another small issue....

using IncludeLegend = "TOP_RIGHT" draws the transparent box to high and to wide

klaus · Mar 9, 2021

@Laurent95
1. Currently the legend background color is 0x66FFFFFF a semi-transparent white.
Or, as you already have seen, transparent if the chart background color is transparent.

2. Bar charts were designed with the scale beginning with 0 and automatic scales.
I have now seen the problem with manual scales, I will check it.

I guess that'll be the same with radar chart type ...

Yes.

3. The limit is calculated internally, the min width is 4dip.
The max number depends on several parameters, chart width, display of y axis name, y scale width etc.
I need to look deeper how to determine the max number of displayable bars.

4. No question !

5. There are two messages:
One, if the width of the bars is too small,.
A second one, if the text size to display the bar values in the bars is too small and the property IncludeValues = True.
If you set VBarChart1.IncludeValues = False, the message will disappear.

I see that you set the properties in the code, if these are always the same you could set them in the Designer.

klaus · Mar 9, 2021

madru said:
using IncludeLegend = "TOP_RIGHT" draws the transparent box to high and to wide

I cannot reproduce it.
Can you post a small project reproducing the problem.

madru · Mar 9, 2021

klaus said:
I cannot reproduce it.
Can you post a small project reproducing the problem.

Hi Klaus,

nothing to prepare, I can see it in your demo as well

klaus · Mar 9, 2021

This I had seen also, but it was not obvious to see it in the screenshot in post #389.
I already had it on my to do list.

Laurent95 · Mar 9, 2021

klaus said:
@Laurent95
1. Currently the legend background color is 0x66FFFFFF a semi-transparent white.
Or, as you already have seen, transparent if the chart background color is transparent.

Ok, thanks it's just aesthetic, no worries

2. Bar charts were designed with the scale beginning with 0 and automatic scales.
I have now seen the problem with manual scales, I will check it.

Ok, thank you, even it's also aesthetic, it's more lisible when variations are a bit smallest

3. The limit is calculated internally, the min width is 4dip.
The max number depends on several parameters, chart width, display of y axis name, y scale width etc.
I need to look deeper how to determine the max number of displayable bars.

Don't waste your time, it's easy to me to test how much months max i can put and limit that to a balanced number of months.

4. No question !

Indeed, it's because i'm getting youngest ?

5. There are two messages:
One, if the width of the bars is too small,.
A second one, if the text size to display the bar values in the bars is too small and the property IncludeValues = True.
If you set VBarChart1.IncludeValues = False, the message will disappear.

Yes 2, sorry. Thank you i'll use "VBarChart1.IncludeValues = False" just not saw it yet. It's a big Lib/Class now ?.
But the most important question is: How can i know that the bars width is too small. Any idea ?
If i can know it, i can change the maner to do the chart or advice the user to change the period.
But it's not critical for now, i'll inform you too if it's ok when i will concatenate the data with an average, min and max, it's not the case atm for vBars, it's ok for line Chart, 3 years it's enough ?.
Maybe that would be not too small then. I don't imagine to keep 22 years of histrorical rates in final, version

EDIT:
Wonderful Klaus, it's ok i consolidate the average, min, max and i can have 3 years on a PC and 2 years on a phone ! ?
2 years only on a phone because my own experience with fat thumbs ???
Screenshot below:

3 years rates exchange from BCE on B4J VBars Chart with Avg-Min-Max.png

2 years rates exchange from BCE on B4J VBars Chart with Avg-Min-Max.png

I can even put stacked bars, like that, so 3 years on the both :

3 years rates exchange from BCE on B4J VBarStaked Chart with Avg-Min-Max.png

EXCELLENT, thank you !!!

I see that you set the properties in the code, if these are always the same you could set them in the Designer.

Yes i know, it's just a project to test all and discover your excellent work ?.
In the final project i'll use some properties in the designer, or maybe use only 1 generic xChart and design it in code, not decided yet.
It's not on B4J that i ask myself for that, it's more for B4A where on a phone the size of code and files is more important.

Thank you for all your responses.
Have a nice evening,
Laurent

klaus · Mar 9, 2021

In the mean time I have worked on the class.

1. I added the LegendBackgroundColor property, I saw that with the default color and a black chart background the display is not good looking.
2. It is a bit more complicated than what I first thought, but I am on the way.
3. and 5. I added a GetMaxNumberBars method which calculates the max number of bar which could be displayed on a given chart.
This method should be called just before DrawChart.

The display problem from post #392 is also amended.

I am not yet finished with the changes, manly point 2.

It will look like this, needs quite some more testing.

Laurent95 · Mar 9, 2021

Hahaha, you're just incredible, WOWWWWW

Many thanks Klaus, not only for this work but also all you gave here since long time.

Have a nice evening and a good night,
Laurent

Laurent95 · Mar 10, 2021

Hello all

@klaus
I woke up early today, so i continued to adapt the examples of your project on my own project.
I saw the space between bars is not the same on vertical bars chart versus horizontal bars chart, see screenshots below.
On vertical:

VBar chart rates exchange width vary between bars.png

On horizontal:

HBar chart rates exchange height between bars.png

As in vertical it's less spaced, i think that maybe it's possible to do the same for horizontal bars.
That would be nice

, but maybe again a lot of work, sorry to bother you again.
And maybe some others would like to keep it fixed, i don't know,
I haven't fixed yet my rules for final project, so i can use it with 1 year and half of data too
I promise, i'll keep radar chart like it's designed ??

Have a nice day,
Laurent

klaus · Mar 10, 2021

Don't worry, the horizontal bar charts will look the same as the vertical ones.
It is on the to do list for today.
But before I need to finalize the display with manual scales, this will also be added to the horizontal bar charts.
I will get my second shot of the Covid vaccine in about one hour.

Laurent95 · Mar 10, 2021

Hi,

@klaus :
mmmm sometime better to turn my tong seven time in my mouth ?
But i didn't lie really when i promised to keep the radar chart as it's designed

Nah, just something i saw when i adapt radar on my own project, see below:
It happens when it's and odd number of points, here 37 in point.size :

Radar chart with odd number of points - Not ok due to truncated result.png

But i searched to understand why and found that's an Int who's declared in DrawRadar (line 4549 of your class, v6.9 -> AngleDelta as Int) instead of a Double declared in DrawItemValues (line 788 of your class, v6.9 -> Private Angle As Double).
So that's look better with a double in DrawRadar too :

Radar chart with odd number of points - Better due to use Double.png

Part of code modified in the class, just one line :

B4X:

'draws the radar chart
Private Sub DrawRadar
    Private i, j, x0, x1, xt, y0, y1, dy, dy0 As Int
    Private Cols(Items.Size), ACols(Items.Size) As Int
    Private Names(Items.Size) As String
    Private AngleDelta As Double    ' <- here
    'Nothing else changed
    '.../...
End Sub

Note: I tested it also with even number of points on your example project, it looks the same.
Hope that help

Have a nice evening,
Laurent

klaus · Mar 10, 2021

Thank you for all your tests !!!
This is the best and only way to get software better !!!
I like this kind of collaboration !!!

mmmm sometime better to turn my tong seven time in my mouth

Moralité: Ne promets jamais ce que tu n'est pas sûr de tenir !!!
Moral: Never promise what you're not sure you keep !

The explanation is that for the rectangular charts I use integer intervals to be sure that all intervals are the same.
This is more important for Bar charts, the bar widths are integer values, otherwise you could have bars with 1 pixel difference and this is visible with small bars and I do not like this.
I used the same principle for the Radar charts, but here it is a mistake because the total 'width' 360° is imposed.

Amended for the next update.

PS: The funny thing is that it took less time to amend the problem than to answer your post

!

B4J Library [B4X] [XUI] xChart Class and b4xlib

Attachments

Active Member

Deleted member 103

Guest

Deleted member 103

Guest

Expert

Deleted member 103

Guest

Expert

Deleted member 103

Guest

Active Member

Active Member

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Expert

Similar Threads