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 · Jul 2, 2018

kevinl said:
Dear Johan,

How can I completely disable/hide the marker view when using the multiLineChart?

Thanks and best regards,
Kevin

Will have to amend the library to do so. Will try to get to it sometime this week.

JS

kevinl · Jul 2, 2018

Much appreciated Johan, thank you in advance!

Johan Schoeman · Jul 3, 2018

Johan Schoeman said:
Will have to amend the library to do so. Will try to get to it sometime this week.

JS

Here you go - lib files attached. It should show as V1.13 in the B4A IDE libs tab

Just set the marker to use to 0

B4X:

mlc1.MarkerToUse = 0

I suggest you leave the files in the /Objects/res/layout and Objects/res/drawable folder. They are however not required to be there when MarkerToUse is set to 0 but when setting MarkerToUse to any other value they MUST be there.

I have applied this change to all the graph types in the library.

JS

kuosda · Jul 4, 2018

Hello Johan Schoeman
Can multiple lines of different arrays be done?

Johan Schoeman · Jul 5, 2018

kuosda said:
Hello Johan Schoeman
Can multiple lines of different arrays be done?

Do you mean different array size? If this is what you mean the the answer is no - unfortunately not.

kuosda · Jul 6, 2018

It’s a pity! If you have it, it's great.
Will you try it?

Johan Schoeman · Jul 8, 2018

kuosda said:
It’s a pity! If you have it, it's great.
Will you try it?

Attached is the Java code. You are welcome to give it a try.

kuosda · Jul 10, 2018

Thanks! Johan Schoeman
Although my java code knowledge = 0, but I try my best

MAGAREY · Aug 3, 2018

its possible to add animation to the pie chart?

jtare · Aug 16, 2018

Johan Schoeman said:
Unfortunately not as the library stands at present unless you superimpose two charts on top of one another with transparency in the right places.

Is there any solution to this? Searching I found that there is a way to combine charts, but there is only the same example of bar charts and lines charts, not candlestick and lines or candlesticks and points.
Thanks.

Seems possible: https://github.com/PhilJay/MPAndroi...per/mpchartexample/CombinedChartActivity.java

EDIT:
I got it to work. I edited the source code from the combine bar chart and line chart. Now I can draw a candlestick chart and a line chart. Now I will try candlestick+multiline+multibubble+multiscatter.

liurenwoxing · Aug 30, 2018

Hi,
As the below pic,why the MarkerDigits is "," instead of "." ?

loonet · Mar 15, 2019

Hi everybody, Is there any way to set the color of crosshair cursor lines ?
Thanks !

Johan Schoeman · Mar 16, 2019

loonet said:
Hi everybody, Is there any way to set the color of crosshair cursor lines ?
Thanks !

Have not looked at the lib in a very long time but from memory it takes the color of the line/chart that you have clicked on. This lib is probably outdated and someone can perhaps try and wrap the latest version of this Github project and in all probability do it far better than what I have done. Done this in my early days of trying to do wrappers.

loonet · Mar 16, 2019

Johan Schoeman said:
Have not looked at the lib in a very long time but from memory it takes the color of the line/chart that you have clicked on. This lib is probably outdated and someone can perhaps try and wrap the latest version of this Github project and in all probability do it far better than what I have done. Done this in my early days of trying to do wrappers.

Thanks, its outdated but anyway usefull. Thanks for your reply

Johan Schoeman · Mar 24, 2019

loonet said:
Hi everybody, Is there any way to set the color of crosshair cursor lines ?
Thanks !

