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,463
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,556
  • mpChartLibV1.15.zip
    355.2 KB · Views: 654
  • mpChartLibV1.16.zip
    355.7 KB · Views: 652
  • mpChartLibV1.17.zip
    355.8 KB · Views: 821
  • mpChartLibV1.18.zip
    356.4 KB · Views: 730
  • mpChartLibV1.20.zip
    358.1 KB · Views: 518
  • mpChartLibV1.21.zip
    358 KB · Views: 87
  • mpChartLibV1.22.zip
    359.2 KB · Views: 132
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan, first of all thanks for your job. But, in my app when i divide the x axis by day and when the number is zero, 0.0 is orrible. I prefer 0

No problem, currently my app is for me and not for the market.

OK - have changed the code. It will display 0 if the value is 0 only and will display x.x for any non-zero value. Use new lib files attached.

1.png
 

Attachments

  • mpChartLibFiles.zip
    311.2 KB · Views: 327

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan

Thanks for your great multilinechart lib.

Would I be able to set the x-axis and y-axis intervals. I have 100 points to plot and I want to set the intervals to 20 for x and y major grid lines. Is that possible?

Also, I am unclear on what the following does
- DesignerCreateView
- MaxVisibleValueCount

Thanks.

This is the best that the original code will allow one to do without doing surgery on the original code:

B4X:
mlc1.XaxisLabelsToSkip =  xxxx
mlc1.YaxisLeftLabelCount = xxxx

Read the help on the above two methods when you for eg type mlc1.(and then search for YaxisLeftLabelCount and XaxisLabelsToSkip in the dropdown list). Posting the new library files as well as a B4A project demonstrating these two methods. The methods are simple to use/figure out - just read the help and see the example project attached.


1.png


Some sample code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: DT1111
    #VersionCode: 3
    #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 MultiLineChart

   
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")
   
    DrawGraph
   
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub DrawGraph

       
            mlc1.ChartDescription = "TITLE : Just some random data"   'SORTED OUT DISPLAY OF DESCRIPTION IF NO TITLE IS SET - 22 OCT 2015
            mlc1.ChartDescriptionColor = Colors.Red
            mlc1.ChartDescriptionTextSize = 15   
            mlc1.GridBackgroundColor = Colors.DarkGray
           
        '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
        '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
        '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

        '   CIRCLE, SQUARE, LINE

            mlc1.LegendShapeSize = 10.0
            mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","CIRCLE")
            mlc1.TheLegendColor = Colors.yellow
            mlc1.TheLegendTextSize = 10.0   
            mlc1.LegendText = Array As String("2011", "2012", "2013", "2014", "2015")


            mlc1.ValueTextColor = Array As Int(Colors.White, Colors.Red, Colors.White, Colors.Red, Colors.White)
            mlc1.ValueTextSize = Array As Float(12.0, 10.0, 14.0, 8.0, 16.0)

            mlc1.YaxisTextSize = 10.0
           
        '   We are going to draw 1 charts/graphs
       
            Dim cht1data(101) As Float
            For i = 0 To 100
                cht1data(i) = i * 2
            Next
            mlc1.Chart_1_Data = cht1data
           
           
