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

Alex_Puz

Member
Licensed User
Great! Thank you so much. Sure will donate... Let me earn a little of what I am doing.. If do same with Pie that what give me happy and many others
 

abarnett

Member
Licensed User
Use attached V1.06 library files. It adds an event to the RadarChart (value and index returned when touched).
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
    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)
    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
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
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
Hi Johan
Fab library. I'm using v1.06 multi line chart and can only get max of 7 rather that 10 lines. Any ideas

Cheers Andrew
 

abarnett

Member
Licensed User
Thanks for the example. Found the problem. You were right I was missing a value.

Andrew
Hi Johan,

Would you have any ideas why the animate of the multi line would not be fluid. I have been working on 4 channels but just increased to 8 channels and the plotting of the chart which was very smooth and customer loved it is now not. I have tried the animation time from 2000 to 500 and it has not helped. Would be nice to get it back to fluid.

Thanks
Andrew
 

abarnett

Member
Licensed User
Strange. I tested with your V5 example above and its not animated either, even though I can see the animate is set in code.

Donation made by the way..

Thanks
Andrew
 

Johan Schoeman

Expert
Licensed User
Strange. I tested with your V5 example above and its not animated either, even though I can see the animate is set in code.

Donation made by the way..

Thanks
Andrew

Andrew, please upload a sample project so that I can see what is happening in your project with the animation. Else send me a Dropbox link in a PM where I can download your project from.
 

abarnett

Member
Licensed User
Have uploaded the same program to another tablet and it animate fine. I will do some more investigation.

Thanks
Andrew
 

tufanv

Expert
Licensed User
Andrew, please upload a sample project so that I can see what is happening in your project with the animation. Else send me a Dropbox link in a PM where I can download your project from.
Dear Johan,

Thanks for the lib. I have used the updated line and barchart example in my app. There are 12 datas as float from 3.70 to 4.00 but all the data on the graph is rounded to 4. I also tried with the latest lib 1.06 but it still shows them rounded. Any idea ?
 

Johan Schoeman

Expert
Licensed User
Dear Johan,

Thanks for the lib. I have used the updated line and barchart example in my app. There are 12 datas as float from 3.70 to 4.00 but all the data on the graph is rounded to 4. I also tried with the latest lib 1.06 but it still shows them rounded. Any idea ?
Can you maybe upload a sample project and I will then look into it.
 

LouFromDetroit

Member
Licensed User
I notice that this feature does work OK:
mlc5.NoOfMarkerDigits= 3 'or any number

But it seems to revert to the EU style where the 1,279 would show as 1.279 and a decimal like 55.25 will show as 55,25

Is there a localization for this setting?

Note -this was using the mulitlinechart

Thanks.
 
Last edited:

beaker

Member
Licensed User
@LouFromDetroit I have the same issue with the MLC. I brought it up in post #146 in this same thread just under a year ago but Johan wasn't able to help. My app still has the same problem a year later! We've got 4 devices (2 HTC, 1 Samsung & 1 Tesco Hudl) here and it's the same on all devices.
 

Johan Schoeman

Expert
Licensed User
@LouFromDetroit I have the same issue with the MLC. I brought it up in post #146 in this same thread just under a year ago but Johan wasn't able to help. My app still has the same problem a year later! We've got 4 devices (2 HTC, 1 Samsung & 1 Tesco Hudl) here and it's the same on all devices.
I will post the Java code as it is at present. Please feel free to change it to accommodate your requirements and then recompile it into a new library. Doing a wrappper for a specific project does not mean that one should go and change the original code to accommodate special requirements. If you want to do so then you are more than welcome. I have wrapped what is available and added numerous additional features that were not available in the original Github project. So, if I post the code will you be able to amend it and then recompile it? Else there is no sense in me posting the Java code...
 

beaker

