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

Johan Schoeman · Sep 5, 2015

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

Green slice touched ...

Pie Chart rotated with finger...

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

Johan Schoeman · Apr 13, 2016

dusanpon said:
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 · Apr 13, 2016

dusanpon said:
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 · Apr 13, 2016

Johan Schoeman said:
....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 · Apr 13, 2016

dusanpon said:
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!

JNG · Apr 14, 2016

Thanks Johan Its working now

regards

Mikonios · Apr 27, 2016

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

Mahares · Apr 27, 2016

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 · Apr 27, 2016

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 · Apr 27, 2016

phukol said:
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

phukol · Apr 27, 2016

Thanks, i did not notice that property.

Mikonios · Apr 27, 2016

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

Mahares · Apr 28, 2016

I ran the exact project you posted and only commented those 2 lines I mentioned in post 167. as you can see the blue 6th graph is there. Perhaps you are using a different library as Johan update the lib a few times. If this does not solve your problem, I hope Johan can intervene. Here is a link to the graph I obtained: https://www.dropbox.com/s/yr4buvcmfuzd64g/MultiLine042716.doc?dl=0

Mikonios · Apr 28, 2016

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 · Apr 30, 2016

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.

Johan Schoeman · May 4, 2016

lazreg said:
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/

M.LAZ · May 4, 2016

you are awesome,, thank you so much

Descartex · May 21, 2016

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 · May 21, 2016

Descartex said:
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 · May 22, 2016

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

Johan Schoeman · May 22, 2016

Mikonios said:

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?

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

Attachments

Expert

Expert

New Member

Expert

Member

Active Member

Attachments

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Well-Known Member

Expert

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency