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

Johan Schoeman · Sep 6, 2015

Have wrapped the Bar Charts part of the Github project. Have also amended the code in the Pie Chart wrapper in order to set the position of the legends. Posting the following:

1. B4A project that draws the updated Pie Charts
2. B4A project that draws the Bar Charts:

a. You can Pinch Zoom the bar charts
b. Click on a bar to show the highlight arrow. Click on the same bar to hide the highlight arrow.
c. You can double click anywhere on the bar chart to zoom in
d. See general comments in the code

3. Zipped library files. Copy them you your additional library folder.
4. The Java code as it stands at present.

Both the B4A projects posted in this post (Pie Charts and Bar Charts) use the same library files. Just posting the two projects separately else the B4A demo code gets too overwhelming.

From bar chart project:

Bar chart zoomed in with a pinch-zoom

From amended pie chart project:

some sample code of the bar chart project:

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 = ""

    mbc1.ChartDescription = "TITLE : Some Arbitrary Data"
    mbc1.ChartDescriptionColor = 0XFFFFA500                 'ORANGE
    mbc1.ChartDescriptionTextSize = 17

    mbc1.ValueTextColor = Colors.Black
    mbc1.ValueTextSize = 10.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.ValueTextColor = 0XFFFFA500
    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

    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

MarcoRome · Sep 6, 2015

Fantastic works ...really

Mahares · Sep 8, 2015

Attached is a complete project graphing a bar chart using Johan's MPCharts library. The data plotted is extracted from a SQLite database table created on the fly.
A couple of requests for Johan's lib:
1. Need ability to change text size of X-Value and Y-Value data.
2. Need ability to place X-values below chart.
3. Need ability to re-position the chart description.

Johan Schoeman · Sep 8, 2015

Mahares said:
Attached is a complete project graphing a bar chart using Johan's MPCharts library. The data plotted is extracted from a SQLite database table created on the fly.
A couple of requests for Johan's lib:
1. Need ability to change text size of X-Value and Y-Value data.
2. Need ability to place X-values below chart.
3. Need ability to re-position the chart description.