Member
Licensed User
I will post the Java code as it is at present. Please feel free to change it to accommodate your requirements and then recompile it into a new library. Doing a wrappper for a specific project does not mean that one should go and change the original code to accommodate special requirements. If you want to do so then you are more than welcome. I have wrapped what is available and added numerous additional features that were not available in the original Github project. So, if I post the code will you be able to amend it and then recompile it? Else there is no sense in me posting the Java code...
Sorry Johan, thanks for the offer of posting the Java code but I'm afraid that wouldn't do me any good (I just don't get on with Java at all. That's why I use B4A!). I think you might have misunderstood the issue as I don't think either myself or LouFromDetroit are asking for anything special. In my locale (UK) the decimal separator is a "." and the thousands separator is a ",". The axis labels show correctly according to my locale but the markers don't. I have accepted this as a bug and because nobody else seemed to have the same problem I didn't bother you any further with it. When I saw that LouFromDetroit appeared to be experiencing the same issue I thought I'd let him know that I have the same issue.
 

Johan Schoeman

Expert
Licensed User
@LouFromDetroit I have the same issue with the MLC. I brought it up in post #146 in this same thread just under a year ago but Johan wasn't able to help. My app still has the same problem a year later! We've got 4 devices (2 HTC, 1 Samsung & 1 Tesco Hudl) here and it's the same on all devices.
Here is the Java code - change it to accommodate your requirement. Note that the wrappers alone are in excess of 16 000 lines of code (this excludes the code in the original project + what I have amended / added to the original code). Enjoy!

Just by the way - it took just about 18 months of work to get to the last set of library files that I have posted - in my free time. I am giving it to you for free to change to your liking.
 

Attachments

beaker

Member
Licensed User
Here is the Java code - change it to accommodate your requirement. Note that the wrappers alone are in excess of 16 000 lines of code (this excludes the code in the original project + what I have amended / added to the original code). Enjoy!

Just by the way - it took just about 18 months of work to get to the last set of library files that I have posted - in my free time. I am giving it to you for free to change to your liking.
Thanks Johan. Even though I didn't have much hope of finding what I was looking for in the Java code you posted I think I might have found the piece of code that's responsible for the incorrect characters. I've found the following in the "formatNumber" function (in Utils.java) which is hard-coded to use commas as a decimal separator and the full-stop as a thousands separator:

B4X:
            // add decimal point
            if (charCount == digitCount) {
                out[ind--] = ',';
                charCount++;
                decimalPointAdded = true;

                // add thousand separators
            } else if (separateThousands && lval != 0 && charCount > digitCount) {

                if (decimalPointAdded) {

                    if ((charCount - digitCount) % 4 == 0) {
                        out[ind--] = '.';
                        charCount++;
                    }

                } else {

                    if ((charCount - digitCount) % 4 == 3) {
                        out[ind--] = '.';
                        charCount++;
                    }
                }
            }
Now, although I think I've found it I have no idea how to make it conform to the current locale or to then compile it into a library!
 

LouFromDetroit

Member
Licensed User
I did confirm that the main Y axis works OK for the settings using
mlc4.YaxisLeftNumberOfDigits = 1 'or any other number

So the end issue is a mismatch in the axis vs the marker for the separators.
That issue withstanding, it is still a very awesome effort from your side.
I will donate if my project turns to be successful.
 

Johan Schoeman

Expert
Licensed User
Thanks Johan. Even though I didn't have much hope of finding what I was looking for in the Java code you posted I think I might have found the piece of code that's responsible for the incorrect characters. I've found the following in the "formatNumber" function (in Utils.java) which is hard-coded to use commas as a decimal separator and the full-stop as a thousands separator:

B4X:
            // add decimal point
            if (charCount == digitCount) {
                out[ind--] = ',';
                charCount++;
                decimalPointAdded = true;

                // add thousand separators
            } else if (separateThousands && lval != 0 && charCount > digitCount) {

                if (decimalPointAdded) {

                    if ((charCount - digitCount) % 4 == 0) {
                        out[ind--] = '.';
                        charCount++;
                    }

                } else {

                    if ((charCount - digitCount) % 4 == 3) {
                        out[ind--] = '.';
                        charCount++;
                    }
                }
            }
Now, although I think I've found it I have no idea how to make it conform to the current locale or to then compile it into a library!
Post some screenshots of what you see and I will see if I can address it. I don't think the original Githib post makes provision for Locale but I will look into it once I understand the issue
 

wimpie3

Well-Known Member
Licensed User
Is it possible to paint the background below some values? Like the green color I've added here?
 

Attachments

Top