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

Edit 6 Sep 2015: Post #3 adds Single Vertical Bar Charts and update for Pie Charts
Edit 8 Sep 2015 Post #6 update for Single Vertical Bar Charts
Edit 11 Sep 2015 Post #7 adds Single Line Charts
Edit 12 Sep 2015 Post #8 update for Single Line Charts
Edit 12 Sep 2015 Post #9 adds Single Horizontal Bar Charts
Edit 12 Sep 2015 Post #11 adds Radar Charts
Edit 13 Sep 2015 Post #12 update for Single Line and Single Bar Charts
Edit 14 Sep 2015 Post #16 update for Radar Charts
Edit 16 Sep 2015 Post #19 adds Multiple Line Charts
Edit 17 Sep2016 Post #21 adds Multi Vertical Bar Charts
Edit 19 Sep 2015 Post #23 adds Multi Bubble Charts
Edit 19 Sep 2015 Post #24 adds Multi Horizontal Bar Charts
Edit 19 Sep 2015 Post #25 adds Multi Scatter Charts
Edit 19 Sep 2015 Post #26 adds Stacked Bar Charts
Edit 20 Sep 2015 Post #27 adds Candlestick Charts
Edit 20 Sep 2015 Post #28 adds Combined Line & Bar Charts
Edit 23 Sep 2015 Post #31 fixed no-show of Chart Title for Combined Charts and added ability to rotate X-axis labels between -30 and + 30 degrees

I am busy wrapping this Github project. Attached is the Pie Chart functionality of the project/library. Posting the B4A project and Library files. Copy the library files to your additional library folder.

Some remarks about the Pie Chart:
1. It will display the values passed as a percentage of the total of the values that you pass
2. There are 3 x arrays that are passed to the library. Ensure that you pass the same number of elements in each of the arrays.
3. When you click on a pie slice the slice will increase in radial size (see pics below)
4. If you click on the radial increased slice it will return to normal size.
5. You can spin the pie chart around its centre point (CW and ACW) with your finger.

Untouched ...

Pie.gif


1.png


Green slice touched ...

2.png


Pie Chart rotated with finger...

3.png



Some sample code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: MPChart
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private mpc1 As PieChart
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")

mpc1.DrawHoleEnabled = True
mpc1.HoleColorTransparent = True

mpc1.TransparentCircleColor = Colors.White
mpc1.TransparentCircleAlpha = 110

mpc1.HoleRadius = 58.0
mpc1.TransparentCircleRadius = 61.0

mpc1.DrawCenterText = True

mpc1.CenterText = "Wrapped by Johan"
mpc1.CenterTextColor = Colors.White
mpc1.CenterTextRadiusPercent = 100.0
mpc1.CenterTextSize = 15.0

mpc1.DrawSliceText = True
mpc1.HoleColor = Colors.Black
mpc1.TransparentCircleColor = Colors.Transparent

mpc1.setTheLegendPosition
mpc1.TheLegendColor = Colors.yellow
mpc1.TheLegendTextSize = 12.0
mpc1.LegendTitle = "MONTHS"

mpc1.ChartDescription = "TITLE : Some Arbitrary Data"
mpc1.ChartDescriptionColor = Colors.ARGB(200,0,255,255)
mpc1.ChartDescriptionTextSize = 17

mpc1.ValueTextColor = Colors.Black
mpc1.ValueTextSize = 15.0

mpc1.PieColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
mpc1.LegendText = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun")
mpc1.ChartData = Array As Float(128.0, 16.0, 46.0, 40.0, 30.0, 40.0)    'values - it will be converted to %

mpc1.PieData = 6

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aMPChart.zip
    7.9 KB · Views: 1,408
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,494
  • mpChartLibV1.15.zip
    355.2 KB · Views: 609
  • mpChartLibV1.16.zip
    355.7 KB · Views: 609
  • mpChartLibV1.17.zip
    355.8 KB · Views: 776
  • mpChartLibV1.18.zip
    356.4 KB · Views: 686
  • mpChartLibV1.20.zip
    358.1 KB · Views: 468
  • mpChartLibV1.21.zip
    358 KB · Views: 41
  • mpChartLibV1.22.zip
    359.2 KB · Views: 66
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan,
I have noticed that when the linegraph is zoomed, it is not possible to move the crosshair anymore, because then the graph is moving.
Is there aworkaround for this ?
Not sure I understand. If I zoom in I can still click on a point and the crosshair shows on whatever point I click....
 

