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

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

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

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

Untouched ...

Pie.gif


1.png


Green slice touched ...

2.png


Pie Chart rotated with finger...

3.png



Some sample code:

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

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

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

End Sub

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

    Private mpc1 As PieChart
End Sub

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

mpc1.DrawHoleEnabled = True
mpc1.HoleColorTransparent = True

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

mpc1.HoleRadius = 58.0
mpc1.TransparentCircleRadius = 61.0

mpc1.DrawCenterText = True

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

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

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

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

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

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

mpc1.PieData = 6

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aMPChart.zip
    7.9 KB · Views: 1,570
  • mpChartLibraryFiles.zip
    221.5 KB · Views: 1,680
  • mpChartLibV1.15.zip
    355.2 KB · Views: 756
  • mpChartLibV1.16.zip
    355.7 KB · Views: 753
  • mpChartLibV1.17.zip
    355.8 KB · Views: 920
  • mpChartLibV1.18.zip
    356.4 KB · Views: 822
  • mpChartLibV1.20.zip
    358.1 KB · Views: 628
  • mpChartLibV1.21.zip
    358 KB · Views: 187
  • mpChartLibV1.22.zip
    359.2 KB · Views: 247
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
@Johan Schoeman It seems the value of the data point is ALWAYS shown when you click on a data point. I thought I could disable that behavior by passing FALSE to DrawGraphValues, but that only disables the INITIAL showing of the data value. When you touch a data point on the graph, the value is shown no matter what DrawGraphValues is set to.
Library V1.17 in post #1 of this thread. Use it as follows to display or hide the MarkerView

B4X:
mlc1.DisplayMarker = False    'or mlc1.DisplayMarker = True

Have set the default value in the library to FALSE

Have only added it to single and multi line charts for now.
 

incendio

Well-Known Member
Licensed User
Longtime User
Hi, thanks for this library.

I downloaded these files from post #1
1. mp4ChartLibraryfiles.zip
2. mp4ChartLibv1.17.zip
3. b4aMPChart.zip

There is double file in no 1 & 2, so I choose newer one.
When running example, got this error :
Unknown Member setTheLegendPosition

I was also tried sample from post #6 & #9, Barchart, got error when running:
An error has occured in sub main_activity_create, android.content.res
Resources$NotFoundException:
Resource ID #0x0


Am I missing something?
Note : B4A v9.5
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Hi, thanks for this library.

I downloaded these files from post #1
1. mp4ChartLibraryfiles.zip
2. mp4ChartLibv1.17.zip
3. b4aMPChart.zip

There is double file in no 1 & 2, so I choose newer one.
When running example, got this error :
Unknown Member setTheLegendPosition

I was also tried sample from post #6 & #9, Barchart, got error when running:
An error has occured in sub main_activity_create, android.content.res
Resources$NotFoundException:
Resource ID #0x0


Am I missing something?
Note : B4A v9.5
See post #12 for the ResourcesNotFoundException

Note that some methods have changed name over the years - find the correct method(s) in the drop down method list when for ex typing mlc1.
 

incendio

Well-Known Member
Licensed User
Longtime User
See post #12 for the ResourcesNotFoundException

Note that some methods have changed name over the years - find the correct method(s) in the drop down method list when for ex typing mlc1.

Example from post #6 & #9 now run OK, thanks, but example from post #1 still error.

In example post #1 I changed
setTheLegendPosition -> TheLegendPosition = "RIGHT_OF_CHART"

and got error :
ClassNotFoundExection : JHS.MPChart.pieViewWrapper
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Example from post #6 & #9 now run OK, thanks, but example from post #1 still error.

In example post #1 I changed
setTheLegendPosition -> TheLegendPosition = "RIGHT_OF_CHART"

and got error :
ClassNotFoundExection : JHS.MPChart.pieViewWrapper
Try with the attached project with library V1.17 that is posted in post #1 of this thread.
Extract ProjectRes.zip and copy the folder and its contents to be on the same folder level of the B4A project's /Object and /Files folder (just making it a bit easier so that the files don't get deleted if their properties are not set to READ ONLY when they are in the /Objects/res/drawable and Objects/res/layout folders and you compile the B4A project).

Long click on the pie chart to get a bitmap that will be displayed in the Imageview on the left. Handle the returned bitmap in your B4A code.


1.png
 

Attachments

  • b4aMPPieChart.zip
    8.6 KB · Views: 411
  • ProjectRes.zip
    24.4 KB · Views: 378

incendio

