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: 608
  • mpChartLibV1.16.zip
    355.7 KB · Views: 607
  • mpChartLibV1.17.zip
    355.8 KB · Views: 775
  • mpChartLibV1.18.zip
    356.4 KB · Views: 685
  • mpChartLibV1.20.zip
    358.1 KB · Views: 467
  • mpChartLibV1.21.zip
    358 KB · Views: 41
  • mpChartLibV1.22.zip
    359.2 KB · Views: 66
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
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.
 

davidvidasoft

Member
Licensed User
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

MUB5bDJ.png


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
 

Attachments

  • proj.zip
    9.3 KB · Views: 246

davidvidasoft

Member
Licensed User
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.
 
Last edited:

Joe73

Active Member
Licensed User
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

Expert
Licensed User
Longtime User
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
 

rtek1000

Active Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
HI Johan
You are really powerful
But can I draw multiline of different arrays?
as the picture shows
 

Attachments

  • chartLine.jpg
    chartLine.jpg
    84.1 KB · Views: 218

Alisson

Active Member
Licensed User
Johan Schoeman,

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

upload_2018-6-16_22-27-50.png


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.


upload_2018-6-16_22-28-22.png


Thank you very much.
 

Johan Schoeman

Expert
Licensed User
Longtime User

kevinl

New Member
Licensed User
Longtime User
Dear Johan,

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

Thanks and best regards,
Kevin
 
Top