'            mlc1.Chart_2_Data = Array As Float(1200.0, 750.0, 450.0, 960.0, 730.0, 1100.0, 676.5, 985.6, 1010.8, 836.4, 498.5, 965.3)   
'            mlc1.Chart_3_Data = Array As Float(-10.0, -30.0, -20.0, 50.0, -40.0, 30.0, -45.0, 15.0, -38.3, 18.9, -29.8, 15.7)   
'            mlc1.Chart_4_Data = Array As Float(345.0, -380.2, -250.4, 849.7, 445.0, 600.5, -300.0, 50.0, 550.0, 1100.0, 894.2, 993.8)   
'            mlc1.Chart_5_Data = Array As Float(40.0, 60.0, 50.0, -80.0, 70.0, -60, 75.0, -45.0, 68.3, -48.9, 59.8, -45.7)   
           
            Dim ad() As String = Array As String("LEFT", "LEFT", "LEFT", "LEFT", "LEFT")     'NEW - ADDED Y AXIS DEPENDANCY - 22 OCT 2015
            mlc1.YaxisDependancy = ad                                                           'NEW - ADDED Y AXIS DEPENDANCY - 22 OCT 2015

            mlc1.DrawGraphValues = Array As Boolean(False, True, True, True, False)   
           
        '   Maximum 5 colors to be passed ==> must be at least equal to the number of data sets that are passed i.e maximum 5
        '   If you pass only for eg 2 data sets then at least 2 colors need to be passed
        '   If more that 2 colors are passed with for eg only 2 data sets then only the first 2 colors will be used in the color array
            mlc1.LineColors = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)
            mlc1.GraphLineWidth = Array As Float(2.0, 3.0, 4.0, 5.0, 6.0)
            mlc1.DrawFilled = Array As Boolean(False, False, False, False, False)
           
            mlc1.XaxisTextColor = Colors.Green
            mlc1.XaxisTextSize = 12.0   
           
            Dim xal(101) As String
              For i = 0 To 100
                  xal(i) = i
            Next
            mlc1.XaxisLables = xal
           
        '  TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
            mlc1.XaxisLabelPosition = "BOTTOM"
            mlc1.XaxisTextAngle = 0                           'NEW - 'AMENDED CODE TO SET THE ANGLE OF THE X AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
            mlc1.VerticalGridColor = Colors.Green             'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

            mlc1.DrawXaxisGridLines = True

            mlc1.XaxisLabelsToSkip = 19                       'NEW - ADDED 5 NOV
           
            mlc1.DrawYaxisLeftGridLines = True                'NEW - ADDED 23 OCT 2015
            mlc1.DrawYaxisRightGridLines = False              'NEW - ADDED 23 OCT 2015
           
            mlc1.YaxisLeftMinVal = 0                          'UNCOMMENT ON 5 NOV 2015 TO SET THE MINIMUM OF THE Y AXIS - comment it out so that the scale will be set automatically
            mlc1.YaxisLeftMaxVal = 200                        'UNCOMMENT ON 5 NOV 2015 TO SET THE MAXIMUM OF THE Y AXIS - comment it out so that the scale will be set automatically

        '   mlc1.YaxisRightMinVal = -175                      'AMENDED 22 OCT 2015 TO SET RIGHT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
        '    mlc1.YaxisRightMaxVal = 175                       'AMENDED 22 OCT 2015 TO SET RIGHT Y AXIS MAX VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
           
            mlc1.YaxisTextSize = 10.0
           
            mlc1.YaxisLeftLabelCount = 10                     'NEW - ADDED 5 NOV 2015
'            mlc1.YaxisRightLabelCount = 10
           
            mlc1.YaxisLeftTextColor = Colors.Cyan              'NEW - ADDED 23 OCT 2015    
            mlc1.YaxisRightTextColor = Colors.Yellow          'NEW - ADDED 23 OCT 2015
           
            mlc1.ShowYaxisRightLabels = False
            mlc1.ShowYaxisLeftLabels = True
           
            mlc1.DrawLeftGridDashed = False                   'NEW - ADDED 23 OCT 2015
            mlc1.DrawRightGridDashed = True                   'NEW - ADDED 23 OCT 2015
           
            mlc1.YaxisTextAngle = 0                           'NEW - 'ADDED ABILITY TO SET THE ANGLE OF THE Y AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
            mlc1.HorizontalGridColorLeft = Colors.Cyan        'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
            mlc1.HorizontalGridColorRight = Colors.Yellow     'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
           
            mlc1.CubicIntensity = Array As Float(0.1, 0.2, 0.3, 0.4, 0.5)
            mlc1.DrawCubicGraph = Array As Boolean(True, False, True, False, True)
            mlc1.DrawDashedLine = Array As Boolean(True, False, True, False, True)
            mlc1.GraphCircleSize = Array As Float(4.0, 5.0, 6.0, 7.0, 8.0)
            mlc1.GraphCircleColor = Array As Int(Colors.Red, Colors.Green, Colors.Magenta, Colors.Black, Colors.Blue)
            mlc1.DrawGraphHollowCircles = Array As Boolean(True, False, True, False, True)
            mlc1.MarkerToUse = 4
           
            mlc1.XAnimate = False
            mlc1.YAnimate = True
            mlc1.ChartAnimationTime = 2000                     'milliseconds
           
        '   the number of charts to be drawn (maximum 5, in this case 5)
        '   the number of x-axis values per chart (in this case 12 = number of elements in the array passed to mlc1.XaxisLables)
            mlc1.setLineData( 1,101 )                         '5 NOV 2015 - CHANGED THE VALUE TO 101 TO DRAW THE 101 DATA POINTS

               
   