Well-Known Member
Licensed User
Longtime User
Try with the attached project with library V1.17 that is posted in post #1 of this thread.
Extract ProjectRes.zip and copy the folder and its contents to be on the same folder level of the B4A project's /Object and /Files folder (just making it a bit easier so that the files don't get deleted if their properties are not set to READ ONLY when they are in the /Objects/res/drawable and Objects/res/layout folders and you compile the B4A project).

Long click on the pie chart to get a bitmap that will be displayed in the Imageview on the left. Handle the returned bitmap in your B4A code.


View attachment 86143
Thanks, now work as a charm.

Perhaps, the example from post # could be updated with this.
 

seyed_27

Member
How to design the following chart
So that there is a gap between the two parts of the lines
 

Attachments

  • 123121068-510x293.jpg
    123121068-510x293.jpg
    42.1 KB · Views: 332

Alex_Puz

Member
Licensed User
Longtime User
Thank you for library Ver. 1.17.
Can you add some feature to radar chart which can feel area between two data with some color
something like this mrc1.setRadarFeel(2,3,Color.Blue)? and draw.feel false or true as mrc1.draw.feel(1)=True (False)
also something like mrc1.setRadarRing(radius,thickness)
 
Last edited:

seyed_27

Member
How to draw several horizontal lines with different colors in a specific position
Like this example
Horizontal point 69
Horizontal point 58
Horizontal point 49
How to design the following chart
So that there is a gap between the two parts of the lines
 

Fritzi

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

View attachment 37201

Bar chart zoomed in with a pinch-zoom

View attachment 37216

From amended pie chart project:

View attachment 37200


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

Hi, thanks for your great work !
I am a newbie and I saw, that the pie chart can be rotated with a finger.
Is it possible to rotate it by code ?

Thank you very much
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi, thanks for your great work !
I am a newbie and I saw, that the pie chart can be rotated with a finger.
Is it possible to rotate it by code ?

Thank you very much
Download lib files V1.18 from post #1 in this thread. Sample B4A project attached. Make sure you also download attached ProjectRes.zip, extract it, and copy the folders (with their contents) to be on the same folder level as the /Files folder of the B4A project.

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

#AdditionalRes: ..\ProjectRes

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

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

End Sub

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

    Private mpc1 As PieChart
   
    Private iv1 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
   
    t.Initialize("t", 1000)
   
    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
'     Use any one of the two methods below
'     mpc1.TheLegendPosition = "RIGHT_OF_CHART"
     mpc1.TheLegendPosition = mpc1.LP_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

    t.Enabled = True

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")
    Dim bm As Bitmap = mpc1.ChartBitmap
    iv1.Bitmap = bm
   
End Sub

Sub t_tick
   
    mpc1.spin(500, 0, 360)

   
End Sub
 

Attachments

  • b4aMPPieChart.zip
    8.7 KB · Views: 327
  • ProjectRes.zip
    24.4 KB · Views: 315
Last edited:

Fritzi

Member
Download lib files V1.18 from post #1 in this thread. Sample B4A project attached. Make sure you also download attached ProjectRes.zip, extract it, and copy the folders (with their contents) to be on the same folder level as the /Files folder of the B4A project.

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

#AdditionalRes: ..\ProjectRes

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

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

End Sub

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

    Private mpc1 As PieChart
  
    Private iv1 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
    t.Initialize("t", 1000)
  
    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
'     Use any one of the two methods below
'     mpc1.TheLegendPosition = "RIGHT_OF_CHART"
     mpc1.TheLegendPosition = mpc1.LP_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

    t.Enabled = True

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")
    Dim bm As Bitmap = mpc1.ChartBitmap
    iv1.Bitmap = bm
  
End Sub

Sub t_tick
  
    mpc1.spin(500, 0, 360)

  
End Sub

Hi, that looks sooo cooool :)
Now it looks like a wheel of fortune, when rotating. Amazing animation.
Thank you very much
 

Johan Hormaza

Well-Known Member
Licensed User
Longtime User
Download lib files V1.18 from post #1 in this thread. Sample B4A project attached. Make sure you also download attached ProjectRes.zip, extract it, and copy the folders (with their contents) to be on the same folder level as the /Files folder of the B4A project.

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

#AdditionalRes: ..\ProjectRes

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

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

End Sub

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

    Private mpc1 As PieChart
  
    Private iv1 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
    t.Initialize("t", 1000)
  
    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
'     Use any one of the two methods below
'     mpc1.TheLegendPosition = "RIGHT_OF_CHART"
     mpc1.TheLegendPosition = mpc1.LP_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

    t.Enabled = True

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")
    Dim bm As Bitmap = mpc1.ChartBitmap
    iv1.Bitmap = bm
  
