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,570
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,680
  • mpChartLibV1.15.zip
    355.2 KB · Views: 756
  • mpChartLibV1.16.zip
    355.7 KB · Views: 753
  • mpChartLibV1.17.zip
    355.8 KB · Views: 920
  • mpChartLibV1.18.zip
    356.4 KB · Views: 822
  • mpChartLibV1.20.zip
    358.1 KB · Views: 628
  • mpChartLibV1.21.zip
    358 KB · Views: 187
  • mpChartLibV1.22.zip
    359.2 KB · Views: 250
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Can it do a simple graph like this (without the grid of course)?
These are basically lines drawn on a canvas, but a heck of alot of code to render properly on various devices.

Unfortunately not.
 

Harris

Expert
Licensed User
Longtime User
OK, the simplest of graphs are often the hardest to do. Used rarely.

Essentially, this is a Gannt chart, with 4 Y axis.

The X-axis is seconds (per day), based on time of day, where each new Y starts on last X end.

I have explored many graph engines (Android and Windows (web side)) yet ALL will not allow me to render what was shown here

Hopefully someday I can contribute a useful solution.

 

Mahares

Expert
Licensed User
Longtime User
@Johan Schoeman :
I have installed the latest and most up to date lib you posted in post#31. When I use it to run your pie chart example in post#1, the app crashes. Could you please check it out. The first error is Error description: Unknown member: setthelegendposition. More errors follow and are too numerous to post.
Thank you

EDIT: I switched to the pie project in post#3 (not the one in post#1) and added these below 8 files to the proper folder from one of the more recent project and the app seems to run OK for now. Will test some more.
A. There are 4 files in the /Objects/res/layout folder of the attached B4A project named custom_marker_view_1, custom_marker_view_2, custom_marker_view_3, and custom_marker_view_4. They need to be included in any project that you develop. Don't change them. They are all set to read only
B. Other than the icon.png file in the /Objects/res/drawable folder of the attached B4A project there are another 4 png images called marker1.png, marker2.png, marker3.png, and marker4.png. These are the markers that are used as pop-ups when you touch a bar / data point. These files are all set to read only. You can add your own marker image as long as what you name/replace your png file marker1.png, marker2.png, marker3.png, or marker4.png and then pass the appropriate value from the B4A project to the library.
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Some mods to Multi Line Charts that were requested by @Mahares. It adds the following:

1. Remove the "Description" text that appeared in the graphs when no graph title was set
2. Ability to set the vertical grid line colors (i.e grid lines perpendicular to the X Axis)
3. Ability to set the horizontal grid line colors for the left Y Axis (i.e grid lines perpendicular to the Left Y Axis)
4. Ability to set the horizontal grid line colors for the right Y Axis (i.e grid lines perpendicular to the Right Y Axis)
5. Ability to set the angle of the Y-Axis labels between -90 degrees and 90 degrees (use with caution)
6. Changed the angle of the X-Axis labels so that it can be set between -90 degrees and 90 degrees (use with caution)
7. Ability to specify the left or right Y-Axis dependency for each line chart within the multiple line chart

Posting the following:
1. B4A project that demonstrates changes mentioned above
2. New B4A library files

Some sample code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: MPMultiLineChartV2
    #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 mlc1  As MultiLineChart
    Private Button1 As Button
    Dim flag As Int = 0
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")
  
    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.yellow
    mlc1.TheLegendTextSize = 10.0  
    mlc1.LegendText = Array As String("2011", "2012", "2013", "2014", "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
    mlc1.YaxisTextColor = Colors.White
  
'   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)  
  
    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, False, True, False)  
  
'   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)
  
    mlc1.XaxisTextColor = Colors.Cyan
    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 = "BOTTOM"
    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.Magenta           'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
  
'   mlc1.YaxisLeftMinVal = -600                       'AMENDED 22 OCT 2015 TO SET LEFT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
'    mlc1.YaxisLeftMaxVal = 1600                       '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                     'AMENDED 22 OCT 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.YaxisTextColor = Colors.White  
    mlc1.ShowYaxisRightLabels = True
    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.Cyan        'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
    mlc1.HorizontalGridColorRight = Colors.Black      '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(3,12)
    flag = flag + 1

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

1.png


I will amend the other "multi" B4A projects accordingly and then post the new library files
 

Attachments

  • b4aMPMultiLineChartV2.zip
    29.9 KB · Views: 380
  • mpChartLib.zip
    310.1 KB · Views: 335