End Sub
 

Attachments

  • mpChartLibFiles.zip
    311.7 KB · Views: 297
  • b4aDT111.zip
    29.8 KB · Views: 275

DT1111

Member
Licensed User
Longtime User
Hi Johan

Thank you so much for your generous effort and time and the updated library is simply stellar!

Yes the graph does exactly what I have wanted.

Thanks!
 

Johan Schoeman

Expert
Licensed User
Longtime User
@Johan Schoeman:
When you updated the lib to the one in post #63, the Yaxis labels no longer show up except for the first and last point.
Sorry about it - fixed. Had a line commented in the wrapper while I was busy working on @DT1111 's requirements. Attached new lib files.

1.png
 

Attachments

  • b4aDT111.zip
    30.3 KB · Views: 280
  • mpChartLibFiles.zip
    311.7 KB · Views: 310

Johan Schoeman

Expert
Licensed User
Longtime User

DT1111

Member
Licensed User
Longtime User
Hi Johan

Thanks for the suggestion but if my understanding and observation are correct, the XAnimate is purely an animation thing. It requires complete array of x-axis data and then stretches it like a spring when XAnimate'd. Pretty neat though.

Whereas what I have in mind (with respect to the oscilloscope) is when an x-axis data becomes available it get plotted on the graph. Using the y=mx example above, if x is incremented by one every second, the line extends across the the graph one point at a time (the x-axis range is fixed from 0 to 100 from the start). The line will be fully extended at the end of 100 seconds.

Is this possible?
 

Doug Harris

Member
Licensed User
Longtime User
Hello Johan -

After looking at several different charting packages available for B4A, yours appears to blow the others away. I have tried to run several of your examples, but get the same error. This error below is from the MPLineChart example and the error occurs each time the application tries to set the LineData property. Do you have any suggestions?

Error occurred on line: 91 (Main)
android.content.res.Resources$NotFoundException: Resource ID #0x0
at android.content.res.Resources.getValue(Resources.java:1883)
at android.content.res.Resources.loadXmlResourceParser(Resources.java:3028)
at android.content.res.Resources.getLayout(Resources.java:1722)
at android.view.LayoutInflater.inflate(LayoutInflater.java:395)
at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
at com.github.mikephil.charting.components.MarkerView.setupLayoutResource(MarkerView.java:39)
at com.github.mikephil.charting.components.MarkerView.<init>(MarkerView.java:29)
at com.github.mikephil.charting.components.MyMarkerView.<init>(MyMarkerView.java:26)
at mpandroidchartwrapper.lineChartWrapper.setLineData(lineChartWrapper.java:257)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.shell.Shell.runVoidMethod(Shell.java:742)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:342)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:246)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
at JHS.MPLineChart.main.afterFirstLayout(main.java:102)
at JHS.MPLineChart.main.access$000(main.java:17)
at JHS.MPLineChart.main$WaitForLayout.run(main.java:80)
at android.os.Handler.handleCallback(Handler.java:725)
at android.os.Handler.dispatchMessage(Handler.java:92)
at android.os.Looper.loop(Looper.java:175)
at android.app.ActivityThread.main(ActivityThread.java:5279)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1102)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:869)
at dalvik.system.NativeStart.main(Native Method)
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hello Johan -

