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,408
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,494
  • mpChartLibV1.15.zip
    355.2 KB · Views: 609
  • mpChartLibV1.16.zip
    355.7 KB · Views: 609
  • mpChartLibV1.17.zip
    355.8 KB · Views: 776
  • mpChartLibV1.18.zip
    356.4 KB · Views: 686
  • mpChartLibV1.20.zip
    358.1 KB · Views: 468
  • mpChartLibV1.21.zip
    358 KB · Views: 41
  • mpChartLibV1.22.zip
    359.2 KB · Views: 66
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Thanks, but I had those files copied already.
I have tried once more to run your example from the post, and your example works fine. Then I created a new file and copied the complete source (lines 1 to including 225) from your example into the newly created file thus erasing the initial content of the newly created file. Then I copied the files from "drawable" folder into the corresponding place in the newly created project, made sure that they are "read-only" and activated the same libraries as are active in your example. No other changes were made.
Compiling of the newly created program works fine, no error messages there. There is, however, a warning message "Variable 'mlc1' was not initialized", this I have just noticed. Then the program starts on Samsung P6800, and crashes with the message: "Error occured on line 167 (Main)" and "Resources not found exception...."
I apologize for such stupid problems of mine, but no start is simple. Thanks for your help.
Regards

Dušan
What about the /Object/res/layout folder? Do you have the 4 XML files in it?
 

Johan Schoeman

Expert
Licensed User
Longtime User
Thanks, but I had those files copied already.
I have tried once more to run your example from the post, and your example works fine. Then I created a new file and copied the complete source (lines 1 to including 225) from your example into the newly created file thus erasing the initial content of the newly created file. Then I copied the files from "drawable" folder into the corresponding place in the newly created project, made sure that they are "read-only" and activated the same libraries as are active in your example. No other changes were made.
Compiling of the newly created program works fine, no error messages there. There is, however, a warning message "Variable 'mlc1' was not initialized", this I have just noticed. Then the program starts on Samsung P6800, and crashes with the message: "Error occured on line 167 (Main)" and "Resources not found exception...."
I apologize for such stupid problems of mine, but no start is simple. Thanks for your help.
Regards

Dušan
....also, have you added a customview to your project with the correct type and named it mlc1?
 

dusanpon

New Member
Licensed User
Longtime User
....also, have you added a customview to your project with the correct type and named it mlc1?

The 4 xml files were not there, but are there now; I copied those from your demo. It works now!
So it looks I have to copy the content of \drawable and \layout dirs to make it run. Thanks! Please have a beer on my account.
Regards

Dušan
 

Johan Schoeman

Expert
Licensed User
Longtime User
The 4 xml files were not there, but are there now; I copied those from your demo. It works now!
So it looks I have to copy the content of \drawable and \layout dirs to make it run. Thanks! Please have a beer on my account.
Regards

Dušan
Yes, the 4 files in the /drawable folder and the 4 in the /layout folder work together. And thanks - much appreciated. Will have a beer or two!
 

Mikonios

Active Member
Licensed User
Longtime User
I need help ...
In the example attached should show 5 lines adjusted to the left to see perfectly. And a line should be adjusted to the right that I am unable to display it.
Anyone can help me and tell me where I'm wrong ????
Thank you very much !!!!

MPChart.jpg
 

Attachments

  • MPMikonios.zip
    348.9 KB · Views: 185

Mahares

Expert
Licensed User
Longtime User
If you comment these 2 lines, your 6th graph will show up on the right axis. I am not sure why, as I have not worked with this library for a few months.
mlc1.YaxisRightMaxVal = 75
mlc1.YaxisRightMinVal = 25
 

phukol

Active Member
Licensed User
Longtime User
Hi guys. Just want to ask how can i disable the rotation of radarchart? i place my charts in a pager so users can swipe available charts left or right however, when i use a radarchart, i have to find a spcific area where the swipe for the pager will work. i just plan to disable the rotation for radarchart so i can have a greater area for swiping the pager.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi guys. Just want to ask how can i disable the rotation of radarchart? i place my charts in a pager so users can swipe available charts left or right however, when i use a radarchart, i have to find a spcific area where the swipe for the pager will work. i just plan to disable the rotation for radarchart so i can have a greater area for swiping the pager.
The method is already in the library. Use it for eg like this i.e after the data has been set:

B4X:
mrc1.setRadarData(1,10)
mrc1.RotationEnabled = False
 

Mikonios

Active Member
Licensed User
Longtime User
I comment both lines, but I do not get to see the sixth blue line on the graph.

Here is the problema ::

mlc1.YaxisLeftMaxVal = 1.190
mlc1.YaxisLeftMinVal = 1.110
' mlc1.YaxisRightMaxVal = 50
' mlc1.YaxisRightMinVal = 30

Any other ideas ??
 
Last edited:

Mikonios

Active Member
Licensed User
Longtime User
It is true and you're right.
When I run mode 'Release' it works well.
The problem was in 'Debug' mode with a line in pause before the end of the graph.
Thank you very much Mahares.
 