Johan Schoeman

Expert
Licensed User
Longtime User
A Further update to Multi Line Charts:
1. Added ability to enable/disable the left and right Y axis grid lines independently
2. Added ability to enable / disable drawing the left and right Y axis grid lines as dashed lines
3. Added ability to specify separate colors for the left and right Y axis labels

Posting updated B4A project and new B4A library files

1.png


2.png


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

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
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")
   
    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.yellow
    mlc1.TheLegendTextSize = 10.0   
    mlc1.LegendText = Array As String("2011", "2012", "2013", "2014", "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)   
   
    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, False, True, False)   
   
'   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)
   
    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 = "BOTTOM"
    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.Green             'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

    mlc1.DrawXaxisGridLines = True
   
    mlc1.DrawYaxisLeftGridLines = False                'NEW - ADDED 23 OCT 2015
    mlc1.DrawYaxisRightGridLines = False               'NEW - ADDED 23 OCT 2015
   
'   mlc1.YaxisLeftMinVal = -600                       'AMENDED 22 OCT 2015 TO SET LEFT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
'    mlc1.YaxisLeftMaxVal = 1600                       '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                      'AMENDED 22 OCT 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.Cyan        '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(3,12)
    flag = flag + 1

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aMPMultiLineChartV3.zip
    30 KB · Views: 354
  • mpChartLib.zip
    310.5 KB · Views: 371

Johan Schoeman

Expert
Licensed User
Longtime User
Attached new library files that sort out an issue with auto scaling of the Right Y Axis. Thanks @Mahares for pointing it out.
 

Attachments

  • NewLibFiles.zip
    310.4 KB · Views: 374

Mahares

Expert
Licensed User
Longtime User
Attached is a full functioning project that makes use of just about all features of Johan's latest and greatest library posted in #47 for a MultiLine chart.
The data plotted is imported from a SQLite database table. The table is created on the fly. The chart plots country population on the left Yaxis and country area on the right Yaxis. The Xaxis has the names of the top 10 countries of the world.
 

Attachments

  • MPMultiLineChartUsingSQLiteForJohan.zip
    55.7 KB · Views: 340

Johan Schoeman

Expert
Licensed User
Longtime User
Attached is a full functioning project that makes use of just about all features of Johan's latest and greatest library posted in #47 for a MultiLine chart.
The data plotted is imported from a SQLite database table. The table is created on the fly. The chart plots country population on the left Yaxis and country area on the right Yaxis. The Xaxis has the names of the top 10 countries of the world.
Thanks for your help in endless testing of the lib and also for yet another great example of using the lib with SQLite. Really appreciate it!
 

tactic1960

Member
Licensed User
Longtime User
Hello Joohan, I used your library and in my opinion is very good . There is a small problem if you use this data
mlc1.Chart_1_Data = Array As Float( 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 250.4, 0.0, 0.0 ) zero on graph is rendering with no decimal
if it uses this data instead
mlc1.Chart_1_Data = Array As Float( 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 )
zero is with decimals.
I think the view is always right no decimals.

Thank you
 

Lahksman

Active Member
Licensed User
Longtime User
Hi Johan

Is it possible to set a min and max value on the y-axis for the single vertical bar chart?
I need it to be 0 to 100 no matter the value of the bar.

Thx for the great lib.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan

Is it possible to set a min and max value on the y-axis for the single vertical bar chart?
I need it to be 0 to 100 no matter the value of the bar.

Thx for the great lib.

See if the (new) attached library files will sort out your requirements. Lines of code to add to your project:

B4X:
    mbc1.YAxisMinValue = 0
mbc1.YAxisMaxValue = 100

If you comment the above two lines of code then the Y-Axis minimum and maximum values will be calculated automatically. If you uncomment the two lines of code then the minimum and maximum will be set according to the minimum and maximum that you set by making use of the above two lines of code.

Sample code looks as follows:

B4X:
#Region  Project Attributes
    #ApplicationLabel: MPBarChart
    #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 mbc1 As BarChart
  
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")
  
'    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,

'   LINE, CIRCLE, SQUARE
    mbc1.LegendShapeSize = 7.0        'this line of code needs to be before mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")    'pass strings from the above comments
  
    mbc1.TheLegendColor = Colors.yellow
    mbc1.TheLegendTextSize = 20.0
    mbc1.LegendTitle = "Months"

    mbc1.ChartDescription = "TITLE : Some Arbitrary Data"
    mbc1.ChartDescriptionColor = Colors.Blue
    mbc1.ChartDescriptionTextSize = 25