After looking at several different charting packages available for B4A, yours appears to blow the others away. I have tried to run several of your examples, but get the same error. This error below is from the MPLineChart example and the error occurs each time the application tries to set the LineData property. Do you have any suggestions?

Error occurred on line: 91 (Main)
android.content.res.Resources$NotFoundException: Resource ID #0x0
at android.content.res.Resources.getValue(Resources.java:1883)
at android.content.res.Resources.loadXmlResourceParser(Resources.java:3028)
at android.content.res.Resources.getLayout(Resources.java:1722)
at android.view.LayoutInflater.inflate(LayoutInflater.java:395)
at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
at com.github.mikephil.charting.components.MarkerView.setupLayoutResource(MarkerView.java:39)
at com.github.mikephil.charting.components.MarkerView.<init>(MarkerView.java:29)
at com.github.mikephil.charting.components.MyMarkerView.<init>(MyMarkerView.java:26)
at mpandroidchartwrapper.lineChartWrapper.setLineData(lineChartWrapper.java:257)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.shell.Shell.runVoidMethod(Shell.java:742)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:342)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:246)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
at JHS.MPLineChart.main.afterFirstLayout(main.java:102)
at JHS.MPLineChart.main.access$000(main.java:17)
at JHS.MPLineChart.main$WaitForLayout.run(main.java:80)
at android.os.Handler.handleCallback(Handler.java:725)
at android.os.Handler.dispatchMessage(Handler.java:92)
at android.os.Looper.loop(Looper.java:175)
at android.app.ActivityThread.main(ActivityThread.java:5279)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1102)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:869)
at dalvik.system.NativeStart.main(Native Method)

Doug, read post #12 of this thread. Do you have the files in your Object/res folder and are they set to READ ONLY? I think your project is looking for/can't find the png and xml files for the marker
 
Last edited:

Paulsche

Well-Known Member
Licensed User
Longtime User
Hi Johan,

You can post a little guide,
everything that is necessary during installation?
I do not get a demo to run, have the library files
copied into the Libraries folder, but apparently is not enough that.
 

Attachments

  • log.jpg
    log.jpg
    341.3 KB · Views: 203

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan,

You can post a little guide,
everything that is necessary during installation?
I do not get a demo to run, have the library files
copied into the Libraries folder, but apparently is not enough that.
Not sure why you are stuck and with which one of the demo's. It seems you are stuck with the Pie Chart in post #1 of this thread? Just to make sure:

1. Have you copied the library files to your B4A additional library folder?
2. Have you selected/ticked the library in the library list of your B4A project? I think it is called mpChartLib
 

Paulsche

Well-Known Member
Licensed User
Longtime User
Hi Johan,

You can post a little guide,
everything that is necessary during installation?
I do not get a demo to run, have the library files
copied into the Libraries folder, but apparently is not enough that.

My problem was that I have taken the latest library files with the demo by post 1
The demos in Post 3 works with the Librarie of post 3.
 

Paulsche

Well-Known Member
Licensed User
Longtime User
Hi Johan,

you can take the X-axis as a date?
I want data as of 1.1.15 - 1.6.15 display.
With date as a string label that goes, but the date will be evenly divided between the X-axis and not as a timeline.

Thanks for the Librarie, I'm just the exchange of charts against your great Librarie.
 

Paulsche

Well-Known Member
Licensed User
Longtime User
Hi Johan,

another Problem:
I have a multiline chart with two series,
the second series (temperature) has fewer points,
there is not always a temperature was entered.
This now generates an error when:
multiLineChart1.setLineData (2, dat_list.Size)
Is there a solution?
 

tpakis

Active Member
Licensed User
Longtime User
This library is awesome!!
I was wondering is there any way we can find the points where the line "cuts" the x axis? (the y is relatively easy by calculating the point with x=0)
 
Top