Attached project and library files solve most of your requests:
1. You can adjust the size of the X-Values and Y-Values as well as their color. Note that the right hand Y-Axis will follow the left hand Y-Axis (size and color)
2. You can place the X values at:
TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
3. You can reposition the chart description albeit only within the border of the custom view (I am wrapping this project and don't want to rewrite the original code)

Attached the following:
1. New B4A project for the Bar Charts
2. New library files

All previously added functionality remains as is. Please note that this lib includes Line Chats but it is WIP and will be finalised sometime soon - so don't use Line Charts at present.

Zoomed in with a pinch zoom (you can also just double tap on the graph to zoom in) and the Aug bar touched.

Sample code:

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 = ""

    mbc1.ChartDescription = "TITLE : Some Arbitrary Data"
    mbc1.ChartDescriptionColor = Colors.Blue
    mbc1.ChartDescriptionTextSize = 17
    mbc1.setDescriptionPosition(mbc1.left + 14%x ,mbc1.top + 1%y)
 
    mbc1.ValueTextColor = Colors.Black
    mbc1.ValueTextSize = 10.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.ValueTextColor = 0XFFFFA500
    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.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

Johan Schoeman · Sep 11, 2015

Have added Single Line Charts to the library. New library files are attached (mpChartLibraryFiles.zip) as well as the B4A project demonstrating the Line Charts. This is an extension of the libs posted before i.e all previous functionality for Pie Chats and Bar Charts are maintained while Single Line Charts have been added (working at present on multi line charts and combo line/bar charts).

You can pinch zoom (in and out) each of the graphs individually or double tap on a graph to zoom in.

Some sample code:

B4X:

#Region  Project Attributes
    #ApplicationLabel: MPLineChart
    #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, mlc2, mlc3, mlc4 As LineChart
  
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
    mlc1.LegendShapeSize = 7.0        'this line of code needs to be before mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mlc1.setTheLegendPositionAndForm("BELOW_CHART_LEFT", "CIRCLE")    'pass strings from the above comments
  
    mlc1.TheLegendColor = Colors.White
    mlc1.TheLegendTextSize = 15.0
    mlc1.LegendTitle = "Sine of x (x in degrees)"
  
    mlc1.ChartDescription = "TITLE : A Sine Curve"
    mlc1.ChartDescriptionColor = 0XFFFFA500                 'ORANGE
    mlc1.ChartDescriptionTextSize = 15

    mlc1.ValueTextColor = Colors.Black
    mlc1.ValueTextSize = 7.0
  
    Dim myfloat(73) As Float
    Dim myxvals(73) As String
    Dim j As Int  = 0
    For i = 0 To 360 Step 5
      myfloat(j) = SinD(i)
      myxvals(j) = i
      j = j + 1
    Next

    mlc1.LegendText = myxvals
    mlc1.ChartData = myfloat

    mlc1.DoubleTapToZoomEnabled = True
    mlc1.GridBackgroundColor = Colors.white
    mlc1.DrawBorders = True
    mlc1.DrawGridBackground = True
    mlc1.PinchZoom = True
    mlc1.ScaleEnabled = True
    mlc1.BorderColor = Colors.Red
    mlc1.BorderWidth = 7.0
    mlc1.DrawDashedLine = False
    mlc1.DrawGraphHollowCircles = True

    mlc1.DrawGraphValues = False
    mlc1.GraphCircleSize = 3.0
    mlc1.DrawAxisLine = True
    mlc1.DrawXaxisGridLines = True
    mlc1.DrawYaxisGridLines = True
    mlc1.GraphLineColor = Colors.Yellow
    mlc1.GraphLineWidth = 4.0
  
    'TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc1.XaxisLabelPosition = "BOTTOM"
    mlc1.XaxisTextColor = Colors.Magenta
    mlc1.XaxisTextSize = 15.0
  
    mlc1.YaxisTextColor = Colors.Green
    mlc1.YaxisTextSize = 15.0
    mlc1.LineData = 73   'this number must be the same as the number of elements in the above arrays
  


'    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
    mlc2.LegendShapeSize = 7.0        'this line of code needs to be before mlc2.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mlc2.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "SQUARE")    'pass strings from the above comments
  
    mlc2.TheLegendColor = Colors.Magenta
    mlc2.TheLegendTextSize = 15.0
    mlc2.LegendTitle = "Cosine of x (x in degrees)"
  
    mlc2.ChartDescription = "TITLE : A Cosine Curve"
    mlc2.ChartDescriptionColor = Colors.Black
    mlc2.ChartDescriptionTextSize = 15

    mlc2.ValueTextColor = Colors.Black
    mlc2.ValueTextSize = 7.0
  
    Dim myfloat(73) As Float
    Dim myxvals(73) As String
    Dim j As Int  = 0
    For i = 0 To 360 Step 5
      myfloat(j) = CosD(i)
      myxvals(j) = i
      j = j + 1
    Next

    mlc2.LegendText = myxvals
    mlc2.ChartData = myfloat

    mlc2.DoubleTapToZoomEnabled = True
    mlc2.GridBackgroundColor = Colors.white
    mlc2.DrawBorders = True
    mlc2.DrawGridBackground = True
    mlc2.PinchZoom = True
    mlc2.ScaleEnabled = True
    mlc2.BorderColor = Colors.Green
    mlc2.BorderWidth = 5.0
    mlc2.DrawDashedLine = False
    mlc2.DrawGraphHollowCircles = False

    mlc2.DrawGraphValues = False
    mlc2.GraphCircleSize = 0.0
    mlc2.DrawAxisLine = True
    mlc2.DrawXaxisGridLines = True
    mlc2.DrawYaxisGridLines = True
    mlc2.GraphLineColor = Colors.Cyan
    mlc2.GraphLineWidth = 2.0
  
    'TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc2.XaxisLabelPosition = "TOP"
    mlc2.XaxisTextColor = Colors.Red
    mlc2.XaxisTextSize = 15.0
  
    mlc2.YaxisTextColor = Colors.Yellow
    mlc2.YaxisTextSize = 15.0
    mlc2.LineData = 73   'this number must be the same as the number of elements in the above arrays   
  



'    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
    mlc3.LegendShapeSize = 7.0        'this line of code needs to be before mlc3.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mlc3.setTheLegendPositionAndForm("BELOW_CHART_RIGHT", "LINE")    'pass strings from the above comments
  
    mlc3.TheLegendColor = Colors.Green
    mlc3.TheLegendTextSize = 15.0
    mlc3.LegendTitle = "Day of Week"
  
    mlc3.ChartDescription = "TITLE : Arbitrary Data"
    mlc3.ChartDescriptionColor = Colors.Yellow
    mlc3.ChartDescriptionTextSize = 17

    mlc3.ValueTextColor = Colors.Black
    mlc3.ValueTextSize = 10.0
  
    Dim myfloat() As Float = Array As Float(15.5, 59.2, -16.8, -36.3, 47.8, 5.7, 54.9)
    Dim myxvals() As String = Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")

    mlc3.LegendText = myxvals
    mlc3.ChartData = myfloat

    mlc3.DoubleTapToZoomEnabled = True
    mlc3.GridBackgroundColor = Colors.White
    mlc3.DrawBorders = True
    mlc3.DrawGridBackground = True
    mlc3.PinchZoom = True
    mlc3.ScaleEnabled = True
    mlc3.BorderColor = Colors.LightGray
    mlc3.BorderWidth = 7.0
    mlc3.DrawDashedLine = True
    mlc3.DrawGraphHollowCircles = True

    mlc3.DrawGraphValues = True
    mlc3.GraphCircleSize = 9.0
    mlc3.GraphCircleColor = Colors.Cyan
    mlc3.DrawAxisLine = True
    mlc3.DrawXaxisGridLines = True
    mlc3.DrawYaxisGridLines = True
    mlc3.GraphLineColor = Colors.Red
    mlc3.GraphLineWidth = 7.0
  
    'TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc3.XaxisLabelPosition = "TOP"
    mlc3.XaxisTextColor = Colors.Blue
    mlc3.XaxisTextSize = 14.0
  
    mlc3.YaxisTextColor = Colors.White
    mlc3.YaxisTextSize = 13.0
    mlc3.LineData = 7   'this number must be the same as the number of elements in the above arrays       
  
  


'    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
    mlc4.LegendShapeSize = 7.0        'this line of code needs to be before mlc4.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mlc4.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")    'pass strings from the above comments
  
    mlc4.TheLegendColor = Colors.Yellow
    mlc4.TheLegendTextSize = 17.0
    mlc4.LegendTitle = "Some Data"
  
    mlc4.ChartDescription = "TITLE : Arbitrary Data"
    mlc4.ChartDescriptionColor = Colors.DarkGray
    mlc4.ChartDescriptionTextSize = 17

    mlc4.ValueTextColor = Colors.Blue
    mlc4.ValueTextSize = 15.0
  
    Dim myfloat() As Float = Array As Float(31.0, -29.0, 67.0, -48.0, 83.0, -54.0, 60.0, -15.0, 37.0, -45.0, 68.0, -5.0)
    Dim myxvals() As String = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")

    mlc4.LegendText = myxvals
    mlc4.ChartData = myfloat

    mlc4.DoubleTapToZoomEnabled = True
    mlc4.GridBackgroundColor = Colors.LightGray
    mlc4.DrawBorders = True
    mlc4.DrawGridBackground = True
    mlc4.PinchZoom = True
    mlc4.ScaleEnabled = True
    mlc4.BorderColor = Colors.Green
    mlc4.BorderWidth = 2.0
    mlc4.DrawDashedLine = False
    mlc4.DrawGraphHollowCircles = True

    mlc4.DrawGraphValues = False
    mlc4.GraphCircleSize = 4.0
    mlc4.GraphCircleColor = Colors.Red
    mlc4.DrawAxisLine = True
    mlc4.DrawXaxisGridLines = True
    mlc4.DrawYaxisGridLines = True
    mlc4.GraphLineColor = Colors.DarkGray
    mlc4.GraphLineWidth = 3.0
  
    'TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc4.XaxisLabelPosition = "BOTH_SIDED"
    mlc4.XaxisTextColor = Colors.White
    mlc4.XaxisTextSize = 14.0
  
    mlc4.YaxisTextColor = Colors.Blue
    mlc4.YaxisTextSize = 13.0
    mlc4.LineData = 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

Johan Schoeman · Sep 12, 2015

Added some additional functionality to the line chart (single line chart):
1. Ability to draw the line graph as a cubic line graph
2. Ability to specify the intensity of the cubic function to be applied
3. Ability to fill the area between the graph and the X-Axis
4. Ability to specify the fill color of the area between the graph and the X-Axis
5. Ability to set the minimum and maximum values of the Y-Axis (if not specified it will be determined automatically)
6. Ability to set the color of the crosshair that appears when a graph is touched.

All previously added functionality remains.

The pic below is the same as the one in post #7 above except for applying the additional functionality to the right bottom graph.

Posting updated B4A project and updated library files.

Johan Schoeman · Sep 12, 2015

Have wrapped the Horizontal Bar Charts part of the Github project. Posting the following:

1. B4A project that draws the Horizontal Bar Chart. You can Pinch Zoom (in/out) the bar chart as well as double tap to zoom in.
2. B4A library files.

Note that for the Horizontal Bar Chart the X-Axis is vertical and the Y-Axis is horizontal. For the X-Axis "TOP" is the right hand vertical axis (for the placement of X-Axis labels).

Some sample code:

B4X:

#Region  Project Attributes
    #ApplicationLabel: MPHorizontalBarChart
    #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 HorizontalBarChart
    Private mbc2 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")
   
'    HORIZONTAL BAR CHART   
   
'    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 = 15
'    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.DrawValueAboveBar = False
    mbc1.PinchZoom = True
    mbc1.ScaleEnabled = True
    mbc1.BorderColor = Colors.Yellow
    mbc1.BorderWidth = 3.0

'   TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mbc1.XaxisLabelPosition = "TOP"
    mbc1.XaxisTextSize = 15.0
    mbc1.XaxisTextColor = Colors.Magenta
   
    mbc1.DrawYaxisGridLines = True
    mbc1.YaxisTextColor = Colors.Green
    mbc1.YaxisTextSize = 15.0
   
    mbc1.BarData = 12   'this number must be the same as the number of elements in the above arrays 
   
   
'    VERTICAL BAR CHART

'    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
    mbc2.LegendShapeSize = 7.0        'this line of code needs to be before mbc2.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mbc2.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")    'pass strings from the above comments
   
    mbc2.TheLegendColor = Colors.yellow
    mbc2.TheLegendTextSize = 20.0
    mbc2.LegendTitle = "Months"

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

    'the following 3 arrays must have the same number of entries/elements
    mbc2.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)
    mbc2.LegendText = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
    mbc2.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 %

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

