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

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...

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...

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...