Alex_Puz

Member
Licensed User
Longtime User
Not sure I understand. If I zoom in I can still click on a point and the crosshair shows on whatever point I click....
Hi Johan
In the Pie chart I need event of any segment to return index and value also need click event on the label in center.
In the Radar chart, I need assign to any concentric rings any color and width also with show point should be event to return index and value of point. All of those events need to start others subs
Thank you.
 

coldtech

Member
Licensed User
Longtime User
When using the the HorizontalBarChart (v.1.02) everything displays the decimal (I only want/use whole numbers in this scenario).

Using mbc1.ChartData = Array As Float(5, 12.3) I get 5.00 and 12.00 displayed.
 

freedom2000

Well-Known Member
Licensed User
Longtime User
HI,
FIrst of all congratulations to @Johan Schoeman for this amazing lib. It's really impressive and quite simple to setup.

I have tried to integrate it into an "local brewery App" that I am designing. So basically I just want to display temperature as time is passing !

Here is the result :
test.jpg


It's sincerely nice and clean
but I don't know how to suppress the legend (°C) . I can pass empty string but the blue dot remains...

Here is the code directly copied from example !

B4X:
    'ImageView1.Visible = False
    b1.Visible = True


    mlc1.ChartDescription = ""   'SORTED OUT DISPLAY OF DESCRIPTION IF NO TITLE IS SET - 22 OCT 2015
    mlc1.ChartDescriptionColor = Colors.Black
    mlc1.ChartDescriptionTextSize = 15
    mlc1.GridBackgroundColor = Colors.white

    mlc1.LegendShapeSize = 10.0

    mlc1.LegendTextColorsToMatchLineColors = True                                       'ADDED 25 Dec 2015


'    CIRCLE, SQUARE, LINE
    mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","CIRCLE")
    mlc1.LegendXEntrySpace = 35.0f                                                      'ADDED 25 Dec 2015
    mlc1.LegendYEntrySpace = 25.0f                                                      'ADDED 25 DEc 2015
    mlc1.TheLegendColor = Colors.Black
    mlc1.TheLegendTextSize = 10.0
    mlc1.LegendText = Array As String("°C")



    mlc1.YaxisTextSize = 10.0

'   We are going to draw 5 charts/graphs
    Dim ldcntr As Int = 0
    Dim ld1(37) As Float
    Dim ldx(37) As String
    For i = 0 To 360 Step 10
        ld1(ldcntr) = 100 * SinD(i)
        ldcntr = ldcntr + 1
    Next

    mlc1.Chart_1_Data = ld1


'   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(False)
    mlc1.GraphValueDigits = Array As Int(1)                                 'ADDED 5 JAN 2016 - only valid values are 0, 1, 2, 3
                                                                                        'x < 0 then it will be set to 0
                                                                                        'x > 4 then it will be set to 3
    mlc1.ValueTextColor = Array As Int(Colors.black)
    mlc1.ValueTextSize = Array As Float(10.0)

    mlc1.MaxVisibleValueCount = 500

'   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.blue)
    mlc1.GraphLineWidth = Array As Float(2.0)

    mlc1.DrawFilled = Array As Boolean(False)                                 'BUG FIX - 25 DEC 2015
    mlc1.FillColor = Array As Int(Colors.Yellow)      'BUG FIX - 25 DEC 2015

    mlc1.XaxisTextColor = Colors.Green
    mlc1.XaxisTextSize = 12.0
    mlc1.XaxisLables = ldx
    '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.Transparent             'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

    mlc1.DrawXaxisGridLines = False

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

    mlc1.YaxisLeftTextColor = Colors.Black              'NEW - ADDED 23 OCT 2015
    mlc1.YaxisRightTextColor = Colors.Yellow          'NEW - ADDED 23 OCT 2015

    mlc1.ShowYaxisRightLabels = False
    mlc1.ShowYaxisLeftLabels = True


    mlc1.DrawLeftGridDashed = False                   'NEW - ADDED 23 OCT 2015
    mlc1.DrawRightGridDashed = False                   'NEW - ADDED 23 OCT 2015

    mlc1.YaxisTextAngle = 0                         'NEW - 'ADDED ABILITY TO SET THE ANGLE OF THE Y AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
    mlc1.HorizontalGridColorLeft = Colors.DarkGray       'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
    mlc1.HorizontalGridColorRight = Colors.Transparent    'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

    mlc1.CubicIntensity = Array As Float(0.1)
    mlc1.DrawCubicGraph = Array As Boolean(False)
    mlc1.DrawDashedLine = Array As Boolean(False)
    mlc1.GraphCircleSize = Array As Float(2.0)
    mlc1.GraphCircleColor = Array As Int(Colors.blue)
    mlc1.DrawGraphHollowCircles = Array As Boolean(False)

    mlc1.NoOfMarkerDigits = 3                          'NEW - ADDED 5 JAN 2016 (the number of insignificant digits to display in the marker views)
    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(1,37)
    flag = flag + 1