'   TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mbc2.XaxisLabelPosition = "TOP"
    mbc2.XaxisTextSize = 15.0
    mbc2.XaxisTextColor = Colors.Magenta
   
    mbc2.DrawYaxisGridLines = True
    mbc2.YaxisTextColor = Colors.Green
    mbc2.YaxisTextSize = 15.0
   
    mbc2.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

Mahares · Sep 12, 2015

In order to harness the power and versatility of Johan's MPLineChart lib, I imported data from a SQLite table and plotted it. The only 2 minor issues I ran into:
1. I could not toggle the Y-values on/off by touching points.
2. The Y-value labels text size is very small and there is no way to change the size: mlc1.DrawGraphValues = True
Great job Johan!

Johan Schoeman · Sep 12, 2015

The attached project (and new library files) adds radar / spider/ web charts to the library:
1. You can add a maximum of 5 data sets to the radar chart (see B4A project).
2. If you have added 5 data sets then you can display 1, 2, 3, 4, or 5 radar chars simultaneously by changing the BOLD value (see below) to 1, 2, 3, 4, or 5

mrc1.setRadarData(5,10)

3. If you touch a point on any of the colored charts then the crosshair will be displayed in the color of the chart that the touched point belongs to. See pics attached
4. You can rotate the chart around its centre point with your finger.
5. Make sure you understand the relationship between the sizes of the various arrays being passed and what the radar chart displays (legend text, chart data, graph colors, and x axis labels)
6. Keep the order of the code as it is in the attached project.
7. Enjoy! Sure you will figure it out...