End Sub

Sub t_tick
  
    mpc1.spin(500, 0, 360)

  
End Sub
Great job Dude!!
 

Fritzi

Member
Download lib files V1.18 from post #1 in this thread. Sample B4A project attached. Make sure you also download attached ProjectRes.zip, extract it, and copy the folders (with their contents) to be on the same folder level as the /Files folder of the B4A project.

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

#AdditionalRes: ..\ProjectRes

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

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

End Sub

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

    Private mpc1 As PieChart
  
    Private iv1 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
    t.Initialize("t", 1000)
  
    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
'     Use any one of the two methods below
'     mpc1.TheLegendPosition = "RIGHT_OF_CHART"
     mpc1.TheLegendPosition = mpc1.LP_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

    t.Enabled = True

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")
    Dim bm As Bitmap = mpc1.ChartBitmap
    iv1.Bitmap = bm
  
End Sub

Sub t_tick
  
    mpc1.spin(500, 0, 360)

  
End Sub

Hi Johan,
just another idea:
It would be additionally even more cooler, when a user spins the piechart and it returns values per code -/- range of the double variable for example.
x=mpc1.GetSpin(Value As Double) :)
 

Inman

Well-Known Member
Licensed User
Longtime User
Thanks for the library. One issue I noticed is that if the legend position is set to bottom centre, some text characters get cut off. Like if legend has a string called "Pending", the bottom portion of "g" gets cut off. Could you please fix this?

Also another request that is not urgent is to enable Typeface support for ValueText, LegendText etc... That way we can set the text style to bold if necessary.
 

MomoWen

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

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

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

Untouched ...

View attachment 47507

View attachment 37189

Green slice touched ...

View attachment 37190

Pie Chart rotated with finger...

View attachment 37191


Some sample code:

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

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

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

End Sub

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

    Private mpc1 As PieChart
End Sub

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

mpc1.DrawHoleEnabled = True
mpc1.HoleColorTransparent = True

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

mpc1.HoleRadius = 58.0
mpc1.TransparentCircleRadius = 61.0

mpc1.DrawCenterText = True

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

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

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

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

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

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

mpc1.PieData = 6

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

StackedBarChart Can you add more color layers
 

Johan Schoeman

Expert
Licensed User
Longtime User
Have added V1.20 to post #1 of this thread. It allows for highlighting up to 10 points simultaneously in the single line chart (requested by @Cenny). Have also added a method to clear all highlights.

multiple.png


Sample code in sub t_tick of the attached project:
B4X:
Sub t_tick
    cntr = cntr + 1
    If cntr = 10 Then cntr = 0
    mlc4.clearValues
    Dim myfloat() As Float = Array As Float(31.534, 63.419, -17.512, 27.334, 83.659, -54.103, 60.512, -15.773, -19.541, -45.845, 68.313, -5.708)
    mlc4.ChartData = myfloat
    mlc4.LineData = 12
    
    If cntr < 5 Then
        Dim myhighlight() As Int = Array As Int(0, 4, 7, 8)      <-------- prepare array of x value indexes to highlight simultaneously
        mlc4.MultipleHighlight = myhighlight                      <--------- pass the array of indexes to highlight to the library
    Else
        mlc4.clearHighlight           <---------clear the highlights programmatically
    End If   
        
End Sub
 

Attachments

  • MPLineChart27122021.zip
    291.2 KB · Views: 232

f0raster0

Well-Known Member
Licensed User
Longtime User
hi team,

Does any one know if this Line Chart work only for a fixed number of x-axis values? Link

B4X:
mlc1.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, 453.5, 783.7)
mlc1.XaxisLables = Array As String("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")
mlc1.setLineData(1,12)

We are seeking a solution to read data and display it on the graph, beginning from 1 without a fixed endpoint. Additionally, we want the option to display only a specified number of data points, such as 20, with the ability to scroll through the data.

Thanks in advance
 

Johan Schoeman

Expert
Licensed User
Longtime User
hi team,

Does any one know if this Line Chart work only for a fixed number of x-axis values? Link

B4X:
mlc1.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, 453.5, 783.7)
mlc1.XaxisLables = Array As String("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")
mlc1.setLineData(1,12)

We are seeking a solution to read data and display it on the graph, beginning from 1 without a fixed endpoint. Additionally, we want the option to display only a specified number of data points, such as 20, with the ability to scroll through the data.

Thanks in advance
Only a fixed number of data points.

You can try this one

 
Top