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

Johan Schoeman

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

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

Attachments

  • Screenshot_2017-03-19-09-28-05.png
    Screenshot_2017-03-19-09-28-05.png
    145.2 KB · Views: 209

npsonic

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

beaker

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

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

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

tufanv

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

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

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

5.png
 

Attachments

  • mpChartLib.jar
    364.1 KB · Views: 185
  • mpChartLib.xml
    381.3 KB · Views: 177
Last edited:

tufanv

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

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

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

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

6.png



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

Attachments

  • custom_marker_view_2.xml
    816 bytes · Views: 224
  • b4aMPCandleStickChart.zip
    31.4 KB · Views: 222
  • mpChartLib.xml
    381.3 KB · Views: 216
  • mpChartLib.jar
    364.3 KB · Views: 232
Last edited:

tufanv

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

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

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

7.png
 

Attachments

  • mpChartLib.xml
    382.5 KB · Views: 206
  • mpChartLib.jar
    364.5 KB · Views: 208

tufanv

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

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

Attachments

  • error.png
    error.png
    14.5 KB · Views: 141
Top