B4A Library desCharts - Bar Charts, Line Charts, Stacked Bar Charts, Stacked Line Charts(New update in post #17)

I have started wrapping this Github project. The library files are in the /files folder of the attached B4A project. Copy them to your additional library folder. Take note that the sequence of some code in the B4A project is important (see comments in the attached B4A project). You will also need android-support-v4.jar. You can download it from here. I have at present allowed for 3 series of data to be added but will change the code to accommodate more data series should anyone require more than 3. Will post the java source code once I have added the other charting options.

Enjoy....:)

2.png


Some sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: desBarChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: android-support-v4
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private dbc1 As BarChartView
   
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    Dim serie As Int = 0

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc1.XaxisLabels = lbls
   
    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS       
   
    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc1.Series1_Values = serie1data                                                           'set the data of series 1   
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc1.Series1_Values = serie2data                                                           'set the data of series 2
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series1_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not
 
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series1_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not





    'Set the common chart parameters
    dbc1.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc1.setGridColor(Colors.White, Colors.Red, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc1.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc1.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis          
    dbc1.setTextStyle(Colors.White, 15.0)                           'set the color and size of the x-axis and y-axis text
    dbc1.GridAA = True                                              '....mmmmmmm....
   
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aDesCharts.zip
    40.6 KB · Views: 466
Last edited:
Click to expand...
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
sorex said:
@Johan Schoeman : baie nice, Johan. ;)

a small remark...

it seems that on each item in a group the bottom position moves down 1 pixel.
Click to expand...
You can adjust the thickness of the lines:

dbc1.setLineStyle_3(serie, Colors.Black, Colors.Green, 4.0, False) 'Make the 4.0 smaller.......
dbc1.setGridWidth(2.0, 2.0, 2.0)
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Have added Line Charts. New library files are in the /files folder of the attached B4A project. Copy/replace them to/in your additional library folder. You will also need android-support-v4.jar. You can download it from here. You can now add as many series as you like - also for the bar charts.

3.png


Some sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: desBarChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: android-support-v4
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private dbc1 As BarChartView
    Private dbc2 As LineChartView
   
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    Dim serie As Int = 0

    'THE FOLLOWING CODE GENERATES BARCHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc1.XaxisLabels = lbls
   
    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS       
   
    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc1.Series1_Values = serie1data                                                           'set the data of series 1   
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc1.Series1_Values = serie2data                                                           'set the data of series 2
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series1_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not
 
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series1_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc1.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc1.setGridColor(Colors.White, Colors.Red, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc1.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc1.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis          
    dbc1.setTextStyle(Colors.White, 15.0)                           'set the color and size of the x-axis and y-axis text
    dbc1.GridAA = True                                              '....mmmmmmm....
   
   
    'THE FOLLOWING CODE GENERATES LINECHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc2.XaxisLabels = lbls
   
    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS       
   
    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc2.Series1_Values = serie1data                                                           'set the data of series 1   
    dbc2.setLineStyle_2(serie, Colors.Red, 2.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc2.Series1_Values = serie2data                                                           'set the data of series 2
    dbc2.setLineStyle_2(serie, Colors.Yellow, 2.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc2.Series1_Values = serie3data                                                        'set the data of series 3
    dbc2.setLineStyle_2(serie, Colors.Green, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not
 
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(26.5, -15.1, 17.0, 83.6, -5.4, 0.0, 27.2)      'series 3's data
    dbc2.Series1_Values = serie3data                                                        'set the data of series 3
    dbc2.setLineStyle_2(serie, Colors.Magenta, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc2.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc2.setGridColor(Colors.White, Colors.Red, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc2.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc2.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis          
    dbc2.setTextStyle(Colors.White, 15.0)                           'set the color and size of the x-axis and y-axis text
    dbc2.GridAA = True                                              '....mmmmmmm....   
   
   
   
   
   
   
   
   
   
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aDesCharts_v2.zip
    43.4 KB · Views: 402
walterf25

walterf25

Expert
Licensed User
Longtime User
Johan Schoeman said:
I have started wrapping this Github project. The library files are in the /files folder of the attached B4A project. Copy them to your additional library folder. Take note that the sequence of some code in the B4A project is important (see comments in the attached B4A project). You will also need android-support-v4.jar. You can download it from here. I have at present allowed for 3 series of data to be added but will change the code to accommodate more data series should anyone require more than 3. Will post the java source code once I have added the other charting options.

Enjoy....:)

View attachment 37138

Some sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: desBarChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: android-support-v4
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private dbc1 As BarChartView
  
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    Dim serie As Int = 0

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc1.XaxisLabels = lbls
  
    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS      
  
    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc1.Series1_Values = serie1data                                                           'set the data of series 1  
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc1.Series1_Values = serie2data                                                           'set the data of series 2
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series1_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series1_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not





    'Set the common chart parameters
    dbc1.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc1.setGridColor(Colors.White, Colors.Red, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc1.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc1.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis         
    dbc1.setTextStyle(Colors.White, 15.0)                           'set the color and size of the x-axis and y-axis text
    dbc1.GridAA = True                                              '....mmmmmmm....
  
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
Click to expand...
very Nice, i haven't tried it yet, but can you add legend labels to it, and can you do live data graphs, can you add a second Y Axis?

Thanks,
Walter
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
walterf25 said:
very Nice, i haven't tried it yet, but can you add legend labels to it, and can you do live data graphs, can you add a second Y Axis?

Thanks,
Walter
Click to expand...
Hi Walter

Should be very simple to add legends by making use of B4A labels (same applies for graph title, x-axis title, y axis title). See what I have done in post #18 of AndroidCharts. Much easier to add them via B4A code than to try and change the original Github project that I am basically just doing a wrapper for. That is the beauty and flexibility that B4A offers!

The data is passed to the library via arrays. So, if you can get the live data into the arrays fast enough and pass them on to the lib then you should have "real time" display of the data.

Second Y-Axis - Unfortunately not, unless I go and modify the original Github project. As mentioned above, just doing a wrapper for this Github project and the Github project does not make provision for a 2nd Y-Axis. There is however another charting project that I have lined up for wrapping that does add legends from within the project and also a second y-axis.

Rgds

JS
 
M

Mahares

Expert
Licensed User
Longtime User
@Johan Schoeman
You have a library in this thread:
http://b4x.com/android/forum/threads/androidcharts-pie-chart-bar-chart-line-chart.57760/
1. Is the lib in this thread a totally different lib from the one shown in the above link, or is it an upgrade. I have a feeling it is different.
2. If it is an upgrade, then it is better to keep the same name for the xml and jar files.
3. If it is different, does the new one include all the features already in the original lib.
Thank you for devoting a good bit of time to this endeavor.
Vive l'Afrique
 
walterf25

walterf25

Expert
Licensed User
Longtime User
Johan Schoeman said:
Hi Walter

Should be very simple to add legends by making use of B4A labels (same applies for graph title, x-axis title, y axis title). See what I have done in post #18 of AndroidCharts. Much easier to add them via B4A code than to try and change the original Github project that I am basically just doing a wrapper for. That is the beauty and flexibility that B4A offers!

The data is passed to the library via arrays. So, if you can get the live data into the arrays fast enough and pass them on to the lib then you should have "real time" display of the data.

Second Y-Axis - Unfortunately not, unless I go and modify the original Github project. As mentioned above, just doing a wrapper for this Github project and the Github project does not make provision for a 2nd Y-Axis. There is however another charting project that I have lined up for wrapping that does add legends from within the project and also a second y-axis.

Rgds

JS
Click to expand...
Have you looked at this one?
https://www.b4x.com/android/forum/threads/graphview-library.34995/#content

Walter
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Mahares said:
@Johan Schoeman
You have a library in this thread:
http://b4x.com/android/forum/threads/androidcharts-pie-chart-bar-chart-line-chart.57760/
1. Is the lib in this thread a totally different lib from the one shown in the above link, or is it an upgrade. I have a feeling it is different.
2. If it is an upgrade, then it is better to keep the same name for the xml and jar files.
3. If it is different, does the new one include all the features already in the original lib.
Thank you for devoting a good bit of time to this endeavor.
Vive l'Afrique
Click to expand...
It is a different. Follow the Github links in post #1 of each of desCharts and AndroidCharts
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
;)
DonManfred said:
For me they all are part of ONE Library. Why are you creating multiple wrappers for them instead of putting all together in one wrapper?
Click to expand...
I usually post the java source code along with the project that has been wrapped in case someone wants to amend/change the source code. Would probably be easier to deal with a single project that has been wrapped rather than a combination of projects that are wrapped together.
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Have added Stacked Bar Charts. New library files in attached DesCharts_v3.zip. Copy/replace them to/in your additional library folder. You will also need android-support-v4.jar. You can download it from here.

1.png


Some sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: desBarChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: android-support-v4
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private dbc1 As BarChartView
    Private dbc2 As LineChartView
    Private dbc3 As StackedBarChartView

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    Dim serie As Int = 0

    'THE FOLLOWING CODE GENERATES BARCHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc1.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS 

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc1.Series_Values = serie1data                                                           'set the data of series 1
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc1.Series_Values = serie2data                                                           'set the data of series 2
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc1.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc1.setGridColor(Colors.White, Colors.Red, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc1.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc1.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis    
    dbc1.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc1.GridAA = True                                              '....mmmmmmm....


    'THE FOLLOWING CODE GENERATES LINECHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc2.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS 

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc2.Series_Values = serie1data                                                           'set the data of series 1
    dbc2.setLineStyle_2(serie, Colors.Red, 2.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc2.Series_Values = serie2data                                                           'set the data of series 2
    dbc2.setLineStyle_2(serie, Colors.Yellow, 2.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc2.Series_Values = serie3data                                                        'set the data of series 3
    dbc2.setLineStyle_2(serie, Colors.Green, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(26.5, -15.1, 17.0, 83.6, -5.4, 0.0, 27.2)      'series 3's data
    dbc2.Series_Values = serie3data                                                        'set the data of series 3
    dbc2.setLineStyle_2(serie, Colors.Magenta, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc2.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc2.setGridColor(Colors.White, Colors.White, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc2.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc2.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis    
    dbc2.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc2.GridAA = True                                              '....mmmmmmm....



    'THE FOLLOWING CODE GENERATES STACKED BARCHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc3.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS 

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, 77.4, 125.3)      'series 1's data
    dbc3.Series_Values = serie1data                                                           'set the data of series 1
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, 45.5, 67.9, 14.0, 83.6)       'series 2's data
    dbc3.Series_Values = serie2data                                                           'set the data of series 2
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, 42.1, 38.7, 98.6, 39.4, 19.3, 57.2)      'series 3's data
    dbc3.Series_Values = serie3data                                                        'set the data of series 3
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(28.6, 45.2, 15.7, 98.6, 39.4, 44.2, 57.2)      'series 3's data
    dbc3.Series_Values = serie3data                                                        'set the data of series 3
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc3.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc3.setGridColor(Colors.White, Colors.Cyan, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc3.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc3.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis    
    dbc3.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc3.GridAA = True                                              '....mmmmmmm....

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aDesCharts_v3.zip
    8.8 KB · Views: 322
  • DesCharts_v3.zip
    37.5 KB · Views: 341
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Have added Stacked Line Charts. New library files in attached DesChartsLibraryFiles.zip Copy/replace them to/in your additional library folder. You will also need android-support-v4.jar. You can download it from here.

1.png


Some sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: desBarChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: android-support-v4
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private dbc1 As BarChartView
    Private dbc2 As LineChartView
    Private dbc3 As StackedBarChartView
    Private dbc4 As StackedLineChartView

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    Dim serie As Int = 0

    'THE FOLLOWING CODE GENERATES BARCHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc1.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS   

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc1.Series_Values = serie1data                                                           'set the data of series 1
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc1.Series_Values = serie2data                                                           'set the data of series 2
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc1.Series_Values = serie3data                                                        'set the data of series 3
    dbc1.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc1.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc1.setGridColor(Colors.White, Colors.Red, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc1.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc1.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis      
    dbc1.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc1.GridAA = True                                              '....mmmmmmm....


    'THE FOLLOWING CODE GENERATES LINECHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc2.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS   

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, -77.4, 125.3)      'series 1's data
    dbc2.Series_Values = serie1data                                                           'set the data of series 1
    dbc2.setLineStyle_2(serie, Colors.Red, 2.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, -45.5, 67.9, 0.0, 83.6)       'series 2's data
    dbc2.Series_Values = serie2data                                                           'set the data of series 2
    dbc2.setLineStyle_2(serie, Colors.Yellow, 2.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, -42.1, 0.0, 98.6, 39.4, 0.0, 57.2)      'series 3's data
    dbc2.Series_Values = serie3data                                                        'set the data of series 3
    dbc2.setLineStyle_2(serie, Colors.Green, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(26.5, -15.1, 17.0, 83.6, -5.4, 0.0, 27.2)      'series 3's data
    dbc2.Series_Values = serie3data                                                        'set the data of series 3
    dbc2.setLineStyle_2(serie, Colors.Magenta, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc2.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc2.setGridColor(Colors.White, Colors.White, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc2.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc2.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis      
    dbc2.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc2.GridAA = True                                              '....mmmmmmm....



    'THE FOLLOWING CODE GENERATES STACKED BARCHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc3.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS   

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, 77.4, 125.3)      'series 1's data
    dbc3.Series_Values = serie1data                                                           'set the data of series 1
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Green, 0.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, 45.5, 67.9, 14.0, 83.6)       'series 2's data
    dbc3.Series_Values = serie2data                                                           'set the data of series 2
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Red, 0.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, 42.1, 38.7, 98.6, 39.4, 19.3, 57.2)      'series 3's data
    dbc3.Series_Values = serie3data                                                        'set the data of series 3
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Yellow, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(28.6, 45.2, 15.7, 98.6, 39.4, 44.2, 57.2)      'series 3's data
    dbc3.Series_Values = serie3data                                                        'set the data of series 3
    dbc3.setLineStyle_3(serie, Colors.Transparent, Colors.Blue, 0.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc3.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc3.setGridColor(Colors.White, Colors.Cyan, Colors.Magenta)     'set the border color, grid color, and horixzontal axis color
    dbc3.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc3.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis      
    dbc3.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc3.GridAA = True                                              '....mmmmmmm....



    'THE FOLLOWING CODE GENERATES STACKED LINE CHARTS

    'SET THE X-AXIS LABELS
    Dim lbls() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")    'prepare the x-axis labels
    dbc4.XaxisLabels = lbls

    'TAKE NOTE - THE ORDER OF EACH OF THE 3 FOLLOWING LINES OF CODE ARE IMPORTANT AND IT NEEDS TO BE BELOW THE ABOVE 2 LINES OF CODE THAT SETS THE x-axis LABELS   

    'SET THE DATA OF SERIES 1 - keep the order of the next 3 lines of code
    serie = 0
    Dim serie1data() As Float = Array As Float(25.0, 35.0, 48.3, 99.7, 45.2, 77.4, 125.3)      'series 1's data
    dbc4.Series_Values = serie1data                                                           'set the data of series 1
    dbc4.setLineStyle_3(serie, Colors.White, Colors.Green, 2.0, False)                         'set style of series 1 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 2 - keep the order of the next 3 lines of code
    serie = 1
    Dim serie2data() As Float = Array As Float(44.7, 94.3, 122.1, 45.5, 67.9, 14.0, 83.6)       'series 2's data
    dbc4.Series_Values = serie2data                                                           'set the data of series 2
    dbc4.setLineStyle_3(serie, Colors.White, Colors.Red, 2.0, False)                        'set style of series 2 - the outer color of the bars, the fill color of the bars, and using dip values or not
    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 2
    Dim serie3data() As Float = Array As Float(15.5, 42.1, 38.7, 98.6, 39.4, 19.3, 57.2)      'series 3's data
    dbc4.Series_Values = serie3data                                                        'set the data of series 3
    dbc4.setLineStyle_3(serie, Colors.White, Colors.Yellow, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'SET THE DATA OF SERIES 3 - keep the order of the next 3 lines of code
    serie = 3
    Dim serie3data() As Float = Array As Float(28.6, 45.2, 15.7, 98.6, 39.4, 44.2, 57.2)      'series 3's data
    dbc4.Series_Values = serie3data                                                        'set the data of series 3
    dbc4.setLineStyle_3(serie, Colors.White, Colors.Blue, 2.0, False)                     'set style of series 3 - the outer color of the bars, the fill color of the bars, and using dip values or not

    'Set the common chart parameters
    dbc4.BackgroundColor = Colors.ARGB(100, 0, 0, 255)              'set the background color
    dbc4.setGridColor(Colors.White, Colors.Black, Colors.Red)     'set the border color, grid color, and horixzontal axis color
    dbc4.setGridVis(True, True, True)                               'set the visibility of the border, grid, and centre horizonla axis
    dbc4.setGridWidth(2.0, 2.0, 2.0)                                'set the  width of the border, grid, and centre horizonla axis      
    dbc4.setTextStyle(Colors.White, 12.0)                           'set the color and size of the x-axis and y-axis text
    dbc4.GridAA = True                                              '....mmmmmmm....

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aDesCharts_v4.zip
    9 KB · Views: 379
  • DesChartsLibraryFiles.zip
    39.9 KB · Views: 410
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
I am going to leave this project here. Attached the java source code of the project for those that want to complete the last two charts (XY Chart and Styled XY Chart). There is an empty libs folder on the same level as the src folder in the folder structure. You need to copy android-support-v4.jar into this folder (too big to upload) before you can compile the java code. You can download android-support-v4.jar from here.

The last two wrappers will just be more of the same thing as what I have already done in the first 4 wrappers. Make sure you wrap the correct public methods in CartesianView.java and then also in XyChartView.java and StyledXyChartView.java

Shout if you need some help/guidance (not at me - at my teacher...@DonManfred) ;)
 

Attachments

  • DeschartsLibrary.zip
    110.1 KB · Views: 360
M

Mahares

Expert
Licensed User
Longtime User
Your latest DesCharts library is very good. To make it even better, it is essential to have the ability to have a legend, axes title, chart title, toggle values on/off without having to resort to labels, panels and rotated text. They should be part of the charts properties. if that is possible, that would be your icing on the cake. If not,, the library is still very beneficial and elegant.
Thank you
 
D

deantangNYP

Active Member
Licensed User
Longtime User
Just curious, how can i start plotting the Line Chart from x=0 location (i.e removing the Gap between Mon and Y-axis). Thanks
 
Last edited:
You must log in or register to reply here.

Similar Threads

klaus
  • Article
B4J Library [B4X] xGantt Chart
Replies
8
Views
2K
klaus
klaus
klaus
  • Article
B4J Library [B4X] [XUI] xChart Class and b4xlib
32 33 34
Replies
669
Views
129K
klaus
klaus
Johan Schoeman
  • Article
B4A Library MPAndroidCharts - Various type of graphs / charts (Latest library V1.22 in post #1)
19 20 21
Replies
405
Views
164K
mhk1368
M
Johan Schoeman
  • Article
B4A Library AndroidCharts - Pie Chart & Bar Chart & Line Chart
2
Replies
20
Views
20K
Johan Schoeman
Johan Schoeman
Mashiane
  • Article
Share My Creation Google Charts
2
Replies
22
Views
16K
Croïd
Croïd
Top