B4A Library MPAndroidCharts - Various type of graphs / charts (Latest library V1.22 in post #1)

Edit 6 Sep 2015: Post #3 adds Single Vertical Bar Charts and update for Pie Charts
Edit 8 Sep 2015 Post #6 update for Single Vertical Bar Charts
Edit 11 Sep 2015 Post #7 adds Single Line Charts
Edit 12 Sep 2015 Post #8 update for Single Line Charts
Edit 12 Sep 2015 Post #9 adds Single Horizontal Bar Charts
Edit 12 Sep 2015 Post #11 adds Radar Charts
Edit 13 Sep 2015 Post #12 update for Single Line and Single Bar Charts
Edit 14 Sep 2015 Post #16 update for Radar Charts
Edit 16 Sep 2015 Post #19 adds Multiple Line Charts
Edit 17 Sep2016 Post #21 adds Multi Vertical Bar Charts
Edit 19 Sep 2015 Post #23 adds Multi Bubble Charts
Edit 19 Sep 2015 Post #24 adds Multi Horizontal Bar Charts
Edit 19 Sep 2015 Post #25 adds Multi Scatter Charts
Edit 19 Sep 2015 Post #26 adds Stacked Bar Charts
Edit 20 Sep 2015 Post #27 adds Candlestick Charts
Edit 20 Sep 2015 Post #28 adds Combined Line & Bar Charts
Edit 23 Sep 2015 Post #31 fixed no-show of Chart Title for Combined Charts and added ability to rotate X-axis labels between -30 and + 30 degrees

I am busy wrapping this Github project. Attached is the Pie Chart functionality of the project/library. Posting the B4A project and Library files. Copy the library files to your additional library folder.

Some remarks about the Pie Chart:
1. It will display the values passed as a percentage of the total of the values that you pass
2. There are 3 x arrays that are passed to the library. Ensure that you pass the same number of elements in each of the arrays.
3. When you click on a pie slice the slice will increase in radial size (see pics below)
4. If you click on the radial increased slice it will return to normal size.
5. You can spin the pie chart around its centre point (CW and ACW) with your finger.

Untouched ...

Pie.gif


1.png


Green slice touched ...

2.png


Pie Chart rotated with finger...

3.png



Some sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: MPChart
    #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 mpc1 As PieChart
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")

mpc1.DrawHoleEnabled = True
mpc1.HoleColorTransparent = True

mpc1.TransparentCircleColor = Colors.White
mpc1.TransparentCircleAlpha = 110

mpc1.HoleRadius = 58.0
mpc1.TransparentCircleRadius = 61.0

mpc1.DrawCenterText = True

mpc1.CenterText = "Wrapped by Johan"
mpc1.CenterTextColor = Colors.White
mpc1.CenterTextRadiusPercent = 100.0
mpc1.CenterTextSize = 15.0

mpc1.DrawSliceText = True
mpc1.HoleColor = Colors.Black
mpc1.TransparentCircleColor = Colors.Transparent

mpc1.setTheLegendPosition
mpc1.TheLegendColor = Colors.yellow
mpc1.TheLegendTextSize = 12.0
mpc1.LegendTitle = "MONTHS"

mpc1.ChartDescription = "TITLE : Some Arbitrary Data"
mpc1.ChartDescriptionColor = Colors.ARGB(200,0,255,255)
mpc1.ChartDescriptionTextSize = 17

mpc1.ValueTextColor = Colors.Black
mpc1.ValueTextSize = 15.0

mpc1.PieColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
mpc1.LegendText = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun")
mpc1.ChartData = Array As Float(128.0, 16.0, 46.0, 40.0, 30.0, 40.0)    'values - it will be converted to %

mpc1.PieData = 6

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aMPChart.zip
    7.9 KB · Views: 1,418
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,506
  • mpChartLibV1.15.zip
    355.2 KB · Views: 621
  • mpChartLibV1.16.zip
    355.7 KB · Views: 621
  • mpChartLibV1.17.zip
    355.8 KB · Views: 787
  • mpChartLibV1.18.zip
    356.4 KB · Views: 699
  • mpChartLibV1.20.zip
    358.1 KB · Views: 483
  • mpChartLibV1.21.zip
    358 KB · Views: 54
  • mpChartLibV1.22.zip
    359.2 KB · Views: 82
Last edited:
Click to expand...
F

fwizardy

New Member
Johan Schoeman said:
Here it is. It will draw multiple line charts (I have allowed for 5 line charts) and a single bar chart on the same graph. Posting the new B4A library files and the B4A project demonstrating this. Position of labels, angles of labels, etc, etc are as per previous posted graphs - most notably:
mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","SQUARE") - and its various variants (see previous posts)
mlc1.LineAxisDependency = "RIGHT" - and its various variants (see previous posts)
mlc1.XaxisLabelPosition = "TOP_INSIDE" - and its various variants (see previous posts)
mlc1.BarAxisDependency = "LEFT" - and its various variants (see previous posts)

The "save" and "bitmap return" options have been added to this wrapper too.

View attachment 39650

Sample Code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: MPMultiLineBarChart
    #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 mlc1 As MultiLineBarChart
 
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")
 
'*********************************** GENERAL CHART SETUP STARTS HERE
 
    mlc1.GridBackgroundColor = Colors.Transparent
 
    mlc1.DrawBorders = True
    mlc1.BorderColor = Colors.Red
    mlc1.BorderWidth = 3
 
    mlc1.LegendShapeSize = 10.0
    mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","SQUARE")
    mlc1.TheLegendTextColor = Colors.Yellow
    mlc1.TheLegendTextSize = 10.0
    mlc1.LegendEntrySpace = 50.0

    mlc1.ChartDescription = "MULTI LINE AND SINGLE BAR CHART"
    mlc1.ChartDescriptionTextSize = 30.0
    mlc1.ChartDescriptionColor = Colors.red
    mlc1.setDescriptionPosition(mlc1.Left + (mlc1.Width/2), mlc1.Top + 10%y)
 
    mlc1.MarkerToUse = 4
    mlc1.DrawMarkerViews = True
 
    mlc1.PinchZoom = True
 
'******************************************* LINE CHART SET UP STARTS HERE
 
    mlc1.NumberOfLineCharts = 5        'change this value from 1 to 5 to draw the 1st, 1st and 2nd, 1st and 2nd and 3rd, etc line charts
 
    mlc1.LineLegendText = Array As String("A", "B", "C", "D", "E")

    mlc1.LineColor = Array As Int(Colors.Green, Colors.Blue, Colors.Magenta, Colors.Cyan, Colors.Yellow)
    mlc1.LineAxisDependency = "RIGHT"
 
    mlc1.Line_1_Data = Array As Float(56.2, 78.3, 22.4, 55.4, 69.4, 103.8, 45.7, 36.4, 62.4, 44.6, 36.4, 70.5)
    mlc1.Line_2_Data = Array As Float(36.4, 110.5, 56.2, 78.3, 22.4, 55.4, 69.4, 103.8, 45.7, 36.4, 62.4, 44.6)
    mlc1.Line_3_Data = Array As Float(62.4, 44.6, 36.4, 110.5, 56.2, 78.3, 22.4, 55.4, 69.4, 103.8, 45.7, 36.4)
    mlc1.Line_4_Data = Array As Float(45.7, 36.4, 62.4, 44.6, 36.4, 110.5, 56.2, 78.3, 22.4, 55.4, 69.4, 103.8)
    mlc1.Line_5_Data = Array As Float(69.4, 103.8, 45.7, 36.4, 62.4, 44.6, 36.4, 120.5, 56.2, 78.3, 22.4, 55.4)
 
    mlc1.DrawLineValues = Array As Boolean(True, True, True, True, True)
    mlc1.LineValueTextColor = Array As Int(Colors.Green, Colors.Blue, Colors.Magenta, Colors.Cyan, Colors.Yellow)
    mlc1.LineValueTextSize = 15.0
    mlc1.CubicIntensity = Array As Float(0.2, 0.2, 0.2, 0.2, 0.2)
    mlc1.DrawCubicGraph = Array As Boolean(True, True, True, True, True)
    mlc1.DrawGraphHollowCircles = Array As Boolean(True, True, True, True, True)
    mlc1.GraphCircleColor = Array As Int(Colors.Yellow, Colors.Green, Colors.Blue, Colors.Magenta, Colors.Cyan)
    mlc1.GraphCircleSize = Array As Float(4.0, 5.0, 6.0, 5.0, 4.0)
    mlc1.GraphLineWidth = Array As Float(3.5, 4.0, 4.5, 5.0, 5.5)
    mlc1.DrawDashedLine = Array As Boolean(True, False, True, False, True)

'******************************************** X, Y LEFT, Y RIGHT AXIS SETUP STARTS HERE
    mlc1.RightYaxisTextColor = Colors.Green
    mlc1.RightYaxisTextSize = 15.0
    mlc1.ShowYaxisRightLabels = True
    mlc1.DrawYaxisRightGridLines = True
    mlc1.DrawRightGridDashed = True
 
    mlc1.LeftYaxisTextColor = Colors.Yellow
    mlc1.LeftYaxisTextSize = 25.0
    mlc1.ShowYaxisLeftLabels = True
    mlc1.DrawYaxisLeftGridLines = True
    mlc1.DrawLeftGridDashed = False   
 
    mlc1.HorizontalGridColorLeft = Colors.Yellow
    mlc1.HorizontalGridColorRight = Colors.Green

    mlc1.XaxisLables = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
    mlc1.XaxisTextColor = Colors.Cyan
    mlc1.XaxisTextSize = 15.0
    mlc1.XaxisTextAngle = 15
    mlc1.XaxisLabelPosition = "TOP_INSIDE"
    mlc1.DrawXaxisGridLines = True
    mlc1.VerticalGridColor = Colors.Magenta
 
'********************************************** BAR CHART SETUP STARTS HERE
 
    mlc1.DrawBarChart = True   
    mlc1.BarAxisDependency = "LEFT"
    mlc1.Bar_Data = Array As Float(65.2, 15.3, 22.4, 55.4, 75.4, 38.8, 54.7, 63.4, 26.4, 44.6, 63.4, 60.5)
    mlc1.BarColor = Colors.DarkGray
    mlc1.BarLegendText = "F"
    mlc1.BarValueTextSize = 20.0
    mlc1.BarValueTextColor = Colors.White
    mlc1.DrawBarValues = True
 
'******************************************** SET CHART ANIMATION
 
    mlc1.XAnimate = False
    mlc1.YAnimate = False
    mlc1.XYAnimate = True
    mlc1.ChartAnimationTime = 1500
 
'******************************************** DRAW THE CHARTS ONCE ALL SETUP HAVE BEEN COMPLETED
 
    mlc1.DrawCharts
 
'******************************************* ADD YOUR CODE FROM HERE ONWARDS TO SAVE THE GRAPH OR TO RETURN THE BITMAP.
'                                            REMEMBER TO ADD A TIME DELAY BEFORE ATTEMPTING TO SAVE OR BEFORE RETURNING
'                                            THE BITMAP IF ANY OF THE 3 POSSIBLE CHART ANIMATIONS HAS BEEN SET TO TRUE (SEE CODE ABOVE)

End Sub

Sub Activity_Resume
 


End Sub

Sub Activity_Pause (UserClosed As Boolean)
 


End Sub
Click to expand...
I try to use this chart, but i get index error if i use less than 12 data...

I Use the sample above but i reduce it to only below 12 data and MpChartLib v 1.20 from first post
How i do solve it ? Thank you 🙏


Error occurred on line: 127 (Main)
java.lang.ArrayIndexOutOfBoundsException: length=10; index=10
at mpandroidchartwrapper.multiLineBarChartWrapper.generateLineData1(multiLineBarChartWrapper.java:388)
at mpandroidchartwrapper.multiLineBarChartWrapper.DrawCharts(multiLineBarChartWrapper.java:337)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.shell.Shell.runVoidMethod(Shell.java:777)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:354)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:157)
at JHS.MPMultiLineBarChart.main.afterFirstLayout(main.java:105)
at JHS.MPMultiLineBarChart.main.access$000(main.java:17)
at JHS.MPMultiLineBarChart.main$WaitForLayout.run(main.java:83)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:223)
at android.app.ActivityThread.main(ActivityThread.java:7698)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
 
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
fwizardy said:
I try to use this chart, but i get index error if i use less than 12 data...

