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 · Mar 19, 2017

wimpie3 said:
Is it possible to paint the background below some values? Like the green color I've added here?

Wimpie, not sure if the original project allows for this. Do you perhaps know? If there is a method in one of the classes to do so then I will expose it. But a quick search that I have done in the project that I have wrapped does not seem to have such a method.

LouFromDetroit · Mar 19, 2017

Johan Schoeman said:
Post some screenshots of what you see and I will see if I can address it. I don't think the original Githib post makes provision for Locale but I will look into it once I understand the issue

See screenshot. Axis used the dot but the bubble uses the comma for 51,15. Should show 51.15

Hope this is clear.

npsonic · May 30, 2017

Is it possible to place line chart on the candlestick chart?
Also is there any way to limit zoom level (Min - Max)?

beaker · May 30, 2017

Johan Schoeman said:
Post some screenshots of what you see and I will see if I can address it. I don't think the original Githib post makes provision for Locale but I will look into it once I understand the issue

Sorry Johan, I have only just seen your reply requesting a screenshot. Although I'm subscribed to this thread, for some reason I wasn't alerted to your post. However I see that @LouFromDetroit has posted a screenshot which demonstrates the issue we're experiencing.

Johan Schoeman · May 30, 2017

npsonic said:
Is it possible to place line chart on the candlestick chart?
Also is there any way to limit zoom level (Min - Max)?

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

Johan Schoeman · May 30, 2017

beaker said:
Sorry Johan, I have only just seen your reply requesting a screenshot. Although I'm subscribed to this thread, for some reason I wasn't alerted to your post. However I see that @LouFromDetroit has posted a screenshot which demonstrates the issue we're experiencing.

I will see if I can address this issue at some stage when time permits. A bit tied up with my real work and also some projects for forum members.

beaker · May 30, 2017

Johan Schoeman said:
I will see if I can address this issue at some stage when time permits. A bit tied up with my real work and also some projects for forum members.

Thanks Johan, that would be greatly appreciated.

tufanv · Jun 30, 2017

Johan Schoeman said:
I will see if I can address this issue at some stage when time permits. A bit tied up with my real work and also some projects for forum members.

Hello,

I can't find where to set the data which is displayed on candlestrick chart when clicked on a candle , it always shows "4" for me.

Johan Schoeman · Jun 30, 2017

tufanv said:
Hello,

I can't find where to set the data which is displayed on candlestrick chart when clicked on a candle , it always shows "4" for me.

What is the range of values on your Y-axis?

Johan Schoeman · Jun 30, 2017

tufanv said:
Hello,

I can't find where to set the data which is displayed on candlestrick chart when clicked on a candle , it always shows "4" for me.

Use the attached lib files and in your B4A code add:

B4X:

mlc1.NoOfMarkerDigits = 3
mlc1.MarkerToUse = 2

....before (for eg)....

B4X:

mlc1.CandleData = Rnd(1,39)

Johan Schoeman · Jul 1, 2017

beaker said:
Thanks Johan, that would be greatly appreciated.

Try with the library files in post #270

Johan Schoeman · Jul 1, 2017

LouFromDetroit said:
See screenshot. Axis used the dot but the bubble uses the comma for 51,15. Should show 51.15

Hope this is clear.

See post #271

tufanv · Jul 1, 2017

Johan Schoeman said:
Use the attached lib files and in your B4A code add:

B4X:

mlc1.NoOfMarkerDigits = 3 mlc1.MarkerToUse = 2

....before (for eg)....

B4X:

mlc1.CandleData = Rnd(1,39)

View attachment 57212

Thanks Johan ,

Now it shows the price of the day . As I understand it is not possible to also add lowest , highest , open and close prices to data ( manually ) . ? Is there any way to add it or it has to be done from the library itself*

Johan Schoeman · Jul 1, 2017

tufanv said:
Thanks Johan ,

Now it shows the price of the day . As I understand it is not possible to also add lowest , highest , open and close prices to data ( manually ) . ? Is there any way to add it or it has to be done from the library itself*

Not sure I follow your question above....can you explain what it is that you want to do?

tufanv · Jul 1, 2017

Johan Schoeman said:
Not sure I follow your question above....can you explain what it is that you want to do?

Currently , when i click on a candle it shows one price , but candle data indeed has 4 values : open ,close , low and high . Is it possible to show all these values like :
Open : 3.56
Close 3.57
High : 3.60
Low : 3.55
Date : 2017-01-01

I also want to add the date for example of the candle that is stored in a listtogether with these 4 values.

Johan Schoeman · Jul 1, 2017

tufanv said:
Currently , when i click on a candle it shows one price , but candle data indeed has 4 values : open ,close , low and high . Is it possible to show all these values like :
Open : 3.56
Close 3.57
High : 3.60
Low : 3.55
Date : 2017-01-01

