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

Johan Schoeman

Expert
Licensed User
Longtime User
Mikonios said:
If you scroll right code, you can see the result ....
Click to expand...
Yes, I have seen your code but what does it do/don't do when you run the code? I am not going to create a project to test your code. Upload a sample project and then I will take a look.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Mikonios said:
Ok. Can you probe with this XampleProject ?
Click to expand...
Do just this:
B4X: 
            Dim r As Int = NroMov
            Select r
                Case 0: mlc1.YAnimate    = False :    mlc1.XAnimate    = False    ' NoAnimate
                Case 1: mlc1.YAnimate    = False :    mlc1.XAnimate    = True    ' LeftToRight
                Case 2: mlc1.YAnimate    = True  :    mlc1.XAnimate    = False ' BottomToTop
                Case 3: mlc1.YAnimate    = True  :    mlc1.XAnimate    = True    ' BottomToTop
                Case 4: mlc1.YAnimate    = False :    mlc1.XAnimate    = False    ' BottomToTop
                Case 5: mlc1.YAnimate    = False :    mlc1.XAnimate    = True    ' BottomToTop
                Case 6: mlc1.YAnimate    = True  :    mlc1.XAnimate    = False    ' BottomToTop
                Case 7: mlc1.YAnimate    = True  :    mlc1.XAnimate    = True    ' BottomToTop
            End Select
 

Mikonios

Active Member
Licensed User
Longtime User
Okay. From what I understand of your answer, the library does not allow displacement of the lines
graphic TopToButtom nor allows displacement of the graph lines RightToLeft.

Otherwise you tell me how?
Thank you!
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Mikonios said:
Okay. From what I understand of your answer, the library does not allow displacement of the lines
graphic TopToButtom nor allows displacement of the graph lines RightToLeft.

Otherwise you tell me how?
Thank you!
Click to expand...
The animation in the library is only from left to right and/or from bottom to top
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Posting updated B4A library files as requested by @Descartex. It allows for 7 x vertical bar graphs when using MultiBarChart eg
B4X: 
Private mlc1  As MultiBarChart

Have not tested it - but I guess it should be OK
 

Attachments

  • mpChartLibAdded7VerticalBar.zip
    354.1 KB · Views: 329

Descartex

Well-Known Member
Licensed User
Longtime User
Hi, Johan.
I´ve tested the update, but it fails on assign more of 5 charts.

java.lang.ArrayIndexOutOfBoundsException: length=5; index=5
at mpandroidchartwrapper.multiBarChartWrapper.setBarData(multiBarChartWrapper.java:537)
...
Click to expand...

The line that raises the error is this:
B4X: 
Method3Bars.setBarData(7,xAxisMethod3.Length)

But if i change it to:
B4X: 
Method3Bars.setBarData(5,xAxisMethod3.Length)
It works good, but only shows the 5 first charts.

Thanks for your hurry.
 

Johan Schoeman

Expert
Licensed User
Longtime User
You must be doing something wrong. This code works (7 bar charts):

B4X: 
    mlc1.ChartDescription = "TITLE : Just some random data"
    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", "2016", "2017")


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

    mlc1.YaxisTextSize = 10.0
    mlc1.YaxisTextColor = Colors.White
   
'   We are going to draw 5 charts/graphs
    mlc1.Chart_1_Data = Array As Float(1100.0, 550.0, 550.0, -300.0, 600.5, 445.0, 849.7, -250.4, -380.2, 345.0, 453.5, 783.7)
    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(836.4, 1010.8, 985.6, 676.5, 1100.0, 730.0, 960.0, 450.0, 750.0, 1200, 1134.8, 736.1)   
    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(1050.0, 850.0, 650.0, 1400.0, 760.8, -450.7, 934.9, 576.2, 896.4, -380.6, 636.7, 1215.9)   
    mlc1.Chart_6_Data = Array As Float(950.0, 750.0, 550.0, 1300.0, 660.8, -450.7, 834.9, 476.2, 796.4, -480.6, 536.7, 1115.9)       
    mlc1.Chart_7_Data = Array As Float(850.0, 850.0, 450.0, 1400.0, 560.8, -350.7, 934.9, 676.2, 896.4, -280.6, 736.7, 1015.9)           
   

    mlc1.DrawGraphValues = Array As Boolean(True, True, False, True, False, True, True)   
   