The attached project added 5 data sets (values are for demonstration purposes only - actual financial calcs are not right. Data was only selected to get a good spread of the radar charts - so, financial people, don't shoot me!). By only changing the bold value in code mrc1.setRadarData(5,10) from 1 to 5 the attached pics were generated. Pics were rotated (by finger) randomly before taking the screen shots. That is why the "X-Axis" values are in different positions from pic-to-pic.

Posting new library files, B4A project demonstrating the radar charts, as well as the Java code as it stands at present. All previously added functionality for Line charts, vertical Bar charts, horizontal Bar charts, and Pie charts remain as posted in projects in previous posts (above).

mrc1.setRadarData(1,10)

mrc1.setRadarData(2,10)

mrc1.setRadarData(3,10)

mrc1.setRadarData(4,10)

mrc1.setRadarData(5,10)

Some sample code:

B4X:

#Region  Project Attributes
    #ApplicationLabel: MPRadarChart
    #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 mrc1 As RadarChart

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")

    mrc1.ChartDescription = "TITLE : Annual Performance - Company X"
    mrc1.ChartDescriptionColor = Colors.White
    mrc1.ChartDescriptionTextSize = 12

'    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

    mrc1.LegendShapeSize = 15.0
    mrc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","CIRCLE")
    mrc1.TheLegendColor = Colors.yellow
    mrc1.TheLegendTextSize = 10.0
    mrc1.LegendText = Array As String("2011", "2012", "2013", "2014", "2015")


    mrc1.ValueTextColor = Colors.Black
    mrc1.ValueTextSize = 12.0


'    mrc1.YaxisMinVal = -400          'commented it out so that the scale will be set automatically
'    mrc1.YaxisMaxVal = 1800           'commented it out so that the scale will be set automatically
    mrc1.YaxisTextSize = 10.0
    mrc1.YaxisTextColor = Colors.White

    mrc1.Chart_1_Data = Array As Float(1100.0, 550.0, 550.0, -300.0, 600.5, 445.0, 849.7, -250.4, -380.2, 345.0)
    mrc1.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)
    mrc1.Chart_3_Data = Array As Float(836.4, 1010.8, 985.6, 676.5, 1100.0, 730.0, 960.0, 450.0, 750.0, 1200)
    mrc1.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)
    mrc1.Chart_5_Data = Array As Float(1050.0, 850.0, 650.0, 1400.0, 760.8, -450.7, 934.9, 576.2, 896.4, -380.6)

    mrc1.XaxisTextColor = Colors.Cyan
    mrc1.XaxisTextSize = 12.0

    mrc1.ValueTextSize = 10.0
    mrc1.ValueTextColor = Colors.Yellow
    mrc1.DrawGraphValues = 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
    mrc1.GraphLineColor = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)
    mrc1.GraphLineWidth = 2.0
    mrc1.DrawFilled = True

    mrc1.WebConcentricColor = Colors.Green
    mrc1.WebRadialColor = Colors.Red
    mrc1.WebAlpha = 200
    mrc1.ConcentricLineWidth = 1.5
    mrc1.RadialLineWidth = 0.75
    mrc1.DrawWeb = True

    mrc1.XaxisLables = Array As String("Nett Sales", "Cost of Materials", "Gross Contribution", "DFL", "DFO", "Gross Margin", "Admin OH", "Selling OH", "Distribution OH", "EBITDA")

