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,415
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,504
  • mpChartLibV1.15.zip
    355.2 KB · Views: 619
  • mpChartLibV1.16.zip
    355.7 KB · Views: 618
  • mpChartLibV1.17.zip
    355.8 KB · Views: 785
  • mpChartLibV1.18.zip
    356.4 KB · Views: 697
  • mpChartLibV1.20.zip
    358.1 KB · Views: 480
  • mpChartLibV1.21.zip
    358 KB · Views: 51
  • mpChartLibV1.22.zip
    359.2 KB · Views: 79
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
If you scroll right code, you can see the result ....
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
Ok. Can you probe with this XampleProject ?
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
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!
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: 250

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

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
Hi, Johan.
I´ve tested the update, but it fails on assign more of 5 charts.



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

des.png
 

Descartex

Well-Known Member
Licensed User
Longtime User
Yes, was my mistake... sorry.
I was passing an empty array on the 6th position :D
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
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.
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
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
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
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.
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....

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

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

Regards,
RAD
 

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
Top