'   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.BarColors = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan, Colors.Magenta, Colors.Gray)
   
    mlc1.XaxisTextColor = Colors.Cyan
    mlc1.XaxisTextSize = 12.0   
    mlc1.XaxisLables = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
'  TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc1.XaxisLabelPosition = "BOTTOM"
   
    mlc1.YaxisMinVal = -600           'commented it out so that the scale will be set automatically
    mlc1.YaxisMaxVal = 1600           'commented it out so that the scale will be set automatically
    mlc1.YaxisTextSize = 10.0
    mlc1.YaxisTextColor = Colors.White   
    mlc1.ShowYaxisRightLabels = False
   
    mlc1.MarkerToUse = 1
   
    mlc1.XAnimate = False
    mlc1.YAnimate = True
    mlc1.XYAnimate = False
    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.setBarData(7,12)

 

Descartex

Well-Known Member
Licensed User
Longtime User
Yes, was my mistake... sorry.
I was passing an empty array on the 6th position
Thanks a lot!!!
 

wimpie3

Well-Known Member
Licensed User
Longtime User
Johan, are you going to continue to work on this library? Version 3.0 is now in beta, the latest commits for version 2 were on May 27nd.
 

MarcoRome

Expert
Licensed User
Longtime User
I think it is the GREAT library of graphics that exists. Really wonderfull work....and therefore he should be rewarded Johan with a small donation by all
 

Johan Schoeman

Expert
Licensed User
Longtime User
wimpie3 said:
Johan, are you going to continue to work on this library? Version 3.0 is now in beta, the latest commits for version 2 were on May 27nd.
Click to expand...
Wimpie, I have butchered the original code so much to accommodate special requests from various members that I don't think the lib as it stands can be easily adapted to whatever new features might have been added in the latest version. What does the new version bring to the party that is not already available in the version that I have wrapped? I have amended the code to accommodate some requests that were not available in the original code - mostly driven by @Mahares
 

rad

Member
Licensed User
Longtime User
Hi....

Can anyone help me to find what is wrong with my test of multilinechart...

B4X: 
#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 sm As SlidingMenu
   
    Private mlc1  As MultiLineChart       
    Private TabHost1 As TabHost   
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:

    'Initialize Sliding Menu
    sm.Initialize("sm")
    Dim offset As Int = 60%x
    sm.BehindOffset = offset
    sm.Mode = sm.LEFT
   
    Dim lv1 As ListView
    lv1.Initialize("lv1")
    For i = 1 To 10
        lv1.AddSingleLine("Action "  & i)
    Next
    sm.SecondaryMenu.AddView(lv1, 0, 0, 100%x - offset, 100%y)
   
    Dim b1, b2 As Button
    b1.Initialize("b1")
    b2.Initialize("b2")
    b1.Text = "Production Weekly Review"
    b2.Text = "Second Button"
    sm.Menu.AddView(b1, 10dip, 10dip, 100%x - offset - 20dip, 50dip)
    sm.Menu.AddView(b2, 10dip, 60dip, 100%x - offset - 20dip, 50dip)      
    '--------------------------

    'Initialize Charts
    TabHost1.Initialize("TabHost1")
    Activity.AddView(TabHost1, 0,0,100%x,100%y)   
   
    Dim p1,p2 As Panel
    p1.Initialize("")
    p2.Initialize("")

    Activity.AddView(p1,0, 50dip, TabHost1.Width, TabHost1.Height-50dip)
    Activity.AddView(p2,0, 50dip, TabHost1.Width, TabHost1.Height-50dip)

    TabHost1.AddTab2("OB Removal", p1)
    TabHost1.AddTab2("Next Tab Item", p2)

    mlc1.Initialize("mlc1")
    p1.AddView(mlc1,0,0,p1.Width,p1.Height)

       
    mlc1.ChartDescription = "* Kilogram"
    mlc1.ChartDescriptionColor = Colors.White
    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("Plan", "Actual")


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

    mlc1.YaxisTextSize = 9.0
    mlc1.YaxisTextColor = Colors.White
   
