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

Green slice touched ...

Pie Chart rotated with finger...

Some sample code:

#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

 

[BarryW]

Tnx... Ur best...

 

[BarryW]

I have error now in ur library

It goes to PIE.PieData = 2 on debugger...

android.content.res.Resources$NotFoundException: Resource ID #0x0
at android.content.res.Resources.getValue(Resources.java:1166)
at android.content.res.Resources.loadXmlResourceParser(Resources.java:2395)
at android.content.res.Resources.getLayout(Resources.java:982)
at android.view.LayoutInflater.inflate(LayoutInflater.java:395)
at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
at com.github.mikephil.charting.components.MarkerView.setupLayoutResource(MarkerView.java:39)
at com.github.mikephil.charting.components.MarkerView.<init>(MarkerView.java:29)
at com.github.mikephil.charting.components.MyMarkerView.<init>(MyMarkerView.java:27)
at mpandroidchartwrapper.pieChartWrapper.setPieData(pieChartWrapper.java:214)
at ne.itlection.v3.m_demo._crt_pie(m_demo.java:550)
at ne.itlection.v3.m_demo._test(m_demo.java:874)
at ne.itlection.v3.m_demo._activity_create(m_demo.java:373)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:187)
at ne.itlection.v3.m_demo.afterFirstLayout(m_demo.java:100)
at ne.itlection.v3.m_demo.access$100(m_demo.java:17)
at ne.itlection.v3.m_demo$WaitForLayout.run(m_demo.java:78)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:149)
at android.app.ActivityThread.main(ActivityThread.java:5257)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609)
at dalvik.system.NativeStart.main(Native Method)

 

[Johan Schoeman]

I have error now in ur library

It goes to PIE.PieData = 2 on debugger...

I will add a working B4A example to post #120

 

[Johan Schoeman]

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

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

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)

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)

 

[Yayou49]

Hi,

I Have a question regarding
mbc1.LegendText = ArrayAsString() and mbc1.ChartData = ArrayAs Float()

How to do with a dynamic array ???
I mean, if you don't know each time how many element are in your array list

Example for mbc1.ChartData :

Dim MyList1 as list
Mylist1.add(125)
Mylist1.add(10)

In this case, I would like only 2 values (Mylist.size) in mbc1.ChartData = ArrayAs Float()

and

Dim MyList1 as list
Mylist1.add(125)
Mylist1.add(10)
Mylist1.add(50)
Mylist1.add(200)

In this case, I would like only 4 values (Mylist.size) in mbc1.ChartData = ArrayAs Float()

Is it possible and how ?

Thanks

 

[Mahares]

I Have a question regarding
mbc1.LegendText = ArrayAsString() and mbc1.ChartData = ArrayAs Float()

Please see my answer to the same question you asked in the questions forum:
https://b4x.com/android/forum/threads/question-about-library-mpandroidcharts.62631/
Theoretically, you should not ask the same question twice in two different places.

 

[Yayou49]

Hi Mahares,

Sorry for the double thread.
I was not sure to be read in the Library thread.
I promise, I will not do that again

Anyway, thanks for your answer !!

 

[Paulsche]

Hello Johan,

it is possible ti insert a horizontal line for minimum- maximum- and average values?

 

[Mahares]

Here is how I do it for the average horizontal line:

Dim Myarr() As Float = Array As Float(50.3,45.9,30.1, 23.1, 75.3)
Dim MyTot, MyAv As Float
'Calculate the average of the array
For i=0 To Myarr.Length -1   
    MyTot=MyTot+ Myarr(i)
Next
MyAv=(MyTot/Myarr.Length)
'Create a new array of the average
Dim MyArrayAverage(Myarr.Length) As Float
For i=0 To Myarr.Length -1
    MyArrayAverage(i) = MyAv
Next
'apply array of average to chart to plot a horizontal line
mlc1.Chart_1_Data = MyArrayAverage   'or Chart_2, Chart_3, Chart_4, Chart_5

For the min and max lines, you can see a method I wrote in my post #2 of the following link, that shows you how to calculate min and max of an array:
https://www.b4x.com/android/forum/t...imum-from-the-double-array.20123/#post-116377
If you have a problem, Johan will bail you out.

 

[Paulsche]

Here is how I do it for the average horizontal line:

Dim Myarr() As Float = Array As Float(50.3,45.9,30.1, 23.1, 75.3)
Dim MyTot, MyAv As Float
'Calculate the average of the array
For i=0 To Myarr.Length -1  
    MyTot=MyTot+ Myarr(i)
Next
MyAv=(MyTot/Myarr.Length)
'Create a new array of the average
Dim MyArrayAverage(Myarr.Length) As Float
For i=0 To Myarr.Length -1
    MyArrayAverage(i) = MyAv
Next
'apply array of average to chart to plot a horizontal line
mlc1.Chart_1_Data = MyArrayAverage   'or Chart_2, Chart_3, Chart_4, Chart_5

For the min and max lines, you can see a method I wrote in my post #2 of the following link, that shows you how to calculate min and max of an array:
https://www.b4x.com/android/forum/t...imum-from-the-double-array.20123/#post-116377
If you have a problem, Johan will bail you out.

ok, thank you, that is a possibility, but I have the problem,
I already have three line-charts in my artwork and a maximum of five
possible are.
So if I do a minimally medium- and maximum line want, then I would need
six charts.