'   the number of charts to be drawn (maximum 5, in this case 5)
'   the number of x-axis values per chart (in this case 10 = number of elements in the array passed to mrc1.XaxisLables)
    mrc1.setRadarData(5,10)

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Johan Schoeman · Sep 13, 2015

Attached is an update for Bar Charts and Single Line Charts:
1. The chart description text size was previously limited to a float value between 6.0f and 16.0f. The upper limit has been adjusted to 25.0f in order to display a larger chart description text size.
2. You can now enable/disable display of each of the left and right Y-axis labels.
3. If you touch on a bar in the bar chart or a point in the line chart a pop-up will appear displaying the value of the bar/point that was touched. When you touch the same bar/point again the pop-up will disappear
4. See attached pic and code in the attached B4A project.

With reference to the pop-ups the following:
1. You can choose any of 4 different pop-up icons in the code by passing the appropriate value (see for eg the code mlc2.MarkerToUse = 2 for the line chart)
2. 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
3. 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.

Enjoy!

Posting an updated B4A project that demonstrates the above mentioned changes. Also positing the new/updated library files. Copy them to your additional library folder.

...and the same pic but graphs pinch zoomed (you can also just double tap on a chart to zoom in)

Some sample code:

B4X:

#Region  Project Attributes
    #ApplicationLabel: MPBarLineUpdate
    #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
    Private mlc1 As LineChart

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 = 15
'    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, 47.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.BarData = 12   'this number must be the same as the number of elements as in the above arrays