'    mbc1.setDescriptionPosition(mbc1.left + 25%x ,mbc1.top + 3%y)
  
    mbc1.ValueTextColor = Colors.Black
    mbc1.ValueTextSize = 12.0
  


    'the following 3 arrays must have the same number of entries/elements
    mbc1.BarColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan, Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
    mbc1.LegendText = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
    mbc1.ChartData = Array As Float(52.3, -16.7, 46.0, -40.5, 101.6, 40.9, 15.7, 25.9, 35.6, -25.3, 67.5, 75.2)    'values - it will be converted to %

    mbc1.DoubleTapToZoomEnabled = True
    mbc1.DrawBarShadow = False
    mbc1.GridBackgroundColor = Colors.white
    mbc1.DrawBorders = True
    mbc1.DrawGridBackground = True
    mbc1.DrawHighlightArrow = True
    mbc1.DrawValueAboveBar = True
    mbc1.PinchZoom = True
    mbc1.ScaleEnabled = True
    mbc1.BorderColor = Colors.Yellow
    mbc1.BorderWidth = 3.0

'   TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mbc1.XaxisLabelPosition = "BOTTOM"
    mbc1.XaxisTextSize = 15.0
    mbc1.XaxisTextColor = Colors.Magenta
  
    mbc1.DrawYaxisGridLines = True
    mbc1.YaxisTextColor = Colors.Green
    mbc1.YaxisTextSize = 15.0
    mbc1.ShowYaxisLeftLabels = True
    mbc1.ShowYaxisRightLabels = False
    mbc1.MarkerToUse = 1
  
    mbc1.YAxisMinValue = 0                            'ADDED 29 October 2015
    mbc1.YAxisMaxValue = 100                          'ADDED 29 October 2015
  
    mbc1.YAnimate = True
    mbc1.ChartAnimationTime = 2000

  
    mbc1.BarData = 12   'this number must be the same as the number of elements in the above arrays

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

6.png
 

Attachments

  • mpChartLibFiles.zip
    310.7 KB · Views: 330

tactic1960

Member
Licensed User
Longtime User
Johan there is a problem only when you plot only one graph. If you plot two graph number zero have no decimal.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Johan there is a problem only when you plot only one graph. If you plot two graph number zero have no decimal.
It is internal to the original Github project and not to the wrapper that I have created. Post an example project so that I can see what the issue is and I will see if I can sort it out in the original Github project.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Johan there is a problem only when you plot only one graph. If you plot two graph number zero have no decimal.

This should hopefully sort it out. Attached new library files. I have also added 2 x decimals to the value that appears in the marker view. It should now show correct values for something like sin(x) and cos(x) where the values of these functions vary from 1.0 to -1.0

1.png
 

Attachments

  • mpChartLibFiles.zip
    311.2 KB · Views: 347
Last edited:

DT1111

Member
Licensed User
Longtime User
Hi Johan

Thanks for your great multilinechart lib.

Would I be able to set the x-axis and y-axis intervals. I have 100 points to plot and I want to set the intervals to 20 for x and y major grid lines. Is that possible?

upload_2015-11-2_17-53-8.png


Also, I am unclear on what the following does
- DesignerCreateView
- MaxVisibleValueCount

Thanks.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan

Thanks for your great multilinechart lib.

Would I be able to set the x-axis and y-axis intervals. I have 100 points to plot and I want to set the intervals to 20 for x and y major grid lines. Is that possible?

View attachment 38610

Also, I am unclear on what the following does
- DesignerCreateView
- MaxVisibleValueCount

Thanks.
DesignerCreateView is a public method within the wrapper that can not be hidden. So just ignore it. I will check the Github code again to see what MaxVisibleCount does and will add some help to the call so that the help will be available in B4A when you type for eg "mlc1."

I will have to see what the original Github code allows as far as the points that you want to plot is concerned. Can't remember from the top of my head. If there is perhaps a method that I have not exposed that could somehow solve the problem then I will add it to the wrapper.
 

tactic1960

Member
Licensed User
Longtime User
Hi Johan, first of all thanks for your job. But, in my app when i divide the x axis by day and when the number is zero, 0.0 is orrible. I prefer 0

No problem, currently my app is for me and not for the market.

upload_2015-11-2_22-21-52.png
 
Top