The way I see it, this is not feasible at combinedLineBarChart.

 

[Johan Schoeman]

ok, thank you, that is a possibility, but I have the problem,
I already have three line-charts in my artwork and a maximum of five
possible are.
So if I do a minimally medium- and maximum line want, then I would need
six charts.

The way I see it, this is not feasible at combinedLineBarChart.

It is limited to 5 line charts. If you want more than 5 then you should change all the code in the wrapper and recompile it into a new library.

 

[Johan Schoeman]

ok, thank you, that is a possibility, but I have the problem,
I already have three line-charts in my artwork and a maximum of five
possible are.
So if I do a minimally medium- and maximum line want, then I would need
six charts.

The way I see it, this is not feasible at combinedLineBarChart.

I will add some more line charts to the library in the next week or so and then post a new library for multi line charts so that you can draw at least your 6 lines.

 

[Johan Schoeman]

ok, thank you, that is a possibility, but I have the problem,
I already have three line-charts in my artwork and a maximum of five
possible are.
So if I do a minimally medium- and maximum line want, then I would need
six charts.

The way I see it, this is not feasible at combinedLineBarChart.

The attached library files should now make provision for 10 line charts in the MultiLineChart graph. I have only tested for line charts 1 to 6 - please let me know should something not be working as it should.

 

[Paulsche]

Thanks, if 10 Line charts possible with combined Line Bar chart?
Otherwise I can insert the min-max mid-lines only when Multiline charts.

 

[Johan Schoeman]

Thanks, if 10 Line charts possible with combined Line Bar chart?
Otherwise I can insert the min-max mid-lines only when Multiline charts.

Yes, it is once the code in the wrapper has been modified. Will do it this week sometime (meaning before the end of Sunday )

 

[Paulsche]

Yes, it is once the code in the wrapper has been modified. Will do it this week sometime (meaning before the end of Sunday )

Thanks, you are the best

 

[Johan Schoeman]

Thanks, if 10 Line charts possible with combined Line Bar chart?
Otherwise I can insert the min-max mid-lines only when Multiline charts.

Please try the attached library files for the MultiLineBarChart graph. I have allowed for 10 line charts. Please note that I have not tested it at all. Let me know if something seems to be out of "line". I have not added any additional features as what I have added to MultiLineCharts over a period of time - merely made provision for 10 line charts in the MultiLineBarChart. All other cosmetic features of MultiLineBarChart remain as is i.e in accordance with the last posting that I have done for MultiLineBarChart.

 

[Paulsche]

Thank you very much for this library, is it possible to draw combinated (multi bar charts and line charts) like:

Can you add? Would be nice.

 

[Johan Schoeman]

Can you add? Would be nice.

Can you add? Would be nice.

The Github project that I have wrapped does not at present provide for multi bar + multi line charts. I have mentioned it somewhere previously in this thread. The author of the Github project did mention in a forum that he is working on it. Once he makes it available I will wrap it and add it to the library.

 

[beaker]

Hi Johan,
I'm using mpChart v1.01 with B4A 5.80 and I'm having a bit of an issue with right Y axis labels on a MultiLineChart. I originally posted the issue in the Android Questions forum a few days ago and user mc73 guided me here to post it as a possible bug report.

The issue appears or disappears depending on the left hand Y axis values. I've stripped out most of the code from my app which isn't relevent and attached the zipped up project as well as some screenshots showing the issue. The first screenshot looks as I'd expect but the second one looks as though the right hand Y axis values have been rounded to the nearest integer.

To explain the charts: There are five sets of data on each chart, 4 of them are tied to the left hand Y axis and the fifth (cyan dashed) is tied to the right hand Y axis. The only difference between the two sets of data is in the values behind the lines tied to the left hand Y axis, the data behind the right side Y axis is the same in both cases. You'll see that the right Y axis values shown are: 0.00, 0.60, 1.20, 1.80, 2.40, 3.00 in the first screenshot and 0, 1, 1, 2, 2, 3 in the second screenshot.

I'm leaving the Y axes limits to be automatically set.
Somehow the right hand Y axis label values are being influenced by the left hand Y axis values.

Since my original post I've made some changes to see if I could narrow down the problem. I've added the following to see what affect it had:

chrtChart.YaxisLeftMinVal = 0
chrtChart.YaxisLeftMaxVal = 300

chrtChart.YaxisRightMinVal = 0
chrtChart.YaxisRightMaxVal = 3

The results are shown in the following screenshots (using the same underlying data as before):

As you can see, the 1st image looks just fine. Obviously 4 of the lines are squashed right down the bottom but that's to be expected having set the left Y axis limits to the chosen values. The 2nd image is still showing the same (original) issue. So it looks as though the issue is related to the actual (left hand) graphed values and not the left Y axis limits. I've also noticed that the left Y axis labels in the 2nd image have been formatted with no decimals even though the axis limits haven't changed. What I'm guessing from this is that both sets of Y axis labels are being rounded to the nearest integer somehow.

Hopefully you'll get some time to take a look at this and that I've managed to narrow down where the problem might be.
Any help would be greatly appreciated.

I've attached the zipped project (modified since original post in other subforum). If you need me to do anything else just let me know.

Many thanks
Marcus