'    mlc1.saveToGallery("mygraph", 50, mlc1.Width, mlc1.Height)
'     mlc1.saveToPath("mygraph","", mlc1.Width, mlc1.Height)
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
HI,
FIrst of all congratulations to @Johan Schoeman for this amazing lib. It's really impressive and quite simple to setup.

I have tried to integrate it into an "local brewery App" that I am designing. So basically I just want to display temperature as time is passing !

Here is the result :
View attachment 50625

It's sincerely nice and clean
but I don't know how :
  1. to suppress the -1 and -2 on the left axis
  2. suppress the legend (°C) . I can pass empty string but the blue dot remains...

Here is the code directly copied from example !

B4X:
    'ImageView1.Visible = False
    b1.Visible = True


    mlc1.ChartDescription = ""   'SORTED OUT DISPLAY OF DESCRIPTION IF NO TITLE IS SET - 22 OCT 2015
    mlc1.ChartDescriptionColor = Colors.Black
    mlc1.ChartDescriptionTextSize = 15
    mlc1.GridBackgroundColor = Colors.white

    mlc1.LegendShapeSize = 10.0

    mlc1.LegendTextColorsToMatchLineColors = True                                       'ADDED 25 Dec 2015


'    CIRCLE, SQUARE, LINE 
    mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER","CIRCLE")
    mlc1.LegendXEntrySpace = 35.0f                                                      'ADDED 25 Dec 2015
    mlc1.LegendYEntrySpace = 25.0f                                                      'ADDED 25 DEc 2015
    mlc1.TheLegendColor = Colors.Black
    mlc1.TheLegendTextSize = 10.0
    mlc1.LegendText = Array As String("°C")



    mlc1.YaxisTextSize = 10.0

'   We are going to draw 5 charts/graphs
    Dim ldcntr As Int = 0
    Dim ld1(37) As Float
    Dim ldx(37) As String
    For i = 0 To 360 Step 10
        ld1(ldcntr) = 100 * SinD(i)
        ldcntr = ldcntr + 1
    Next

    mlc1.Chart_1_Data = ld1


'   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(False)
    mlc1.GraphValueDigits = Array As Int(1)                                 'ADDED 5 JAN 2016 - only valid values are 0, 1, 2, 3
                                                                                        'x < 0 then it will be set to 0
                                                                                        'x > 4 then it will be set to 3
    mlc1.ValueTextColor = Array As Int(Colors.black)
    mlc1.ValueTextSize = Array As Float(10.0)

    mlc1.MaxVisibleValueCount = 500

'   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.blue)
    mlc1.GraphLineWidth = Array As Float(2.0)

    mlc1.DrawFilled = Array As Boolean(False)                                 'BUG FIX - 25 DEC 2015
    mlc1.FillColor = Array As Int(Colors.Yellow)      'BUG FIX - 25 DEC 2015

    mlc1.XaxisTextColor = Colors.Green
    mlc1.XaxisTextSize = 12.0
    mlc1.XaxisLables = ldx
    '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.Transparent             'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

    mlc1.DrawXaxisGridLines = False

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

    mlc1.YaxisLeftTextColor = Colors.Black              'NEW - ADDED 23 OCT 2015 
    mlc1.YaxisRightTextColor = Colors.Yellow          'NEW - ADDED 23 OCT 2015

    mlc1.ShowYaxisRightLabels = False
    mlc1.ShowYaxisLeftLabels = True


    mlc1.DrawLeftGridDashed = False                   'NEW - ADDED 23 OCT 2015
    mlc1.DrawRightGridDashed = False                   'NEW - ADDED 23 OCT 2015

    mlc1.YaxisTextAngle = 0                         'NEW - 'ADDED ABILITY TO SET THE ANGLE OF THE Y AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
    mlc1.HorizontalGridColorLeft = Colors.DarkGray       'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
    mlc1.HorizontalGridColorRight = Colors.Transparent    'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

    mlc1.CubicIntensity = Array As Float(0.1)
    mlc1.DrawCubicGraph = Array As Boolean(False)
    mlc1.DrawDashedLine = Array As Boolean(False)
    mlc1.GraphCircleSize = Array As Float(2.0)
    mlc1.GraphCircleColor = Array As Int(Colors.blue)
    mlc1.DrawGraphHollowCircles = Array As Boolean(False)

    mlc1.NoOfMarkerDigits = 3                          'NEW - ADDED 5 JAN 2016 (the number of insignificant digits to display in the marker views)
    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(1,37)
    flag = flag + 1

'    mlc1.saveToGallery("mygraph", 50, mlc1.Width, mlc1.Height)
'     mlc1.saveToPath("mygraph","", mlc1.Width, mlc1.Height)
JP, is this perhaps a better option?
https://www.b4x.com/android/forum/t...ta-passed-from-b4a-project.61521/#post-388909

I will in any case look into the issue that you have raised in the post above
 

freedom2000

Well-Known Member
Licensed User
Longtime User
Hi @Johan Schoeman

Sorry for the trouble, you were too fast... it seems that the "ghost figures" are on my side...
So the only question is how to suppress the legend !

I will check your link
thanks

PS : for other readers, don't look for the "ghosts" I have updated the post !
 

freedom2000

Well-Known Member
Licensed User
Longtime User
BTW, it seems that the real time plot lib does nt support the event to show a point value when clicking on it ?

Am I right ?
 

freedom2000

Well-Known Member
Licensed User
Longtime User
I have finally used the "non real time lib" in real time :)

Simply redefining the graph each time a new value is present :

B4X:
   Dim ld1(TheBeacon.TempList.Size) As Float
        Dim ldx(TheBeacon.TempList.Size) As String
       
        For i = 0 To TheBeacon.TempList.Size-1
            Dim temp As TimeTemp
            temp = TheBeacon.TempList.Get(i)
            ld1(i) = temp.Temp
        Next
        mlc1.Chart_1_Data = ld1

Seems to work fluently and haven't yet found a limit to ldx size !
Really great lib @Johan Schoeman
I planned to use google chart lib but not as well as yours !

Something that would be nice could be a kind of XY plot
the X axis point position being dependent of the value passed (and not regularly spaced as today)
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi @Johan Schoeman

Sorry for the trouble, you were too fast... it seems that the "ghost figures" are on my side...
So the only question is how to suppress the legend !

I will check your link
thanks

PS : for other readers, don't look for the "ghosts" I have updated the post !
Use the attached V1.03 library files. And in the B4A code:
B4X:
mlc1.LegendVisible = False           'or True
 

Attachments

  • mpChartLib_V1_03.zip
    355.1 KB · Views: 182

Johan Schoeman

Expert
Licensed User
Longtime User
When using the the HorizontalBarChart (v.1.02) everything displays the decimal (I only want/use whole numbers in this scenario).

Using mbc1.ChartData = Array As Float(5, 12.3) I get 5.00 and 12.00 displayed.
Use the attached V1.04 lib files and see the code inside the attached B4A project.

1.png


Sample Code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: MPMultiHorizontalBarChartNew
    #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 MultiHorizontalBarChart

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"
    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 2 charts/graphs
    mlc1.Chart_1_Data = Array As Float(1100.0, 550.0, 570.0, 300.6, 600.5, 445.0, 849.7, 250.4, 380.2, 345.0, 453.5, 783.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.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.BarColors = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)
   
    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.YaxisMinVal = -600           'commented it out so that the scale will be set automatically
'    mlc1.YaxisMaxVal = 1600           'commented it out so that the scale will be set automatically
    mlc1.YaxisTextSize = 10.0
    mlc1.YaxisTextColor = Colors.White   
    mlc1.ShowYaxisRightLabels = True
    mlc1.ShowYaxisLeftLabels = True
   
    mlc1.MarkerToUse = 1
   
    mlc1.XAnimate = True
    mlc1.YAnimate = False
    mlc1.XYAnimate = False
    mlc1.ChartAnimationTime = 2000                     'milliseconds
   
   