I Use the sample above but i reduce it to only below 12 data and MpChartLib v 1.20 from first post
How i do solve it ? Thank you 🙏


Error occurred on line: 127 (Main)
java.lang.ArrayIndexOutOfBoundsException: length=10; index=10
at mpandroidchartwrapper.multiLineBarChartWrapper.generateLineData1(multiLineBarChartWrapper.java:388)
at mpandroidchartwrapper.multiLineBarChartWrapper.DrawCharts(multiLineBarChartWrapper.java:337)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.shell.Shell.runVoidMethod(Shell.java:777)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:354)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:157)
at JHS.MPMultiLineBarChart.main.afterFirstLayout(main.java:105)
at JHS.MPMultiLineBarChart.main.access$000(main.java:17)
at JHS.MPMultiLineBarChart.main$WaitForLayout.run(main.java:83)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:223)
at android.app.ActivityThread.main(ActivityThread.java:7698)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
Click to expand...
Try with the attached - The library should show as V1.21 in the B4A IDE

Have also posted V1.21 in Post #1 of this thread
 

Attachments

  • mpChartLib.zip
    358 KB · Views: 35
  • b4aMPMultiLineBarChart.zip
    29.5 KB · Views: 32
F

fwizardy

New Member
Thank you... It Work....
👍

As you can see there should be significant digit on chart, but now is not (the show of marker is same without significant digit).
can we have like multilinechart, it will be zero without significant digit if zero, but if there is value, we can set the significant digit.

Or how can i set it ?
Snap2.png


Thank you
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
fwizardy said:
Thank you... It Work....
👍

As you can see there should be significant digit on chart, but now is not (the show of marker is same without significant digit).
can we have like multilinechart, it will be zero without significant digit if zero, but if there is value, we can set the significant digit.

Or how can i set it ?View attachment 149650

Thank you
Click to expand...

Try with the attached project and lib files - It should show as V1.22 in the IDE

This is where I leave this project.....

1.png
 

Attachments

  • mpChartLibV1.22.zip
    359.2 KB · Views: 52
  • b4aMPMultiLineBarChart.zip
    29.6 KB · Views: 43
M

mhk1368

Member
hi
I have data as below which has null value in some places, I want this data not to be shown and the chart is divided into several pieces. It means several separate graphs. The number of these points may reach 100 points. How can I do this? I saw somewhere that you posted a solution, but that command doesn't work anymore, and it only removed the zero points.
https://www.b4x.com/android/forum/threads/mpandroidcharts-skipping-a-value.111796/post-697284
https://stackoverflow.com/questions/50407907/how-to-make-empty-space-in-a-linechart

B4X: 
mbc1.LegendText = Array As String("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20","21", "22", "23", "24")
mbc1.ChartData = Array As Float(52, null, null, 70, -48, 0, 0, 79, null, 6.05, 5.5, 55, 0, 0, -3, 20, 48.0, 38.0, 25.0, 53.0, 66.0, 46.0, 67.0, 75.0)


0zwWc.jpg
 
Last edited:
You must log in or register to reply here.

Similar Threads

f0raster0
  • Question
Android Question Realtime Chart options
Replies
9
Views
943
klaus
klaus
AlpVir
  • Question
Android Question MPAndroidCharts - Spurious horizontal lines
Replies
11
Views
2K
AlpVir
AlpVir
A
  • Question
Android Question How can I get hit position of MPAndroidCharts
Replies
0
Views
827
Adamdam
A
wimpie3
  • Question
Android Question MPAndroidCharts - skipping a value
Replies
8
Views
5K
wimpie3
wimpie3
awakenblueheart
  • Question
Android Question MPAndroidCharts - Error
Replies
6
Views
2K
Duque
Duque
Top