M.LAZ

Active Member
Licensed User
Longtime User
Hi Johan,,,
Thank u so much for this wrapper,,,
every thing is ok but i 've a comments about :
1- How Could i display all (mlc1.XaxisLables) in X Axis? without hide values of some ( XaxisLables ).

2- is there any availability to draw graphs without changing the Orientation(height > width) ,, cos i try to use wrapper in other Activity not Main ,, every time i load the activity (graph_activity) then i change the orientation to landscape
B4X:
p.SetScreenOrientation(0)  ' 0 for landscape

and as we know the activity will recreate itself again and i lost all my process global variables which i sent them from another activity. any help please..

i am so happy with this Fantastic Wrapper.
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan,,,
Thank u so much for this wrapper,,,
every thing is ok but i 've a comments about :
1- How Could i display all (mlc1.XaxisLables) in X Axis? without hide values of some ( XaxisLables ).

2- is there any availability to draw graphs without changing the Orientation(height > width) ,, cos i try to use wrapper in other Activity not Main ,, every time i load the activity (graph_activity) then i change the orientation to landscape
B4X:
p.SetScreenOrientation(0)  ' 0 for landscape

and as we know the activity will recreate itself again and i lost all my process global variables which i sent them from another activity. any help please..

i am so happy with this Fantastic Wrapper.
See this thread for one activity in landscape and another activity in portrait

https://www.b4x.com/android/forum/threads/landscape-or-portrait.56117/
 

Descartex

Well-Known Member
Licensed User
Longtime User
This is a amazing library!!!
Thumbs up for Johan!!!
Only a question:
Can it work on B4i?
I have to implement the B4i version for the app i'm using it and it would be perfect if i can use it also there.
Regards!!
 

Johan Schoeman

Expert
Licensed User
Longtime User
This is a amazing library!!!
Thumbs up for Johan!!!
Only a question:
Can it work on B4i?
I have to implement the B4i version for the app i'm using it and it would be perfect if i can use it also there.
Regards!!
Unfortunately not B4I compatible....
 

Mikonios

Active Member
Licensed User
Longtime User
Hello again Johan
I'm trying to show the graphic with displacements TopBottom & RightLeft and am not able to generate with the following code.
It is possible to make?

B4X:
    Dim r As Int = 2
    Select r
        Case 0: mlc1.XYAnimate=False: mlc1.YAnimate=False : mlc1.XAnimate=False   ' NoAnimate
        Case 1: mlc1.XYAnimate=False: mlc1.YAnimate= False : mlc1.XAnimate= True    ' LeftToRight
        Case 2: mlc1.XYAnimate=False: mlc1.YAnimate=True  : mlc1.XAnimate=False   ' BottomToTop
        Case 3: mlc1.XYAnimate= False: mlc1.YAnimate=True  : mlc1.XAnimate=True    ' BottomToTop
        Case 4: mlc1.XYAnimate=True: mlc1.YAnimate=False : mlc1.XAnimate=False   ' BottomToTop
        Case 5: mlc1.XYAnimate=True: mlc1.YAnimate=False : mlc1.XAnimate=True    ' BottomToTop
        Case 6: mlc1.XYAnimate=True: mlc1.YAnimate=True  : mlc1.XAnimate=False   ' BottomToTop
        Case 7: mlc1.XYAnimate=True: mlc1.YAnimate=True  : mlc1.XAnimate=True    ' BottomToTop
    End Select
 
    mlc1.ChartAnimationTime     = 2000                     'milliseconds
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Hello again Johan
I'm trying to show the graphic with displacements TopBottom & RightLeft and am not able to generate with the following code.
It is possible to make?

B4X:
    Dim r As Int = 2
    Select r
        Case 0: mlc1.XYAnimate    = False:    mlc1.YAnimate    = False :    mlc1.XAnimate    = False   ' NoAnimate
        Case 1: mlc1.XYAnimate    = False:    mlc1.YAnimate    = False :    mlc1.XAnimate    = True    ' LeftToRight
        Case 2: mlc1.XYAnimate    = False:    mlc1.YAnimate    = True  :    mlc1.XAnimate    = False   ' BottomToTop
        Case 3: mlc1.XYAnimate    = False:    mlc1.YAnimate    = True  :    mlc1.XAnimate    = True    ' BottomToTop
        Case 4: mlc1.XYAnimate    = True:     mlc1.YAnimate    = False :    mlc1.XAnimate    = False   ' BottomToTop
        Case 5: mlc1.XYAnimate    = True:     mlc1.YAnimate    = False :    mlc1.XAnimate    = True    ' BottomToTop
        Case 6: mlc1.XYAnimate    = True:     mlc1.YAnimate    = True  :    mlc1.XAnimate    = False   ' BottomToTop
        Case 7: mlc1.XYAnimate    = True:     mlc1.YAnimate    = True  :    mlc1.XAnimate    = True    ' BottomToTop
    End Select
  
    mlc1.ChartAnimationTime     = 2000                     'milliseconds
Don't know- what does it do/not do when you run the above code?
 
Top