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

Similar threads

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

Johan Schoeman

Expert
Licensed User
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
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
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
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
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/threads/androidplot-real-time-line-chart-with-data-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
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
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
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
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

Johan Schoeman

Expert
Licensed 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

Johan Schoeman

Expert
Licensed 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

Johan Schoeman

Expert
Licensed 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

Top