'********************************************************************   
    mlc1.YaxisLeftMinVal = 0.001
    mlc1.YaxisLeftMaxVal = 1200.0
   
    mlc1.YaxisRightStartAtZero = False
    mlc1.YaxisLeftStartAtZero = False
   
    mlc1.YaxisRightMinVal = 0.001
    mlc1.YaxisRightMaxVal = 1200
   
    mlc1.YaxisLeftLabelCount = 10
    mlc1.YaxisRightLabelCount = 7
   
    mlc1.NoOfMarkerDigits = 2
   
    mlc1.YaxisLeftNumberOfDigits = 2
    mlc1.YaxisRightNumberOfDigits = 0
   
    mlc1.LegendVisible = True
   
    mlc1.GraphValueDigits = Array As Int(1, 2, 3, 4, 5)                      'no of digits for graph1, graph2, graph3, graph4, graph5
   

   
'   the number of charts to be drawn (maximum 5, in this case 2)
'   the number of x-axis values per chart (in this case 12 = number of elements in the array passed to mlc1.XaxisLables)
    mlc1.setBarData(1,12)


End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • mpChartLib_V1_04.zip
    357.3 KB · Views: 194
  • b4aMPMultiHorizontalBarChartNew.zip
    29.6 KB · Views: 209

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan
In the Pie chart I need event of any segment to return index and value also need click event on the label in center.
In the Radar chart, I need assign to any concentric rings any color and width also with show point should be event to return index and value of point. All of those events need to start others subs
Thank you.
Use the attached V1.05 library files. Have added an event that will return the index and value of the segment that was touched. Have also added a long_pressed event (there is no method and listener that supports a click event on the label in the center - so the next best thing that I could add was a long_pressed anywhere on the chart)

Sample Code:
B4X:
#Region  Project Attributes
    #ApplicationLabel: MPPieChart
    #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.UsePercentValues = True
   
    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 = 12.0

    mpc1.DrawSliceText = True
    mpc1.HoleColor = Colors.Black
    mpc1.TransparentCircleColor = Colors.Transparent

    mpc1.RotationEnabled = True


'    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,
'    PIECHART_CENTER
    mpc1.TheLegendPosition = "RIGHT_OF_CHART"
   

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

    mpc1.ValueTextColor = Colors.Black
    mpc1.ValueTextSize = 12.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

Sub mpc1_value_selected(index As Int, value As Float)
   
    Log("index = " & index)
    Log("value = " & value)
   
   
End Sub

Sub mpc1_long_pressed
   
    Log("Long Pressed")
   
End Sub
 

Attachments

  • b4aMPPieChart.zip
    28.4 KB · Views: 199
  • mpChartLib_V1_05.zip
    358.4 KB · Views: 197

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan
In the Pie chart I need event of any segment to return index and value also need click event on the label in center.
In the Radar chart, I need assign to any concentric rings any color and width also with show point should be event to return index and value of point. All of those events need to start others subs
Thank you.
Use attached V1.06 library files. It adds an event to the RadarChart (value and index returned when touched). Also some other minor improvements. Changing the color and width of individual concentric rings is however not possible unless I do some significant changes to the original Github code.

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 : IS - 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.RotationEnabled = False


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

    mrc1.MarkerToUse = 2
    mrc1.NoOfMarkerDigits = 1
   
    mrc1.YaxisNumberOfDigits = 0
   
    mrc1.LegendVisible = False
   
   
   
   
'   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)
   
    mrc1.RotationEnabled = True

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub mrc1_value_selected(index As Int, value As Float)
   
    Log("index = " & index)
    Log("value = " & value)
   
End Sub
 

Attachments

  • mpChartLib_V1_06.zip
    359.4 KB · Views: 261
  • b4aMPRadarChart.zip
    28.8 KB · Views: 235

freedom2000

Well-Known Member
Licensed User
Longtime User
+50:)

donation has followed !

Hi again,

I have tested the lib all night long, one point every 5s.
This morning it was still running fine, more than 2000 points on the chart, no problem :)

Here is a simulation of my brewery, only temperature sensor is simulated :

temp_sim.jpg


Great lib :cool:
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi again,

I have tested the lib all night long, one point every 5s.
This morning it was still running fine, more than 2000 points on the chart, no problem :)

Here is a simulation of my brewery, only temperature sensor is simulated :

View attachment 50668

Great lib :cool:
Nice to hear it is working JP!
 
Top