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

Similar threads

B4A Tutorial Android Charts Framework
B4A Library [B4X] [XUI] Pie Chart
Share My Creation Google Charts
B4A Tutorial Add Charts With Google Charts Service
B4A Tutorial [B4X] Smart String Literal

Johan Schoeman

Expert
Licensed User
I fear that the library does not respect the changes:

mlc1.setTheLegendPositionAndForm ("BELOW_CHART_CENTER", "circle")
mlc1.XaxisLabelPosition = "BOTTOM"

in the example draw_graph_7 if any value is changed as the color does not maintain the parameters.
Sorry the problem occurs in rapid debug mode. In mode Release work fine!!
Good!
 

Mikonios

Active Member
Licensed User
Hello again Schoeman

I need on the x-axis data are not rounded and show 3 decimals. It is possible ?
Similarly, the data in mlc1.MarkerToUse, displayed to 3 decimal places. It is possible?

upload_2015-12-18_15-16-8.png
 

Johan Schoeman

Expert
Licensed User
Delete old post and upload again. Can you probe ??
You have this declared in Sub Process_Globals

DevDelta = ( (100%x + 100%y) / (100dip + 200dip) - 1 )

DevDelta = ( (100%x + 100%y) / (100dip + 200dip) - 1 )

...that causes the crash! The size of the activity is still unknown (or at least as far as B4A V5.50 is concerned). Interesting that an earlier version of B4A does not flag this as an error when you try compile the project...

It should be moved to here:

B4X:
    Activity.LoadLayout("main")
 
    DevDelta = ( (100%x + 100%y) / (100dip + 200dip) - 1 )
    DevDelta = ( (100%x + 100%y) / (100dip + 200dip) - 1 )
    Activity.Color         = Colors.White
 
Last edited:

Mikonios

Active Member
Licensed User
I have no errors when I run the application 3.82 version.

I modified according to your instructions, but the graphics are still incorrect

7 days: 181215D Red, Yellow, Green, Blue
15 days: 181215D Yellow, Red, Blue, Green
31 days: 181215D Yellow, Red, Blue, Green
48 days: 181215D Yellow, Red, Blue, Green

Example of 15 days, could not be less than 1.1 to 0.9 and display it on the bottom.

How is posible ?
 
Last edited:

Johan Schoeman

Expert
Licensed User
I have no errors when I run the application 3.82 version.

I modified according to your instructions, but the graphics are still incorrect

7 days: 181215D Red, Yellow, Green, Blue
15 days: 181215D Yellow, Red, Blue, Green
31 days: 181215D Yellow, Red, Blue, Green
48 days: 181215D Yellow, Red, Blue, Green

Example of 15 days, could not be less than 1.1 to 0.9 and display it on the bottom.

How is posible ?
You need to add this to your code:
B4X:
    mlc1.YaxisDependancy = Array As String("LEFT", "LEFT", "LEFT", "LEFT")
The wrapper has been set as follows:
B4X:
        private String[] lineAxisDependency = {"RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT"};
Thus, if you don't specify that all line charts should be dependant on the LEFT y-axis then wrapper will automatically assign them to "RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT". If you enable your right y-axis then the anomaly that you see will actually make sense as your line1 and line3 charts are by default assigned to the RIGHT y-axis while your line2 and line4 charts are assigned to the LEFT y-axis. Best you set the YaxisDependancy to be all LEFT to avoid any confusion.

Have tested it with your project other than the change that I have made as mentioned in post #108 above. It is working 100%...;)
 

Mahares

Well Known Member
Licensed User
I tried to run Mikonios' example and the Yaxis always starts at 0.000 using any compilation mode and even if I set the min and max as follows:
B4X:
mlc1.YaxisleftMinVal         = .8         
mlc1.YaxisleftMaxVal         = 1.2
How did you get the left Y axis to start at other than 0.
 

Johan Schoeman

