B4A Library MPAndroidCharts - Various type of graphs / charts (most recent library files in post #276)

Discussion in 'Additional libraries, classes and official updates' started by Johan Schoeman, Sep 5, 2015.

  1. Johan Schoeman

    Johan Schoeman Expert 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 ...

    Pie.gif

    1.png

    Green slice touched ...

    2.png

    Pie Chart rotated with finger...

    3.png


    Some sample code:

    Code:
    #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.016.046.040.030.040.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

    You can download and test any posting of mine in this thread but if you want to use it then you need to [​IMG]
     

    Attached Files:

    Last edited: Sep 3, 2016
  2. MarcoRome

    MarcoRome Expert Licensed User

    +12 ;)
     
    Johan Schoeman likes this.
  3. Johan Schoeman

    Johan Schoeman Expert Licensed User

    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:

    2.png

    Bar chart zoomed in with a pinch-zoom

    3.png

    From amended pie chart project:

    1.png


    some sample code of the bar chart project:

    Code:
    #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.746.0, -40.5101.640.915.725.935.6, -25.367.575.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
     

    Attached Files:

    Last edited: Sep 6, 2015
  4. MarcoRome

    MarcoRome Expert Licensed User

    Fantastic works ...really :)
     
    Johan Schoeman likes this.
  5. Mahares

    Mahares Well-Known Member Licensed User

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

    upload_2015-9-7_20-16-14.png
     

    Attached Files:

  6. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

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

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

    4.png

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

    5.png

    Sample code:

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

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

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

    End Sub

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

        
    Private mbc1 As BarChart
     
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        Activity.LoadLayout("main")
     
    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   LINE, CIRCLE, SQUARE
        mbc1.LegendShapeSize = 7.0        'this line of code needs to be before mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
        mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER""CIRCLE")    'pass strings from the above comments
     
        mbc1.TheLegendColor = 
    Colors.yellow
        mbc1.TheLegendTextSize = 
    20.0
        mbc1.LegendTitle = 
    ""

        mbc1.ChartDescription = 
    "TITLE : Some Arbitrary Data"
        mbc1.ChartDescriptionColor = 
    Colors.Blue
        mbc1.ChartDescriptionTextSize = 
    17
        mbc1.setDescriptionPosition(mbc1.left + 
    14%x ,mbc1.top + 1%y)
     
        mbc1.ValueTextColor = 
    Colors.Black
        mbc1.ValueTextSize = 
    10.0

        
    'the following 3 arrays must have the same number of entries/elements
        mbc1.BarColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan, Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
        mbc1.LegendText = 
    Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")
        mbc1.ChartData = 
    Array As Float(52.3, -16.746.0, -40.5101.640.915.725.935.6, -25.367.575.2)    'values - it will be converted to %

        mbc1.DoubleTapToZoomEnabled = 
    True
        mbc1.DrawBarShadow = 
    False
        mbc1.GridBackgroundColor = 
    Colors.white
        mbc1.ValueTextColor = 
    0XFFFFA500
        mbc1.DrawBorders = 
    True
        mbc1.DrawGridBackground = 
    True
        mbc1.DrawHighlightArrow = 
    True
        mbc1.DrawValueAboveBar = 
    True
        mbc1.PinchZoom = 
    True
        mbc1.ScaleEnabled = 
    True
        mbc1.BorderColor = 
    Colors.Yellow
        mbc1.BorderWidth = 
    3.0

    '   TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
        mbc1.XaxisLabelPosition = "BOTTOM"
        mbc1.XaxisTextSize = 
    15.0
        mbc1.XaxisTextColor = 
    Colors.Magenta
     
        mbc1.DrawYaxisGridLines = 
    True
        mbc1.YaxisTextColor = 
    Colors.Green
        mbc1.YaxisTextSize = 
    15.0

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

    End Sub

    Sub Activity_Resume

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub
     

    Attached Files:

    Last edited: Sep 8, 2015
    Mikonios, Cebuvi, ArminKH and 8 others like this.
  7. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

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

    1.png


    Some sample code:

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

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

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

    End Sub

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

        
    Private mlc1, mlc2, mlc3, mlc4 As LineChart
      
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        Activity.LoadLayout("main")
      
    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   LINE, CIRCLE, SQUARE
        mlc1.LegendShapeSize = 7.0        'this line of code needs to be before mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
        mlc1.setTheLegendPositionAndForm("BELOW_CHART_LEFT""CIRCLE")    'pass strings from the above comments
      
        mlc1.TheLegendColor = 
    Colors.White
        mlc1.TheLegendTextSize = 
    15.0
        mlc1.LegendTitle = 
    "Sine of x (x in degrees)"
      
        mlc1.ChartDescription = 
    "TITLE : A Sine Curve"
        mlc1.ChartDescriptionColor = 
    0XFFFFA500                 'ORANGE
        mlc1.ChartDescriptionTextSize = 15

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

        mlc1.LegendText = myxvals
        mlc1.ChartData = myfloat

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

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


    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

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

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

        mlc2.LegendText = myxvals
        mlc2.ChartData = myfloat

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

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



    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

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

        mlc3.ValueTextColor = 
    Colors.Black
        mlc3.ValueTextSize = 
    10.0
      
        
    Dim myfloat() As Float = Array As Float(15.559.2, -16.8, -36.347.85.754.9)
        
    Dim myxvals() As String = Array As String("Mon""Tue""Wed""Thu""Fri""Sat""Sun")

        mlc3.LegendText = myxvals
        mlc3.ChartData = myfloat

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

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


    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

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

        mlc4.ValueTextColor = 
    Colors.Blue
        mlc4.ValueTextSize = 
    15.0
      
        
    Dim myfloat() As Float = Array As Float(31.0, -29.067.0, -48.083.0, -54.060.0, -15.037.0, -45.068.0, -5.0)
        
    Dim myxvals() As String = Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")

        mlc4.LegendText = myxvals
        mlc4.ChartData = myfloat

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

        mlc4.DrawGraphValues = 
    False
        mlc4.GraphCircleSize = 
    4.0
        mlc4.GraphCircleColor = 
    Colors.Red
        mlc4.DrawAxisLine = 
    True
        mlc4.DrawXaxisGridLines = 
    True
        mlc4.DrawYaxisGridLines = 
    True
        mlc4.GraphLineColor = 
    Colors.DarkGray
        mlc4.GraphLineWidth = 
    3.0
      
        
    'TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
        mlc4.XaxisLabelPosition = "BOTH_SIDED"
        mlc4.XaxisTextColor = 
    Colors.White
        mlc4.XaxisTextSize = 
    14.0
      
        mlc4.YaxisTextColor = 
    Colors.Blue
        mlc4.YaxisTextSize = 
    13.0
        mlc4.LineData = 
    12   'this number must be the same as the number of elements in the above arrays       
      
      
      
      

    End Sub

    Sub Activity_Resume

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub
     

    Attached Files:

    Last edited: Sep 12, 2015
  8. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

    All previously added functionality remains.

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

    Posting updated B4A project and updated library files.

    2.png
     

    Attached Files:

  9. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

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

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

    1.png


    Some sample code:

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

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

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

    End Sub

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

        
    Private mbc1  As HorizontalBarChart
        
    Private mbc2 As BarChart
       
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        Activity.LoadLayout("main")
       
    '    HORIZONTAL BAR CHART   
       
    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   LINE, CIRCLE, SQUARE
        mbc1.LegendShapeSize = 7.0        'this line of code needs to be before mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
        mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER""CIRCLE")    'pass strings from the above comments
       
        mbc1.TheLegendColor = 
    Colors.yellow
        mbc1.TheLegendTextSize = 
    20.0
        mbc1.LegendTitle = 
    "Months"

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

        
    'the following 3 arrays must have the same number of entries/elements
        mbc1.BarColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan, Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
        mbc1.LegendText = 
    Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")
        mbc1.ChartData = 
    Array As Float(52.3, -16.746.0, -40.5101.640.915.725.935.6, -25.367.575.2)    'values - it will be converted to %

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

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

    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   LINE, CIRCLE, SQUARE
        mbc2.LegendShapeSize = 7.0        'this line of code needs to be before mbc2.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
        mbc2.setTheLegendPositionAndForm("BELOW_CHART_CENTER""CIRCLE")    'pass strings from the above comments
       
        mbc2.TheLegendColor = 
    Colors.yellow
        mbc2.TheLegendTextSize = 
    20.0
        mbc2.LegendTitle = 
    "Months"

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

        
    'the following 3 arrays must have the same number of entries/elements
        mbc2.BarColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan, Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
        mbc2.LegendText = 
    Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")
        mbc2.ChartData = 
    Array As Float(52.3, -16.746.0, -40.5101.640.915.725.935.6, -25.367.575.2)    'values - it will be converted to %

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

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

    End Sub

    Sub Activity_Resume

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub
     

    Attached Files:

  10. Mahares

    Mahares Well-Known Member Licensed User

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

    upload_2015-9-12_10-15-56.png
     

    Attached Files:

    jsanchezc and Johan Schoeman like this.
  11. Johan Schoeman

    Johan Schoeman Expert Licensed User

    The attached project (and new library files) adds radar / spider/ web charts to the library:
    1. You can add a maximum of 5 data sets to the radar chart (see B4A project).
    2. If you have added 5 data sets then you can display 1, 2, 3, 4, or 5 radar chars simultaneously by changing the BOLD value (see below) to 1, 2, 3, 4, or 5
    mrc1.setRadarData(5,10)​
    3. If you touch a point on any of the colored charts then the crosshair will be displayed in the color of the chart that the touched point belongs to. See pics attached
    4. You can rotate the chart around its centre point with your finger.
    5. Make sure you understand the relationship between the sizes of the various arrays being passed and what the radar chart displays (legend text, chart data, graph colors, and x axis labels)
    6. Keep the order of the code as it is in the attached project.
    7. Enjoy! Sure you will figure it out...:)

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

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

    mrc1.setRadarData(1,10)

    1.png


    mrc1.setRadarData(2,10)

    2.png

    mrc1.setRadarData(3,10)

    3.png

    mrc1.setRadarData(4,10)

    4.png


    mrc1.setRadarData(5,10)

    5.png

    Some sample code:

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

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

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

    End Sub

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

        
    Private mrc1 As RadarChart

    End Sub

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

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

    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   CIRCLE, SQUARE, LINE

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


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


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

        mrc1.Chart_1_Data = 
    Array As Float(1100.0550.0550.0, -300.0600.5445.0849.7, -250.4, -380.2345.0)
        mrc1.Chart_2_Data = 
    Array As Float(1200.0750.0450.0960.0730.01100.0676.5985.61010.8836.4)
        mrc1.Chart_3_Data = 
    Array As Float(836.41010.8985.6676.51100.0730.0960.0450.0750.01200)
        mrc1.Chart_4_Data = 
    Array As Float(345.0, -380.2, -250.4849.7445.0600.5, -300.050.0550.01100.0)
        mrc1.Chart_5_Data = 
    Array As Float(1050.0850.0650.01400.0760.8, -450.7934.9576.2896.4, -380.6)

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

        mrc1.ValueTextSize = 
    10.0
        mrc1.ValueTextColor = 
    Colors.Yellow
        mrc1.DrawGraphValues = 
    False

    '   Maximum 5 colors to be passed ==> must be at least equal to the number of data sets that are passed i.e maximum 5
    '   If you pass only for eg 2 data sets then at least 2 colors need to be passed
    '   If more that 2 colors are passed with for eg only 2 data sets then only the first 2 colors will be used in the color array
        mrc1.GraphLineColor = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)
        mrc1.GraphLineWidth = 
    2.0
        mrc1.DrawFilled = 
    True

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

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

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

    End Sub

    Sub Activity_Resume

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub
     

    Attached Files:

    Last edited: Sep 13, 2015
  12. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

    With reference to the pop-ups the following:
    1. You can choose any of 4 different pop-up icons in the code by passing the appropriate value (see for eg the code mlc2.MarkerToUse = 2 for the line chart)
    2. There are 4 files in the /Objects/res/layout folder of the attached B4A project named custom_marker_view_1, custom_marker_view_2, custom_marker_view_3, and custom_marker_view_4. They need to be included in any project that you develop. Don't change them. They are all set to read only
    3. Other than the icon.png file in the /Objects/res/drawable folder of the attached B4A project there are another 4 png images called marker1.png, marker2.png, marker3.png, and marker4.png. These are the markers that are used as pop-ups when you touch a bar / data point. These files are all set to read only. You can add your own marker image as long as what you name/replace your png file marker1.png, marker2.png, marker3.png, or marker4.png and then pass the appropriate value from the B4A project to the library.

    Enjoy!

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

    MPBarLineUpdate.png

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

    2.png

    Some sample code:

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

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

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

    End Sub

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

        
    Private mbc1 As BarChart
        
    Private mlc1 As LineChart

    End Sub

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

    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   LINE, CIRCLE, SQUARE
        mbc1.LegendShapeSize = 7.0        'this line of code needs to be before mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
        mbc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER""CIRCLE")    'pass strings from the above comments

        mbc1.TheLegendColor = 
    Colors.yellow
        mbc1.TheLegendTextSize = 
    20.0
        mbc1.LegendTitle = 
    "Months"

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

        mbc1.ValueTextColor = 
    Colors.Black
        mbc1.ValueTextSize = 
    12.0

        
    'the following 3 arrays must have the same number of entries/elements
        mbc1.BarColors = Array As Int(Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan, Colors.Blue, Colors.Yellow, Colors.Green, Colors.Red, Colors.Magenta, Colors.Cyan)
        mbc1.LegendText = 
    Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")
        mbc1.ChartData = 
    Array As Float(52.3, -16.746.0, -40.5101.6, -40.915.725.935.647.367.575.2)    'values - it will be converted to %

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

    '   TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
        mbc1.XaxisLabelPosition = "BOTTOM"
        mbc1.XaxisTextSize = 
    15.0
        mbc1.XaxisTextColor = 
    Colors.Magenta

        mbc1.DrawYaxisGridLines = 
    True
        mbc1.YaxisTextColor = 
    Colors.Green
        mbc1.YaxisTextSize = 
    15.0
        mbc1.ShowYaxisLeftLabels = 
    True
        mbc1.ShowYaxisRightLabels = 
    False
        mbc1.MarkerToUse = 
    1

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


    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   LINE, CIRCLE, SQUARE
        mlc1.LegendShapeSize = 7.0        'this line of code needs to be before mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER", "CIRCLE")
        mlc1.setTheLegendPositionAndForm("BELOW_CHART_CENTER""CIRCLE")    'pass strings from the above comments

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

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

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

        
    Dim myfloat() As Float = Array As Float(31.0, -29.067.0, -48.083.0, -54.060.0, -15.037.0, -45.068.0, -5.0)
        
    Dim myxvals() As String = Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")

        mlc1.LegendText = myxvals
        mlc1.ChartData = myfloat

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

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

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

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

        mlc1.ShowYaxisLeftLabels = 
    False
        mlc1.ShowYaxisRightLabels = 
    True  

        mlc1.MarkerToUse = 
    2

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

    End Sub

    Sub Activity_Resume

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub
     

    Attached Files:

    Last edited: Sep 13, 2015
  13. jsanchezc

    jsanchezc Member Licensed User

    Excellent!!!!!!, very good job!!!!
     
    Johan Schoeman likes this.
  14. monki

    monki Active Member Licensed User

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

    Many thank
    Monki
     
    Johan Schoeman likes this.
  15. Johan Schoeman

    Johan Schoeman Expert Licensed User

    That will be included in the library at some stage.;)
     
    Mikonios likes this.
  16. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

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

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

    6.png

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

    Small piece of sample code:

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

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

    Attached Files:

  17. Mahares

    Mahares Well-Known Member Licensed User

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

    Johan Schoeman Expert Licensed User

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

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

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

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

    Johan Schoeman Expert Licensed User

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

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

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

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

    Uploading the B4A project and the new library files.

    1.png

    2.png

    3.png

    4.png

    5.png

    6.png

    7.png

    8.png
     

    Attached Files:

    Last edited: Sep 16, 2015
    stanks, Mikonios, raphaelcno and 8 others like this.
  20. corwin42

    corwin42 Expert Licensed User

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