B4A Library AndroidCharts - Pie Chart & Bar Chart & Line Chart

Busy wrapping this Github project. This is phase 1 - drawing a Pie Chart. The lib files are in the /files folder of the B4A project. Copy them to your additional library folder.

Edit: Latest library files are in the /files folder of the B4A project in post #13 of this thread.

Edit: New library files in post #17 that will toggle the popup (show/hide) in the line chats when you click on the same data point.

1.png


....and when you click on a slice of the pie chart....

2.png



It raises an event in B4A when you click on a slice. You can then get the index of the slice that you have clicked on.

Some sample code:

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

    Private pv1 As PieView
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")
    pv1.Initialize("pv1")

    Activity.AddView(pv1, 50%x - 45%y, 5%y, 90%y, 90%y)

    Dim piedata() As Float = Array As Float(10, 15, 20, 25, 15, 10, 5)  'this needs to add to 100
    pv1.Data = piedata

    Dim piecolors() As Int = Array As Int(Colors.Green, Colors.Blue, Colors.Magenta, Colors.Yellow, Colors.DarkGray, Colors.Cyan, Colors.Red)
    pv1.PieColors = piecolors

    pv1.PieTextColor = Colors.Black

    pv1.ShowPercentLabel = True

End Sub

Sub pv1_pie_clicked

Log("Touched pie slice with index = " & pv1.PieClickedIndex)

End Sub
 

Attachments

  • b4aAndroidCharts.zip
    40.1 KB · Views: 1,123
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Phase 2 - added Bar Charts to the library. New library files are in the /files folder of the attached B4A project. It is just an extension of the library files of the project in post #1 of this thread. Copy/replace the lib files to/in your additional library folder. Posting the bar chart project separately else the B4A project gets to clogged with the code of the various graph options.

1.png


Some sample code:

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

'   private pv1 as PieView     'see project posted here ----->>>>  https://www.b4x.com/android/forum/threads/pie-chart.57760/
    Private bv1, bv2 As BarView
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")
    bv1.Initialize("")
    bv2.Initialize("")
 
    Activity.AddView(bv1, 5%x, 5%y, 70%y, 75%y)
    Activity.AddView(bv2, 5%x+75%y+10%x, 10%y, 70%y, 70%y)
 
    bv1.BarBackgroundColor = Colors.Transparent
    bv1.BarForegroundColor = Colors.Red
 
    Dim bardata() As Int = Array As Int(80, 15, 75, 65, 13, 48, 5)
    bv1.DataList = bardata
 
    Dim barbottomtext() As String = Array As String("M", "T", "W", "T", "F", "S", "S")  'need to have the same number of elements in the array as what bardata() has
    bv1.BottomTextList = barbottomtext
    bv1.BarTextColor = Colors.Yellow
    bv1.BarTextSize = 11.0


 
    bv2.BarBackgroundColor = Colors.DarkGray
    bv2.BarForegroundColor = Colors.Blue
 
    Dim bardata() As Int = Array As Int(5, 48, 13, 55, 25, 79, 62)    'max value is 100 - i.e it works in percentages.
    bv2.DataList = bardata
 
    Dim barbottomtext() As String = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul")  'need to have the same number of elements in the array as what bardata() has
    bv2.BottomTextList = barbottomtext
    bv2.BarTextColor = Colors.Red
    bv2.BarTextSize = 12.0 
 
End Sub
 

Attachments

  • b4aAndroidBarChart.zip
    42.6 KB · Views: 646
Last edited:

Mahares

Expert
Licensed User
Longtime User
  1. Any data points with values over 100 show the same value, example below 120 and 300 show the same y value on the bar graph. Is that the way it is supposed to work:
    B4X:
    Dim bardata() As Int = Array As Int(80, 15, 120, 65, 300, 48, 5)
2. looking forward to your line chart function.
Thank you
 

Johan Schoeman

Expert
Licensed User
Longtime User
  1. Any data points with values over 100 show the same value, example below 120 and 300 show the same y value on the bar graph. Is that the way it is supposed to work:
    B4X:
    Dim bardata() As Int = Array As Int(80, 15, 120, 65, 300, 48, 5)
2. looking forward to your line chart function.
Thank you
Yip, values are limited to 100 in the Github project that I am wrapping. Will change the Github project code to accommodate values greater than 100.
 

Mahares

Expert
Licensed User
Longtime User
Yip, values are limited to 100
Thanks for letting us know. It took me 2 hours to figure out why data imported from a SQLite table would not plot properly. What will make your lib a force to reckon with is to include line charts, varying scales, vertical and horizontal gridlines. legend, and corresponding y values display when touching any point.
Thank you for a great effort. Vive l'Afrique Du Sud.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Phase 3 - added Line Charts to the library. New library files are in the /files folder of the attached B4A project. It is just an extension of the library files of the project in posts #1 and #6 of this thread. Copy/replace the lib files to/in your additional library folder. Posting the line chart project separately else the B4A project gets to clogged with the code of the various graph options.

Also posting the java source code for whoever wants to change/add/amend it (src.zip)