'   We are going to draw 5 charts/graphs
    mlc1.Chart_1_Data = Array As Float(800.0, 550.0, 550.0, 300.0, 600.5, 445.0, 849.7, 250.4, 380.2, 345.0, 453.5, 783.7)
    mlc1.Chart_2_Data = Array As Float(1200.0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)   
   
    mlc1.DrawGraphValues = Array As Boolean(True, True)   
   
'   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)
    mlc1.GraphLineWidth = Array As Float(2.0, 3.0)
    mlc1.DrawFilled = Array As Boolean(True, True)
   
    mlc1.XaxisTextColor = Colors.Cyan
    mlc1.XaxisTextSize = 10.0   
    mlc1.XaxisLables = Array As String("W31.08/16", "W32.08/16", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
'  TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc1.XaxisLabelPosition = "BOTTOM"
   
'   mlc1.YaxisMinVal = -600           'commented it out so that the scale will be set automatically
'    mlc1.YaxisMaxVal = 1600           'commented it out so that the scale will be set automatically
    mlc1.YaxisTextSize = 10.0
    mlc1.YaxisTextColor = Colors.White   
    mlc1.ShowYaxisRightLabels = False
   
    mlc1.CubicIntensity = Array As Float(0.1, 0.2)
    mlc1.DrawCubicGraph = Array As Boolean(True, False)
    mlc1.DrawDashedLine = Array As Boolean(True, False)
    mlc1.GraphCircleSize = Array As Float(4.0, 5.0)
    mlc1.GraphCircleColor = Array As Int(Colors.Red, Colors.Green)
    mlc1.DrawGraphHollowCircles = Array As Boolean(True, False)
    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(2,12)
    '-----------------------------------
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub lv1_ItemClick (Position As Int, Value As Object)
    Log(Value)
    sm.HideMenus
End Sub

Sub Activity_KeyPress (KeyCode As Int) As Boolean
    If KeyCode = KeyCodes.KEYCODE_BACK And sm.Visible Then
        sm.HideMenus
        Return True
    End If
    Return False
End Sub

Sub B1_Click
    StartActivity("ProWeeklyRev")
       sm.HideMenus
End Sub

Sub B2_Click
    Log("b2 click")
    sm.HideMenus
End Sub

Sub btnMenu_Click
    sm.ShowMenu
End Sub


My Test Application just run out when executing "mlc1.setLineData(2,12)"

Thanks B4 & Regards,
RAD
 

Johan Schoeman

Expert
Licensed User
Longtime User
Do you have the 4 files in the /drawable folder and the 4 in the /layout folder of your project?
 

rad

Member
Licensed User
Longtime User
Hi Johan, thanks to answer my question,
I only have 2 files in my "Additional Libraries", mpChartLib.xml and mpChartLib.jar.

What files did I missed....?
 

rad

Member
Licensed User
Longtime User
Dear Johan,

I have download and test this library and sample code from post #12. And the results was run successfully.
But when I try in my existing application, my application just to out when executing "mlc1.setLineData(2,12)"
 

rad

Member
Licensed User
Longtime User
I have test this bellow code, and its run successfully...

B4X: 
#Region  Project Attributes
    #ApplicationLabel: MPMultiLineChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: true
    #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
    Private TabHost1 As TabHost   
    Private pnlBars As Panel
'    Private Button1 As Button
'    Dim flag As Int = 0
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")

    TabHost1.Initialize("TabHost1")
    Activity.AddView(TabHost1, 0,0,100%x,100%y)   
   

    Dim p As Panel
    p.Initialize("")
    mlc1.Initialize("mlc1")

    Activity.AddView(p,0, 50dip, TabHost1.Width, TabHost1.Height-50dip)
    TabHost1.AddTab2("OB Removal", p)

    pnlBars.Initialize("")
    TabHost1.AddTab2("Apalah", pnlBars)       


    p.AddView(mlc1,0,0,p.Width,p.Height)

       
    mlc1.ChartDescription = "* Kilogram"
    mlc1.ChartDescriptionColor = Colors.White
    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("Plan", "Actual")


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

    mlc1.YaxisTextSize = 9.0
    mlc1.YaxisTextColor = Colors.White

'   We are going to draw 5 charts/graphs
    mlc1.Chart_1_Data = Array As Float(800.0, 550.0, 550.0, 300.0, 600.5, 445.0, 849.7, 250.4, 380.2, 345.0, 453.5, 783.7)
    mlc1.Chart_2_Data = Array As Float(1200.0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)   

   
    mlc1.DrawGraphValues = Array As Boolean(True, True)   
   
'   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)
    mlc1.GraphLineWidth = Array As Float(2.0, 3.0)
    mlc1.DrawFilled = Array As Boolean(True, True)
   
    mlc1.XaxisTextColor = Colors.Cyan
    mlc1.XaxisTextSize = 10.0   
    mlc1.XaxisLables = Array As String("W31.08/16", "W32.08/16", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
'  TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc1.XaxisLabelPosition = "BOTTOM"
   
'    mlc1.YaxisMinVal = -600           'commented it out so that the scale will be set automatically
'    mlc1.YaxisMaxVal = 1600           'commented it out so that the scale will be set automatically
    mlc1.YaxisTextSize = 10.0
    mlc1.YaxisTextColor = Colors.White   
    mlc1.ShowYaxisRightLabels = False
   
    mlc1.CubicIntensity = Array As Float(0.1, 0.2)
    mlc1.DrawCubicGraph = Array As Boolean(True, False)
    mlc1.DrawDashedLine = Array As Boolean(True, False)
    mlc1.GraphCircleSize = Array As Float(4.0, 5.0)
    mlc1.GraphCircleColor = Array As Int(Colors.Red, Colors.Green)
    mlc1.DrawGraphHollowCircles = Array As Boolean(True, False)
    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(2,12)
'    flag = flag + 1

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

And when i copy-paste this codes to my existing application its can not run.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Can you upload your project and then I will take a look at it.
 

rad

Member
Licensed User
Longtime User
Hi Johan Shoeman,

Thanks again, finally I understand what you mean....

Johan Schoeman said:
Do you have the 4 files in the /drawable folder and the 4 in the /layout folder of your project?
Click to expand...

I copied all resources file needed from /drawable & /layout folder to mine... and the chart run as i expected...

Regards,
RAD
 
J

JonRubin

Member
Licensed User
Longtime User
Hi Johan.. Still looking for my rolling ECG graph solution and was wondering how to get to MPChart's chart.setVisibleXRangeMinimum(minBarsToShow) which is essentially chart.setViewPortHandler().setMaximumScaleY(maxBars/minB‌arsToShow)
Thanks... Jon
 

Johan Schoeman

Expert
Licensed User
Longtime User
You must log in or register to reply here.

Similar Threads

  • Question
Android Question what b4x lib recomended for charts ?
Replies
8
Views
731
klaus
  • Question
Android Question Line chart
Replies
1
Views
2K
Cenny
  • Article
B4A Library XCL Charts - 13 Feb 2016 : 3D Horizontal Bar Charts in Post #7
Replies
9
Views
7K
Johan Schoeman
  • Article
B4A Library Android-Charts : Another Charting / Graphing Library - (30 Oct) Added Spider Web Charts
Replies
6
Views
6K
Johan Schoeman
  • Article
B4A Library desCharts - Bar Charts, Line Charts, Stacked Bar Charts, Stacked Line Charts(New update in post #17)
2
Replies
20
Views
9K
Johan Schoeman
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…