'    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
    mlc1.LegendShapeSize = 7.0        'this line of code needs to be before mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
    mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")    'pass strings from the above comments

    mlc1.TheLegendColor = Colors.Yellow
    mlc1.TheLegendTextSize = 17.0
    mlc1.LegendTitle = "Some Data"

    mlc1.ChartDescription = "TITLE : Arbitrary Data"
    mlc1.ChartDescriptionColor = Colors.DarkGray
    mlc1.ChartDescriptionTextSize = 25

    mlc1.ValueTextColor = Colors.Blue
    mlc1.ValueTextSize = 15.0

    Dim myfloat() As Float = Array As Float(31.0, -29.0, 67.0, -48.0, 83.0, -54.0, 60.0, -15.0, 37.0, -45.0, 68.0, -5.0)
    Dim myxvals() As String = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")

    mlc1.LegendText = myxvals
    mlc1.ChartData = myfloat

    mlc1.DoubleTapToZoomEnabled = True
    mlc1.GridBackgroundColor = Colors.LightGray
    mlc1.DrawBorders = True
    mlc1.DrawGridBackground = True
    mlc1.PinchZoom = True
    mlc1.ScaleEnabled = True
    mlc1.BorderColor = Colors.Green
    mlc1.BorderWidth = 2.0
    mlc1.DrawDashedLine = False
    mlc1.DrawGraphHollowCircles = True

    mlc1.DrawGraphValues = False
    mlc1.GraphCircleSize = 4.0
    mlc1.GraphCircleColor = Colors.Red
    mlc1.DrawAxisLine = True
    mlc1.DrawXaxisGridLines = True
    mlc1.DrawYaxisGridLines = True
    mlc1.GraphLineColor = Colors.DarkGray
    mlc1.GraphLineWidth = 3.0

    'TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
    mlc1.XaxisLabelPosition = "BOTH_SIDED"
    mlc1.XaxisTextColor = Colors.White
    mlc1.XaxisTextSize = 14.0

    mlc1.YaxisTextColor = Colors.Blue
    mlc1.YaxisTextSize = 13.0
    mlc1.DrawCubicGraph = True
    mlc1.CubicIntensity = 0.3
    mlc1.CrossHairColor = Colors.Red
    mlc1.YaxisMinVal = -120.0
    mlc1.YaxisMaxVal = 120.0
    mlc1.DrawFilled = True
    mlc1.FillColor = Colors.Green

    mlc1.ShowYaxisLeftLabels = False
    mlc1.ShowYaxisRightLabels = True  

    mlc1.MarkerToUse = 2

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

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

jsanchezc · Sep 13, 2015

Excellent!!!!!!, very good job!!!!

monki · Sep 14, 2015

Hello Johan
a good work is it possible to add the realtime chart lib

Many thank
Monki

Johan Schoeman · Sep 14, 2015

monki said:
Hello Johan
a good work is it possible to add the realtime chart lib

Many thank
Monki

That will be included in the library at some stage.

Johan Schoeman · Sep 14, 2015