Graph when created...

1.png


....and when you touch a data point on the graph (a popup with the point value)...

2.png


Some sample code...

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

'   private pv1 as PieView     'see project posted here ----->>>>  https://www.b4x.com/android/forum/threads/pie-chart-bar-chart.57760/
'   private bv1 as BarView     'see project posted here ----->>>>  https://www.b4x.com/android/forum/threads/pie-chart-bar-chart.57760/#post-363503
    Private lv1 As LineView
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")
    lv1.Initialize("")
   
    Activity.AddView(lv1, 22.5%x, 12.5%y, 55%x, 75%y)
   
    Dim linebottomtext() As String = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")  'keep the sequence of calling lv1.BottomTextList = linebottomtext and then lv1.DataList = linedata
    lv1.BottomTextList = linebottomtext
'    1v1.BarTextColor = Colors.Yellow
'    bv1.BarTextSize = 11.0   

    'values passed in the below linedata() array should be limited to 100 and not greater than 100 - meant to be percentages
    Dim linedata() As Int = Array As Int(95, 15, 75, 65, 13, 48, 5, 33, 55, 8, 21, 85)' 'need to have the same number of elements in the array as what linebottomtext() has
    lv1.DataList = linedata
    lv1.BottomTextColor = Colors.Yellow
    lv1.DrawDotLine = True
    lv1.BackgroudLineColor = 0xffccccff
    lv1.GraphLineColor = Colors.Green
    lv1.BigCircleColor = Colors.Blue
    lv1.SmallCircleColor = Colors.Black
    lv1.BottomTextSize = 15.0
   
End Sub

The library as it stands at present:

androidcharts
Author:
Johan Schoeman
Version: 1
  • BarView
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    Properties:
    • Background As Drawable
    • BarBackgroundColor As Int [write only]
    • BarForegroundColor As Int [write only]
    • BarTextColor As Int [write only]
    • BarTextSize As Float [write only]
    • BottomTextList() As String [write only]
    • Color As Int [write only]
    • DataList() As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
  • LineView
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    Properties:
    • BackgroudLineColor As Int [write only]
    • Background As Drawable
    • BigCircleColor As Int [write only]
    • BottomTextColor As Int [write only]
    • BottomTextList() As String [write only]
    • BottomTextSize As Float [write only]
    • Color As Int [write only]
    • DataList() As Int [write only]
    • DrawDotLine As Boolean [write only]
    • Enabled As Boolean
    • GraphLineColor As Int [write only]
    • Height As Int
    • Left As Int
    • SmallCircleColor As Int [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
  • PieView
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • selectedPie (index As Int)
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Data() As Float [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • PieClickedIndex As Int [read only]
    • PieColors() As Int [write only]
    • PieTextColor As Int [write only]
    • ShowPercentLabel As Boolean [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • b4aAndroidLineChart.zip
    45.2 KB · Views: 708
  • src.zip
    70.6 KB · Views: 625
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
  1. Any data points with values over 100 show the same value, example below 120 and 300 show the same y value on the bar graph. Is that the way it is supposed to work:
    B4X:
    Dim bardata() As Int = Array As Int(80, 15, 120, 65, 300, 48, 5)
2. looking forward to your line chart function.
Thank you
This will allow you to set the maximum value of the Y axis for the Bar Chart (new library files are in the /files folder of the attached B4A project).

Sample code:
B4X:
    bv2.BarBackgroundColor = Colors.DarkGray
    bv2.BarForegroundColor = Colors.Blue
   
    bv2.YAxisMax = 200
    Dim bardata() As Int = Array As Int(120, 48, 13, 155, 25, 79, 62)    'max value is 100 - i.e it works in percentages.
    bv2.DataList = bardata
   
    Dim barbottomtext() As String = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul")  'need to have the same number of elements in the array as what bardata() has
    bv2.BottomTextList = barbottomtext
    bv2.BarTextColor = Colors.Red
    bv2.BarTextSize = 12.0
 

Attachments

  • b4aAndroidBarChart_V2.zip
    45.2 KB · Views: 545

Mahares

Expert
Licensed User
Longtime User
@Johan Schoeman:
Since this library is shaping up to be a great one, I would like to recommend a few features to make it more complete:

1. When clicking on a data point, display the value (already in lib), but when clicking on it again, remove the value, i.e. toggle.
2. Ability to add a Graph Title and change its position.
3. Ability to add legend and change its position.
4. Ability to add Y axis and X axis titles.
5. The Y values are currently limited to integer values. Please expand to include doubles., int, string
6. The X values are currently limited to string values. Please expand to include doubles, int, string
7. Ability to display Y value next to gridline.
I used your lib to import data from a SQLite table. I can later include the project if you have the time to implement some of the above where I can include them. See graph:
 

Attachments

  • CountryPopulationLineGraph.png
    CountryPopulationLineGraph.png
    83.8 KB · Views: 488

Johan Schoeman

Expert
Licensed User
Longtime User
@Johan Schoeman:
Since this library is shaping up to be a great one, I would like to recommend a few features to make it more complete:

1. When clicking on a data point, display the value (already in lib), but when clicking on it again, remove the value, i.e. toggle.

Try the toggle @Mahares. New lib files attached - you know where to put them. No changes required in the B4A project code.
 

Attachments

  • AndroidCharts.zip
    36.2 KB · Views: 538

Johan Schoeman

Expert
Licensed User
Longtime User
1. When clicking on a data point, display the value (already in lib), but when clicking on it again, remove the value, i.e. toggle. - DONE
2. Ability to add a Graph Title and change its position. - DONE (see pic attached)
3. Ability to add legend and change its position. (do it the same way as what I have been doing with the Titles)
4. Ability to add Y axis and X axis titles. - DONE (simple to add it via B4A labels and panels - see pic attached)
5. The Y values are currently limited to integer values. Please expand to include doubles., int, string (...mmm...some work to do)
6. The X values are currently limited to string values. Please expand to include doubles, int, string (...mmm...some work to do)
7. Ability to display Y value next to gridline. (...mmm...some work to do)

Borrowed some very use full code from here https://www.b4x.com/android/forum/threads/lets-play-with-vertical-lables.42666/#post-266604 (thanks @IanMc). B4A project code to generate attached pic (use lib files in post #17):

B4X:
#Region  Project Attributes
    #ApplicationLabel: AndroidLineChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#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 pv1 as PieView     'see project posted here ----->>>>  https://www.b4x.com/android/forum/threads/pie-chart-bar-chart.57760/
'   private bv1 as BarView     'see project posted here ----->>>>  https://www.b4x.com/android/forum/threads/pie-chart-bar-chart.57760/#post-363503
    Private lv1 As LineView
    Private l1, l2 As Label
    Dim canvas1 As Canvas
    Dim panel1 As Panel

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")
    lv1.Initialize("")
    l1.Initialize("")
    l2.Initialize("")
    panel1.Initialize("")

    Activity.AddView(lv1, 22.5%x, 12.5%y, 55%x, 75%y)
    Activity.AddView(l1, 22.5%x, 2%y, 55%x, 10%y)
    Activity.AddView(l2, 22.5%x, 90%y, 55%x, 10%y)
    Activity.AddView(panel1, 15%x, 12.5%y, 5%x, 75%y)

    SideWays("mm of rainfall")

    l1.Text = "AVERAGE RAINFALL PER MONTH (mm) - 2014"
    l1.Color = Colors.Transparent
    l1.TextColor = Colors.Cyan
    l1.TextSize = 20.0
    l1.Gravity = Gravity.CENTER

    l2.Text = "Month of the Year"
    l2.Color = Colors.Transparent
    l2.TextColor = Colors.Red
    l2.Typeface = Typeface.DEFAULT_BOLD
    l2.TextSize = 20.0
    l2.Gravity = Gravity.CENTER

    Dim linebottomtext() As String = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")  'keep the sequence of calling lv1.BottomTextList = linebottomtext and then lv1.DataList = linedata
    lv1.BottomTextList = linebottomtext

   
    Dim linedata() As Int = Array As Int(317, 15, 75, 295, 13, 48, 355, 33, 55, 257, 21, 85)' 'need to have the same number of elements in the array as what linebottomtext() has
    lv1.DataList = linedata
    lv1.BottomTextColor = Colors.Yellow
    lv1.DrawDotLine = True
    lv1.BackgroudLineColor = 0xffccccff
    lv1.GraphLineColor = Colors.RGB(255,0,255)
    lv1.BigCircleColor = Colors.Green
    lv1.SmallCircleColor = Colors.Red
    lv1.BottomTextSize = 15.0

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub SideWays(text As String)
    canvas1.Initialize(panel1) 'this sets the canvas to be the background of Panel1 and to draw on it's bitmap ... I think :)
    'first delete anything already written by writing a big white rectangle on it!
    Dim Rect1 As Rect
    Rect1.Initialize(0, 0, panel1.Width, panel1.Height)
    canvas1.DrawRect(Rect1, Colors.Transparent, True, 1)
    'Then draw the text on the canvas at 90degrees where 'CENTER' is the middle of the panel
    canvas1.DrawTextRotated(text, panel1.Width / 2, panel1.Height / 2, Typeface.DEFAULT_BOLD, 20, Colors.Red, "CENTER", 270)
    'and thusly your panel is your label!
End Sub

3.png
 

Attachments

  • b4aAndroidLineChart.zip
    45.7 KB · Views: 557
Last edited:

arnold steger

Member
Licensed User
Longtime User
The limitation of datapoints is 100?
I whant make a chart from my trakking altitude, probable whit more then 5000 points.
What can use for view this?
 

Johan Schoeman

Expert
Licensed User
Longtime User
The limitation of datapoints is 100?
I whant make a chart from my trakking altitude, probable whit more then 5000 points.
What can use for view this?
I will have to check into the original Github project to see what the limitation is. But I think 5000 points will be way out of limit. Imagine 1 point per pixel on your device as the best case scenario. How far can you go?
 
Top