Expert
Licensed User
I tried to run Mikonios' example and the Yaxis always starts at 0.000 using any compilation mode and even if I set the min and max as follows:
B4X:
mlc1.YaxisleftMinVal         = .8        
mlc1.YaxisleftMaxVal         = 1.2
How did you get the left Y axis to start at other than 0.
He has "pinch zoomed" the graph before taking the snapshot...:)
 

Mahares

Well Known Member
Licensed User
He has "pinch zoomed" the graph before taking the snapshot..
Thanks Johan, I understand that. But, shouldn' t the Y axis start at .8 as its lower most value without having to pinch the zoom, based on the min and max settings, but it does not. It always starts at 0?
 

Johan Schoeman

Expert
Licensed User
Now work fine Johan. Many many thanks!!

But the other line no compile::
privateString[] lineAxisDependency = {"RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT"};

Upload ProyectModified and new images::
This line....
privateString[] lineAxisDependency = {"RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT"};
....is in the wrapper and should not be added to your B4A code.

Only this line should be added:
mlc1.YaxisDependancy = ArrayAsString("LEFT", "LEFT", "LEFT", "LEFT")
 

Johan Schoeman

Expert
Licensed User
Hello again Schoeman

I need on the x-axis data are not rounded and show 3 decimals. It is possible ?
Similarly, the data in mlc1.MarkerToUse, displayed to 3 decimal places. It is possible?

View attachment 39751
Here you go - new lib files especially for you...so that you can see your 3 decimals with the small values that you are using. It will display your small values to 3 decimals in the chart as well as for the marker view.

1.png
 

Attachments

Mikonios

Active Member
Licensed User
GUAO!! You are "The Very Best"
I'm going probe .....

Oh my goodness. It is really fantastic !!!
With my Nick jejejejejeje
 
Last edited:

Johan Schoeman

Expert
Licensed User
He has "pinch zoomed" the graph before taking the snapshot...:)
I will have to look into that again Ali. Been so long since I have done that. But at the time of doing the wrapper (originally) it worked. Have changed the code a hell of a lot since then and will try and figure out why the y-axis min and max values now went missing...
 
Last edited:

Johan Schoeman

Expert
Licensed User
On request - this is an update for the MultiLineChart part of this project:

1. added ability the specify a single legend text color or for the legend text of each one of the legends to match that of its corresponding line color
2. bug fix for setting the y-axis minimum and maximum values
3. added setting of LegendXEntrySpace and LegendYEntrySpace (see the help when entering these methods)
4. bug fix for DrawFilled and FillColor
5. changed the y-axis dependency of all 5 the possible line charts to initially be that of the left y-axis
6. all methods now have help/explanation incorporated

One more request that I will try and accommodate is specifying the number of insignificant digits (0, 1, 2, or 3) on the popup markers. Will post an update if I can get it sorted out.

Merry XMAS to everyone! Hope you have a wonderful day!

Posting new library files and B4A project demonstrating the changes.

1.png

Sample code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: MPMultiLineChartV3
    #VersionCode: 3
    #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.
  
    Dim t As Timer

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 mlc1  As MultiLineChart
    Private Button1 As Button
    Dim flag As Int = 0

    Private ImageView1 As ImageView
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")
  
  
    t.Initialize("t",10000)
    ImageView1.Visible = False

  
    mlc1.ChartDescription = "TITLE : Just some random data"   'SORTED OUT DISPLAY OF DESCRIPTION IF NO TITLE IS SET - 22 OCT 2015
    mlc1.ChartDescriptionColor = Colors.Red
    mlc1.ChartDescriptionTextSize = 15  
    mlc1.GridBackgroundColor = Colors.DarkGray
  
'    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
'    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
'    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

'   CIRCLE, SQUARE, LINE

    mlc1.LegendShapeSize = 10.0
    mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","CIRCLE")
    mlc1.TheLegendColor = Colors.White
    mlc1.TheLegendTextSize = 10.0  
    mlc1.LegendText = Array As String("2011", "2012", "2013", "2014", "2015")
    mlc1.LegendTextColorsToMatchLineColors = True                                      'ADDED 25 Dec 2015
    mlc1.LegendXEntrySpace = 25.0                                                      'ADDED 25 Dec 2015
    mlc1.LegendYEntrySpace = 25.0                                                      'ADDED 25 DEc 2015

    mlc1.ValueTextColor = Array As Int(Colors.White, Colors.Red, Colors.White, Colors.Red, Colors.White)
    mlc1.ValueTextSize = Array As Float(12.0, 10.0, 14.0, 8.0, 16.0)

    mlc1.YaxisTextSize = 10.0
  
'   We are going to draw 5 charts/graphs
    mlc1.Chart_1_Data = Array As Float(10.0, 30.0, 20.0, -50.0, 40.0, -30.0, 45.0, -15.0, 38.3, -18.9, 29.8, -15.7)
    mlc1.Chart_2_Data = Array As Float(1200.0, 750.0, 450.0, 960.0, 730.0, 1100.0, 676.5, 985.6, 1010.8, 836.4, 498.5, 965.3)  
    mlc1.Chart_3_Data = Array As Float(-10.0, -30.0, -20.0, 50.0, -40.0, 30.0, -45.0, 15.0, -38.3, 18.9, -29.8, 15.7)  
    mlc1.Chart_4_Data = Array As Float(345.0, -380.2, -250.4, 849.7, 445.0, 600.5, -300.0, 50.0, 550.0, 1100.0, 894.2, 993.8)  
    mlc1.Chart_5_Data = Array As Float(40.0, 60.0, 50.0, -80.0, 70.0, -60, 75.0, -45.0, 68.3, -48.9, 59.8, -45.7)  
  
'   25 DEC 2015 - THE DEFAULT Y-AXIS FOR ALL LINE CHARTS HAS BEEN SET TO THE LEFT Y-AXIS
'    Dim ad() As String = Array As String("RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT")     'NEW - ADDED Y AXIS DEPENDANCY - 22 OCT 2015
'    mlc1.YaxisDependancy = ad                                                           'NEW - ADDED Y AXIS DEPENDANCY - 22 OCT 2015

    mlc1.DrawGraphValues = Array As Boolean(True, True, True, True, True)  
    mlc1.MaxVisibleValueCount = 20
  
'   Maximum 5 colors to be passed ==> must be at least equal to the number of data sets that are passed i.e maximum 5
'   If you pass only for eg 2 data sets then at least 2 colors need to be passed
'   If more that 2 colors are passed with for eg only 2 data sets then only the first 2 colors will be used in the color array
    mlc1.LineColors = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)
    mlc1.GraphLineWidth = Array As Float(2.0, 3.0, 4.0, 5.0, 6.0)
  
    mlc1.DrawFilled = Array As Boolean(False, False, False, False, False)                                 'BUG FIX - 25 DEC 2015
    mlc1.FillColor = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)      'BUG FIX - 25 DEC 2015
  
    mlc1.XaxisTextColor = Colors.Green
    mlc1.XaxisTextSize = 12.0  
    mlc1.XaxisLables = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
'  TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc1.XaxisLabelPosition = "TOP"
    mlc1.XaxisTextAngle = 30                          'NEW - 'AMENDED CODE TO SET THE ANGLE OF THE X AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
    mlc1.VerticalGridColor = Colors.White             'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

    mlc1.DrawXaxisGridLines = True
  
    mlc1.DrawYaxisLeftGridLines = True                 'NEW - ADDED 23 OCT 2015
    mlc1.DrawYaxisRightGridLines = False               'NEW - ADDED 23 OCT 2015
  
    mlc1.YaxisLeftMinVal = -250                        'BUG FIX 25 DEC 2015 TO SET LEFT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
    mlc1.YaxisLeftMaxVal = 1100                        'AMENDED 22 OCT 2015 TO SET LEFT Y AXIS MAX VAL INDEPENDANTLY - comment it out so that the scale will be set automatically

'    mlc1.YaxisRightMinVal = -175                      'BUG FIX 25 DEC 2015 TO SET RIGHT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
'    mlc1.YaxisRightMaxVal = 175                        'AMENDED 22 OCT 2015 TO SET RIGHT Y AXIS MAX VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
  
    mlc1.YaxisTextSize = 10.0
  
    mlc1.YaxisLeftTextColor = Colors.Cyan              'NEW - ADDED 23 OCT 2015   
    mlc1.YaxisRightTextColor = Colors.Yellow          'NEW - ADDED 23 OCT 2015
  
    mlc1.ShowYaxisRightLabels = True
    mlc1.ShowYaxisLeftLabels = True
  
    mlc1.DrawLeftGridDashed = False                   'NEW - ADDED 23 OCT 2015
    mlc1.DrawRightGridDashed = True                   'NEW - ADDED 23 OCT 2015
  
    mlc1.YaxisTextAngle = -15                         'NEW - 'ADDED ABILITY TO SET THE ANGLE OF THE Y AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
    mlc1.HorizontalGridColorLeft = Colors.White       'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
    mlc1.HorizontalGridColorRight = Colors.Yellow     'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
  
    mlc1.CubicIntensity = Array As Float(0.1, 0.2, 0.3, 0.4, 0.5)
    mlc1.DrawCubicGraph = Array As Boolean(True, False, True, False, True)
    mlc1.DrawDashedLine = Array As Boolean(True, False, True, False, True)
    mlc1.GraphCircleSize = Array As Float(4.0, 5.0, 6.0, 7.0, 8.0)
    mlc1.GraphCircleColor = Array As Int(Colors.Red, Colors.Green, Colors.Magenta, Colors.Black, Colors.Blue)
    mlc1.DrawGraphHollowCircles = Array As Boolean(True, False, True, False, True)
    mlc1.MarkerToUse = 4
  
    mlc1.XAnimate = False
    mlc1.YAnimate = True
    mlc1.ChartAnimationTime = 2000                     'milliseconds
  
'   the number of charts to be drawn (maximum 5, in this case 5)
'   the number of x-axis values per chart (in this case 12 = number of elements in the array passed to mlc1.XaxisLables)
    mlc1.setLineData(5,12)
    flag = flag + 1
  
'    mlc1.saveToGallery("mygraph", 50, mlc1.Width, mlc1.Height)
'     mlc1.saveToPath("mygraph","", mlc1.Width, mlc1.Height)
  

End Sub

Sub Activity_Resume
  
'    t.Enabled = True

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub t_tick
  
    mlc1.SavedImageBackgroundColor = Colors.red
    mlc1.saveToGallery("mygraph", 50)
    DoEvents
    mlc1.saveToPath("mygraph","")
    DoEvents
  
    t.Enabled = False
  
    DoEvents
    mlc1.Visible = False
    DoEvents
  
    ImageView1.Left = mlc1.Left
    ImageView1.Top = mlc1.Top
    ImageView1.Height = mlc1.Height
    ImageView1.width = mlc1.width
    ImageView1.Bitmap = mlc1.ChartBitmap
    ImageView1.Visible = True
  
  
End Sub
 

Attachments

Last edited:

BarryW

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

View attachment 37189

Green slice touched ...

View attachment 37190

Pie Chart rotated with finger...

View attachment 37191


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
How to disable the rotation of PIE Chart... TNX...
 

Johan Schoeman

Expert
Licensed User
How to disable the rotation of PIE Chart... TNX...
Replace your library files with the attached new libraries and then add the following line to your B4A code:
B4X:
mpc1.RotationEnabled = False
BUT MAKE SURE YOU DELETE THE OLD LIBARY FILES COMPLETELY FROM YOUR ADDITIONAL LIBRARY FOLDER AND COPY THE NEW/ATTACHED LIBRARY FILES TO YOUR ADDITIONAL LIBRARY FOLDER.

EDIT: Have added an updated B4A project to this post
 

Attachments

Last edited:
Top