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

RenewMe said:

Hi, i'm having big problems using mpchartlib v1.22 to design a piechart, I can't find any correct documentation to methods and properties.
Please can anyone tell me where to look for ?
Thank you in advance.
Here is my humble code that's not working:

Pie chart code with mpchartlib V1.22:

#Region  Activity Attributes
    #FullScreen: true
    #IncludeTitle: false
#End Region

Sub Process_Globals
    Public ValoriStatistiche() As Float
    Public NomeMacchina As String
    Public DataRiferimento As String
End Sub

Sub Globals
    ' Deve avere lo STESSO nome che hai messo nel Designer
    Private pie As PieChart
    Private lblTitolo As Label
    Private btnChiudi As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' 1. Carica il layout del Designer
    Activity.LoadLayout("ChartPie") ' Sostituisci con il nome del tuo file .bal
    Activity.Color = Colors.RGB(33, 33, 33)
    ' 2. Controllo dati di sicurezza
    If ValoriStatistiche = Null Or ValoriStatistiche.Length < 3 Then
        ValoriStatistiche = Array As Float(0, 0, 0)
    End If

    ' 3. Configurazione Grafica (Proprietà sicure)
    pie.ChartDescription = "Distribuzione Stati"
    pie.ChartDescriptionColor = Colors.LightGray
    pie.DrawHoleEnabled = True
    pie.HoleRadius = 45.0
    pie.CenterText = "STATI MACCHINA"
    pie.CenterTextColor = Colors.White
    pie.UsePercentValues = True
    pie.ValueTextColor = Colors.White
    pie.ValueTextSize = 12
    pie.DrawSliceText = True

    ' 4. CARICAMENTO DATI
    pie.LegendText = Array As String("MARCIA", "EMERGENZA", "ALTRO")
    pie.PieColors = Array As Int(Colors.Green, Colors.Red, Colors.Yellow)
    pie.ChartData = ValoriStatistiche
    pie.PieData = 3

    ' 5. GESTIONE CRITICA LEGENDA
    ' Usiamo un piccolo ritardo per dare tempo alla libreria di creare l'oggetto Legend internamente
    'pie.TheLegendTextColor = Colors.White
    'pie.TheLegendTextSize = 12
    pie.TheLegendPosition = "BELOW_CHART_LEFT"

    'pie.Invalidate

    ' --- UI ---
    'lblTitolo.Initialize("")
    lblTitolo.TextColor = Colors.White
    lblTitolo.TextSize = 16
    lblTitolo.Gravity = Gravity.CENTER
    lblTitolo.Text = "REPORT: " & NomeMacchina & CRLF & DataRiferimento
    Activity.AddView(lblTitolo, 0, 5dip, 100%x, 60dip)

    btnChiudi.Text = "CHIUDI"
    btnChiudi.Color = Colors.RGB(200, 0, 0)
End Sub

Sub btnChiudi_Click
    Activity.Finish
End Sub

Click to expand...

Johan Schoeman said:

Please zip your b4a project and upload it so that I can take a look at it. The project in post #1 should be suffiencient to a pie chart.

Click to expand...

RenewMe said:

Thank you

Click to expand...

Johan Schoeman said:

What Datepicker library / class are you using in your project? I do not have that library in my B4A libraries folder

Click to expand...