Use the attached lib files (copy them to your additional libs folder. Have added the ability to set the color and the width of the cross hair to multilinecharts, radarcharts, and linecharts (single) for now.

Lib should show as V1.14

Example code from multilinechart:

B4X:

    mlc1.HighlightLineWidth = 2.0f
    mlc1.CrossHairColor = Array As Int(Colors.White, Colors.Yellow, Colors.White, Colors.Yellow, Colors.White, Colors.Yellow, Colors.White, Colors.Yellow, Colors.White, Colors.Yellow)
    
    mlc1.setLineData(10,37)

I need to do some method naming changes in the library at some time or another...

loonet · Mar 25, 2019

Johan Schoeman said:
Use the attached lib files (copy them to your additional libs folder. Have added the ability to set the color and the width of the cross hair to multilinecharts, radarcharts, and linecharts (single) for now.

Lib should show as V1.14

Example code from multilinechart:

B4X:

mlc1.HighlightLineWidth = 2.0f mlc1.CrossHairColor = Array As Int(Colors.White, Colors.Yellow, Colors.White, Colors.Yellow, Colors.White, Colors.Yellow, Colors.White, Colors.Yellow, Colors.White, Colors.Yellow) mlc1.setLineData(10,37)

I need to do some method naming changes in the library at some time or another...

Thanks so much Johan ! I really appreciate the favor you gave me

mico · May 8, 2019

Hi Johan,

Thank you for this great library. I am stuck at getting values from a listview, can you help?

I have two listviews, one for x's and the other for y's. I can succesfully add items and log the values they took with this code:

B4X:

For i=0 To x_list.Size-1 Step 1
m=x_list.GetItem(i)
Log(m)
Next

For j=0 To y_list.Size-1 Step 1
n=y_list.GetItem(j)
Log(n)
Next

But I cannot define these values as x labels and y values in the multiline chart. Is there a way to do it? How can I transfer my "x" values in

B4X:

chart.XaxisLables = Array As String()

and "y" values in

B4X:

chart.Chart_1_Data= Array As Float()

using my values from the related listviews.

Thanks for any help.

Johan Schoeman said:
The attached project adds Multi Line charts. It uses a lot of arrays to set up the individual line graphs within a chart. See the code within the project. You can customize each line graph within a chart to "your liking". It also has a very nice animation when a new chart it drawn. Click on the button at the bottom of the chart to cycle through some examples that I have created in the code.

The pics below is what the code in the project draws at present. You can obviously change your individual graphs to your liking (different X-axis data, different, Y-axis data, colours, etc.). There are lots of methods that can be applied to the charts.

You can draw/display from 1 to 5 line charts (see code in the B4A project). You can also load data for 5 graphs and just display for eg the first 2. It also allows you to for eg only display a defined portion of the X axis (and then obviously the corresponding y-axis values).

It incorporates all of the single line chart functionality in Post #7 above and some more (the pop-up marker views is still there if you touch a data point, etc, etc)

Uploading the B4A project and the new library files.

View attachment 37541

View attachment 37542

View attachment 37543

View attachment 37544

View attachment 37545

View attachment 37546

View attachment 37547

View attachment 37548

Johan Schoeman · May 12, 2019

mico said:
Hi Johan,

Thank you for this great library. I am stuck at getting values from a listview, can you help?

I have two listviews, one for x's and the other for y's. I can succesfully add items and log the values they took with this code:

B4X:

For i=0 To x_list.Size-1 Step 1 m=x_list.GetItem(i) Log(m) Next For j=0 To y_list.Size-1 Step 1 n=y_list.GetItem(j) Log(n) Next

But I cannot define these values as x labels and y values in the multiline chart. Is there a way to do it? How can I transfer my "x" values in

B4X:

chart.XaxisLables = Array As String()

and "y" values in

B4X:

chart.Chart_1_Data= Array As Float()

using my values from the related listviews.

Thanks for any help.

Solved in the PM that you have sent me.

Johan Schoeman · Nov 30, 2019

Have posted V1.15 of the library in post #1 of this thread. Based on a request that comes from here

wimpie3 · Dec 2, 2019

@Johan Schoeman It seems the value of the data point is ALWAYS shown when you click on a data point. I thought I could disable that behavior by passing FALSE to DrawGraphValues, but that only disables the INITIAL showing of the data value. When you touch a data point on the graph, the value is shown no matter what DrawGraphValues is set to.

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

Attachments

Expert

New Member

Expert

Attachments

Active Member

Expert

Active Member

Expert

Attachments

Active Member

Member

Active Member

Member

Member

Expert

Member

Expert

Attachments

Member

Member

Expert

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency