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

somed3v3loper · Sep 2, 2015

You guys are making the amazing B4A more powerful and beautiful .
We are appreciating your time and effort .
Keep it up

sorex · Sep 2, 2015

a small remark...

it seems that on each item in a group the bottom position moves down 1 pixel.

Johan Schoeman · Sep 2, 2015

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.

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 · Sep 3, 2015

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.

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

MarcoRome · Sep 3, 2015

Great wok Johan +11

walterf25 · Sep 3, 2015

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

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 · Sep 3, 2015

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

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

Mahares · Sep 3, 2015

@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 · Sep 3, 2015

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

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

Walter

Johan Schoeman · Sep 3, 2015

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

It is a different. Follow the Github links in post #1 of each of desCharts and AndroidCharts

Johan Schoeman · Sep 3, 2015

walterf25 said:
Have you looked at this one?
https://www.b4x.com/android/forum/threads/graphview-library.34995/#content

Walter

Very nice!

DonManfred · Sep 4, 2015

Johan Schoeman said:
It is a different.

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?

Johan Schoeman · Sep 4, 2015

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?

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 · Sep 4, 2015

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.

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

Johan Schoeman · Sep 4, 2015

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.

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

Johan Schoeman · Sep 4, 2015

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)

Mahares · Sep 4, 2015

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

deantangNYP · Sep 17, 2015

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

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

Attachments

Expert

Well-Known Member

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Active Member

Similar Threads