I also want to add the date for example of the candle that is stored in a listtogether with these 4 values.

Try with the attached library files. Sample project also posted.

Replace custom_marker_view_2.xml in the /Object/res/layout folder of the B4A project with the attached xml file. Use this xml layout file only for the CandleStickChart.

Posting the following:
1. B4A library files V1.07
2. Sample project
3. custom_marker_view_2.xml

You should get this:

The year should be what you have set in the legend. Can probably pick that up too in the Java code and add it to the MarkerView...

Edit custom_marker_view_2.xml to change the appearance of the MarkerView.

Not a small change at all to the library to get to this.....

tufanv · Jul 2, 2017

Perfect Johan ! Works wonderful. Just a little last question , I think you modify the library so i cant change the language of open,close,high,low and date labels with a different language . Is it possible to change them somehow ?

Johan Schoeman said:
Try with the attached library files. Sample project also posted.

Replace custom_marker_view_2.xml in the /Object/res/layout folder of the B4A project with the attached xml file. Use this xml layout file only for the CandleStickChart.

Posting the following:
1. B4A library files V1.07
2. Sample project
3. custom_marker_view_2.xml

You should get this:

View attachment 57217

The year should be what you have set in the legend. Can probably pick that up too in the Java code and add it to the MarkerView...

Edit custom_marker_view_2.xml to change the appearance of the MarkerView.

Not a small change at all to the library to get to this.....

Johan Schoeman · Jul 2, 2017

Try with this (previous post deleted):

B4X:

    mlc1.NoOfMarkerDigits = 3
    mlc1.MarkerToUse = 2

    mlc1.MarkerOpenText = "Açık"
    mlc1.MarkerCloseText = "Kapat"
    mlc1.MarkerHighText = "Yüksek"
    mlc1.MarkerLowText = "Düşük"
    mlc1.MarkerDateText = "Tarih"

    mlc1.CandleData = Rnd(1,39)

Used Google translate so don't expect it to be right....

tufanv · Jul 2, 2017

Johan Schoeman said:
Try with this (previous post deleted):

B4X:

mlc1.NoOfMarkerDigits = 3 mlc1.MarkerToUse = 2 mlc1.MarkerOpenText = "Açık" mlc1.MarkerCloseText = "Kapat" mlc1.MarkerHighText = "Yüksek" mlc1.MarkerLowText = "Düşük" mlc1.MarkerDateText = "Tarih" mlc1.CandleData = Rnd(1,39)

Used Google translate so don't expect it to be right....

View attachment 57249

Thanks for all your time spent on this issue ! You were a great help !

Roberto P. · Jul 7, 2017

Hello to all
I'm trying to use the MPStackedBarChart example with the version 1.07 library, but when I click on the blocks the system goes wrong.

See the error

B4X:

*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
java.lang.NullPointerException: Attempt to invoke virtual method 'boolean anywheresoftware.b4a.BA.subExists(java.lang.String)' on a null object reference
    at com.github.mikephil.charting.charts.BarLineChartBase.getMarkerPosition(BarLineChartBase.java:560)
    at com.github.mikephil.charting.charts.Chart.drawMarkers(Chart.java:603)
    at com.github.mikephil.charting.charts.BarLineChartBase.onDraw(BarLineChartBase.java:259)
    at android.view.View.draw(View.java:16263)
    at android.view.View.updateDisplayListIfDirty(View.java:15186)
    at android.view.View.getDisplayList(View.java:15209)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3692)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3671)
    at android.view.View.updateDisplayListIfDirty(View.java:15146)
    at android.view.View.getDisplayList(View.java:15209)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3692)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3671)
    at android.view.View.updateDisplayListIfDirty(View.java:15146)
    at android.view.View.getDisplayList(View.java:15209)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3692)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3671)
    at android.view.View.updateDisplayListIfDirty(View.java:15146)
    at android.view.View.getDisplayList(View.java:15209)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3692)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3671)
    at android.view.View.updateDisplayListIfDirty(View.java:15146)
    at android.view.View.getDisplayList(View.java:15209)
    at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:307)
    at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:313)
    at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:352)
    at android.view.ViewRootImpl.draw(ViewRootImpl.java:2818)
    at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2638)
    at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2226)
    at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1230)
    at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6748)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:777)
    at android.view.Choreographer.doCallbacks(Choreographer.java:590)
    at android.view.Choreographer.doFrame(Choreographer.java:560)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:763)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:145)
    at android.app.ActivityThread.main(ActivityThread.java:6134)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1399)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1194)

thanks

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

Attachments

Expert

Member

Attachments

Active Member

Member

Expert

Expert

Member

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Attachments

Expert

Well-Known Member

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency