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

Johan Schoeman · Dec 17, 2015

Mikonios said:
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 · Dec 18, 2015

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?

Mikonios · Dec 19, 2015

With the same data get differents graphs. It's posible ????

Mikonios · Dec 20, 2015

Delete old post and upload again. Can you probe ??

Johan Schoeman · Dec 20, 2015

Mikonios said:
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

Mikonios · Dec 20, 2015

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 ?

Johan Schoeman · Dec 20, 2015

Mikonios said:
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 · Dec 20, 2015

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 · Dec 20, 2015

Mahares said:
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 · Dec 20, 2015

Johan Schoeman said:
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?

Mikonios · Dec 20, 2015

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

Johan Schoeman · Dec 20, 2015

Mikonios said:
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 · Dec 20, 2015

Mikonios said:
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.

Mikonios · Dec 20, 2015

GUAO!! You are "The Very Best"
I'm going probe .....

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

Johan Schoeman · Dec 20, 2015

Johan Schoeman said:
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...

Johan Schoeman · Dec 25, 2015

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.

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

Mikonios · Dec 25, 2015

Perfect perfect ::
2. bug fix for setting the y-axis minimum and maximum values

Feliz Navidad !!!!

jahswant · Dec 25, 2015

Great work.Spécial thanks to @Johan Schoeman For enriching this community more and more.Alors la Chapeau...

BarryW · Jan 1, 2016

Johan Schoeman said:
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 · Jan 2, 2016

BarryW said:
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

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

Attachments

Expert

Active Member

Active Member

Attachments

Active Member

Attachments

Expert

Active Member

Expert

Expert

Expert

Expert

Active Member

Attachments

Expert

Expert

Attachments

Active Member

Expert

Expert

Attachments

Active Member

Well-Known Member

Active Member

Expert

Attachments

Similar Threads