This update adds the pop-up marker to the radar charts too (just for consistency throughout the project). Thus, Line Charts, Bar Charts (not Horizontal Bar Charts), and Radar Charts will now all show a pop-up with the value of the touched point/bar when you touch a point or bar (it will disappear if you touch the same point/bar again). If you want to change the color of the text within a popup you need to edit the xml files in folder /Object/res/layout of the B4A project. All 4 the files in this folder has their read only property set to READ ONLY. Change the read only property of these files to allow editing and then change the line
android:textColor="@android:color/white"
to whatever color you would like (such as red, yellow, magenta, blue, etc, etc). Then save the edited file(s) and set their property back to read only.

The pop-up value displayed is that of the data point/entry at the X/Y crossmark In the below pic the most left bottom point of the radar chart.

Also see small write up of Markers in post # 12.

Attached the B4A project demonstrating the pop-ups in the Radar Charts as well as the new library files.

Small piece of sample code:

B4X:

    mrc1.WebConcentricColor = Colors.Green
    mrc1.WebRadialColor = Colors.Red
    mrc1.WebAlpha = 200
    mrc1.ConcentricLineWidth = 1.5
    mrc1.RadialLineWidth = 0.75
    mrc1.DrawWeb = True
   
    mrc1.XaxisLables = Array As String("Nett Sales", "Cost of Materials", "Gross Contribution", "DFL", "DFO", "Gross Margin", "Admin OH", "Selling OH", "Distribution OH", "EBITDA")

    mrc1.MarkerToUse = 4
   
'   the number of charts to be drawn (maximum 5, in this case 3)
'   the number of x-axis values per chart (in this case 10 = number of elements in the array passed to mrc1.XaxisLables)
    mrc1.setRadarData(1,10)

Mahares · Sep 14, 2015

@Johan Schoeman:
I forgot to mention to you when I experimented with the single line chart that the pop-up balloons do not display the full value when you are plotting numbers like say: 1327498, it will be truncated to 1327.
Thanks

Johan Schoeman · Sep 14, 2015

Mahares said:
@Johan Schoeman:
I forgot to mention to you when I experimented with the single line chart that the pop-up balloons do not display the full value when you are plotting numbers like say: 1327498, it will be truncated to 1327.
Thanks

Hi @Mahares
Two possible solutions:
A
Edit the xml files in /Objects/res/layout and then change the code
android:textSize="12dp"
android:textColor="@android:color/white"

to change the text size and the color of the text of the popups

B
Edit the png files in Objects/res/drawable (with for eg GIMP) and increase the width of the markers. GIMP will allow you to de-link the aspect ratio between width and height and then you can adjust the width on its own.

Let me know if I can help with that (will take 5 minutes to do so) and I will post a new set of PNG files. They were wider/bigger before but I did not like such big pop-ups on the graphs so I edited the PNG files and decreased their size (mainly the width)

Johan Schoeman · Sep 16, 2015

The attached project adds Multi Line charts. It uses a lot of arrays to set up the individual line graphs within a chart. See the code within the project. You can customize each line graph within a chart to "your liking". It also has a very nice animation when a new chart it drawn. Click on the button at the bottom of the chart to cycle through some examples that I have created in the code.

The pics below is what the code in the project draws at present. You can obviously change your individual graphs to your liking (different X-axis data, different, Y-axis data, colours, etc.). There are lots of methods that can be applied to the charts.

You can draw/display from 1 to 5 line charts (see code in the B4A project). You can also load data for 5 graphs and just display for eg the first 2. It also allows you to for eg only display a defined portion of the X axis (and then obviously the corresponding y-axis values).

It incorporates all of the single line chart functionality in Post #7 above and some more (the pop-up marker views is still there if you touch a data point, etc, etc)

Uploading the B4A project and the new library files.

corwin42 · Sep 17, 2015

This library is getting awesome. Thank you very much. (looking forward for the combined chart.

)

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

Attachments

Expert

Expert

Attachments

Expert

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Member

Active Member

Expert

Expert

Attachments

Expert

Expert

Expert

Attachments

Expert