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 · Dec 30, 2017

rbghongade said:
Dear Johan,
This is New Year gift! Thanks a lot and have a great new year!

PS: A slight problem!
The y-axis grid spacing is not linear as seen in the screen shot attached.

It is drawing grid lines for both the left and right y-axis. You are forcing the right y-axis to start at zero but not the left. Set them the same.

rbghongade · Dec 30, 2017

Got it, so stupid of me! Thanks.

Peter Simpson · Dec 30, 2017

rbghongade said:
Got it, so stupid of me! Thanks.

Go on, buy @Johan Schoeman a four pack, or at least a McDonalds lol...

davidvidasoft · Jan 18, 2018

HI Johan. I am having some problems implementing the library (v1.12). I have replicated the code of your example but when I run the app I get this

In that line of code is located this:

B4X:

mlcCurrent.LineData = 12   'this number must be the same as the number of elements in the above arrays

Can I have some help here? I've attached my source code

Johan Schoeman · Jan 19, 2018

Does your res folder look like this (see post at this link https://www.b4x.com/android/forum/t...y-files-in-post-338.58017/page-11#post-454961)

davidvidasoft · Jan 19, 2018

@Johan Schoeman, thanks. That's what I was missing, it works now.

davidvidasoft · Jan 19, 2018

Hi again @Johan Schoeman, I was wondering if it's possible to add new data to the charts. I successfully updated the data in my line chart through a button but can't add new values. How should I do it? I'm asking this because my line chart will work with a combobox as date filter and not all the datasets will have the same length.

EDIT: Ok, it's working as intended. I just needed to also update the legendText to fit the new range of my data.

Johan Hormaza · Apr 8, 2018

Is there a way to pass that library to B4J?
Thank you.
Johan.

Johan Schoeman · Apr 8, 2018

Johan Hormaza said:
Is there a way to pass that library to B4J?
Thank you.
Johan.

Unfortunately not Johan. It uses Android Libraries

Johan Hormaza · Apr 8, 2018

Johan Schoeman said:
Unfortunately not Johan. It uses Android Libraries

Ok Thank. Johan you're the best

Joe73 · Apr 16, 2018

Hello,
the following is possible:?
I want the initial value for a zoom of the X-axis to be
and end value of the current display.
With these values I want to change the labels.
For example, display the date of individual days without zoom and display the date with zoom at the beginning and end and the hours or minutes in between.
Is that possible?
Possibly also 2 lines of labels...?

Many greetings from Jürgen

Translated with www.DeepL.com/Translator

Johan Schoeman · Apr 16, 2018

Joe73 said:
Hello,
the following is possible:?
I want the initial value for a zoom of the X-axis to be
and end value of the current display.
With these values I want to change the labels.
For example, display the date of individual days without zoom and display the date with zoom at the beginning and end and the hours or minutes in between.
Is that possible?
Possibly also 2 lines of labels...?

Many greetings from Jürgen

Translated with www.DeepL.com/Translator

Unfortunately not Jurgen. Not unless I go and spend a whole lot of time on the original project that I have wrapped and try to add some additional code to it. Not something that I have on my agenda in the near future.

Rgds

Johan

Joe73 · Apr 16, 2018

Hello,

too bad, but I know it takes a lot of time...

regards

rtek1000 · May 15, 2018

Johan Schoeman said:
Attached new library files and a B4A project. Made some mods to the library based on feedback received from @Mahares:
1. Setting the number of insignificant digits for each of the 5 possible line graph when the values are displayed inside the chart

B4X:

mlc1.GraphValueDigits = Array As Int(1, 1, 2, 3, 2)

2. Hide the legends of those line charts not being displayed when the legend colors must match that of the line colors

B4X:

mlc1.LegendTextColorsToMatchLineColors = True

3. Set the number of insignificant digits for the marker view - this will be applied to all the line charts in the graph (i.e not per line chart)

B4X:

mlc1.NoOfMarkerDigits = 3

The attached example uses inline Java code to display a toast message when the graph is saved (NOTE: it is saved to the default gallery of your device). Thus, you need to enable the B4A JavaObject library in the library tab of the IDE. When the graph is saved (in the attached example) it is also displayed in an imageview on top of the customview. Click on the imageview to return to the customview (see the toast message when you click on the button to save the graph)

View attachment 40304

Hello guys

How can I add more buttons?
I duplicate the code's instructions and via Designer, but when the graphic is loaded, the additional buttons are hidden.

Note:
I was very impressed with the quality of these charts libraries, but I'm a bit confused:

- the latest library versions do not cover the same functions as the previous ones?

- would it be possible to organize the first post so that the most recent or the most appropriate library can be tried?

I know that a lot of guys who contribute to the community do not have a lot of free time, but it's very confusing to be looking for the latest or most appropriate library on more than 18 pages.

And it also seems like some previous versions are being posted again, which should consume more space on the site data server.

rtek1000 · May 15, 2018

Hello,

How to limit the amount of decimal digits in the Y axis?

I was able to leave the graph with the fixed scale (YaxisRightMaxVal = YaxisLeftMaxVal and YaxisRightMinVal = YaxisLeftMinVal),
but when the data is very close to the beginning of the scale, the Y axis displays more decimal digits.

For example, with data near the end of the scale, the Y axis displays the value "5.0" but when the data is close to the beginning of the scale, the Y axis displays the value "5.0000". When this occurs, the graph automatically adjusts its aspect ratio, making it look like a display defect when it ranges from "5.0" to "5.0000".

(P.S.: Using lib v5)

Johan Schoeman · May 19, 2018

rtek1000 said:
Hello,

How to limit the amount of decimal digits in the Y axis?

I was able to leave the graph with the fixed scale (YaxisRightMaxVal = YaxisLeftMaxVal and YaxisRightMinVal = YaxisLeftMinVal),
but when the data is very close to the beginning of the scale, the Y axis displays more decimal digits.

For example, with data near the end of the scale, the Y axis displays the value "5.0" but when the data is close to the beginning of the scale, the Y axis displays the value "5.0000". When this occurs, the graph automatically adjusts its aspect ratio, making it look like a display defect when it ranges from "5.0" to "5.0000".

(P.S.: Using lib v5)

B4X:

mlc1.YaxisLeftNumberOfDigits = 2
mlc1.YaxisRightNumberOfDigits = 1

kuosda · Jun 12, 2018

HI Johan
You are really powerful
But can I draw multiline of different arrays?
as the picture shows

Alisson · Jun 17, 2018

Johan Schoeman,

I used a module to run your code. This is graph:

The code worked perfectly, but the graph does not stay in landscape.
How can I add the landscape mode in the module?

I've attached an image with the code.

Thank you very much.

Johan Schoeman · Jun 17, 2018

Alisson said:
Johan Schoeman,

I used a module to run your code. This is graph:

View attachment 68962

The code worked perfectly, but the graph does not stay in landscape.
How can I add the landscape mode in the module?

I've attached an image with the code.

View attachment 68963

Thank you very much.

See here
https://www.b4x.com/android/forum/threads/new-module-activity-to-landscape-only.28183/#post-163354

kevinl · Jul 1, 2018

Dear Johan,

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

Thanks and best regards,
Kevin

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

Attachments

Expert

Active Member

Expert

Member

Attachments

Expert

Member

Member

Well-Known Member

Expert

Well-Known Member

Active Member

Expert

Active Member

Active Member

Active Member

Expert

Active Member

Attachments

Active Member

Expert

New Member

Similar Threads

Privacy & Transparency

Privacy & Transparency