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

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

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

    Johan Schoeman Expert Licensed User

    Good!
     
    Mikonios likes this.
  2. Mikonios

    Mikonios Active Member Licensed User

    Hello again Schoeman

    I need on the x-axis data are not rounded and show 3 decimals. It is possible ?
    Similarly, the data in mlc1.MarkerToUse, displayed to 3 decimal places. It is possible?

    upload_2015-12-18_15-16-8.png
     
  3. Mikonios

    Mikonios Active Member Licensed User

    With the same data get differents graphs. It's posible ????
     

    Attached Files:

    • 7d.jpg
      7d.jpg
      File size:
      145.2 KB
      Views:
      26
    • 15d.jpg
      15d.jpg
      File size:
      225 KB
      Views:
      25
    • 31d.jpg
      31d.jpg
      File size:
      238 KB
      Views:
      23
    • 48d.jpg
      48d.jpg
      File size:
      237.3 KB
      Views:
      25
    Last edited: Dec 20, 2015
  4. Mikonios

    Mikonios Active Member Licensed User

    Delete old post and upload again. Can you probe ??
     

    Attached Files:

    Last edited: Dec 20, 2015
  5. Johan Schoeman

    Johan Schoeman Expert Licensed User

    You have this declared in Sub Process_Globals

    DevDelta = ( (100%x + 100%y) / (100dip + 200dip) - 1 )

    DevDelta = ( (100%x + 100%y) / (100dip + 200dip) - 1 )

    ...that causes the crash! The size of the activity is still unknown (or at least as far as B4A V5.50 is concerned). Interesting that an earlier version of B4A does not flag this as an error when you try compile the project...

    It should be moved to here:

    Code:
    Activity.LoadLayout("main")
     
        DevDelta = ( (
    100%x + 100%y) / (100dip + 200dip) - 1 )
        DevDelta = ( (
    100%x + 100%y) / (100dip + 200dip) - 1 )
        
    Activity.Color         = Colors.White
     
    Last edited: Dec 20, 2015
    Mikonios and DonManfred like this.
  6. Mikonios

    Mikonios Active Member Licensed User

    I have no errors when I run the application 3.82 version.

    I modified according to your instructions, but the graphics are still incorrect

    7 days: 181215D Red, Yellow, Green, Blue
    15 days: 181215D Yellow, Red, Blue, Green
    31 days: 181215D Yellow, Red, Blue, Green
    48 days: 181215D Yellow, Red, Blue, Green

    Example of 15 days, could not be less than 1.1 to 0.9 and display it on the bottom.

    How is posible ?
     
    Last edited: Dec 20, 2015
  7. Johan Schoeman

    Johan Schoeman Expert Licensed User

    You need to add this to your code:
    Code:
    mlc1.YaxisDependancy = Array As String("LEFT""LEFT""LEFT""LEFT")
    The wrapper has been set as follows:
    Code:
    private String[] lineAxisDependency = {"RIGHT""LEFT""RIGHT""LEFT""RIGHT"};
    Thus, if you don't specify that all line charts should be dependant on the LEFT y-axis then wrapper will automatically assign them to "RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT". If you enable your right y-axis then the anomaly that you see will actually make sense as your line1 and line3 charts are by default assigned to the RIGHT y-axis while your line2 and line4 charts are assigned to the LEFT y-axis. Best you set the YaxisDependancy to be all LEFT to avoid any confusion.

    Have tested it with your project other than the change that I have made as mentioned in post #108 above. It is working 100%...;)
     
    Mikonios likes this.
  8. Mahares

    Mahares Well Known Member Licensed User

    I tried to run Mikonios' example and the Yaxis always starts at 0.000 using any compilation mode and even if I set the min and max as follows:
    Code:
    mlc1.YaxisleftMinVal         = .8         
    mlc1.YaxisleftMaxVal         = 
    1.2
    How did you get the left Y axis to start at other than 0.
     
  9. Johan Schoeman

    Johan Schoeman Expert Licensed User

    He has "pinch zoomed" the graph before taking the snapshot...:)
     
    Mikonios likes this.
  10. Mahares

    Mahares Well Known Member Licensed User

    Thanks Johan, I understand that. But, shouldn' t the Y axis start at .8 as its lower most value without having to pinch the zoom, based on the min and max settings, but it does not. It always starts at 0?
     
  11. Mikonios

    Mikonios Active Member Licensed User

    Now work fine Johan. Many many thanks!!

    But the other line no compile::
    privateString[] lineAxisDependency = {"RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT"};

    Upload ProyectModified and new images::
     

    Attached Files:

    Johan Schoeman likes this.
  12. Johan Schoeman

    Johan Schoeman Expert Licensed User

    This line....
    privateString[] lineAxisDependency = {"RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT"};
    ....is in the wrapper and should not be added to your B4A code.

    Only this line should be added:
    mlc1.YaxisDependancy = ArrayAsString("LEFT", "LEFT", "LEFT", "LEFT")
     
    Mikonios likes this.
  13. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Here you go - new lib files especially for you...so that you can see your 3 decimals with the small values that you are using. It will display your small values to 3 decimals in the chart as well as for the marker view.

    1.png
     

    Attached Files:

    Mikonios likes this.
  14. Mikonios

    Mikonios Active Member Licensed User

    GUAO!! You are "The Very Best"
    I'm going probe .....

    Oh my goodness. It is really fantastic !!!
    With my Nick jejejejejeje
     
    Last edited: Dec 20, 2015
    Johan Schoeman likes this.
  15. Johan Schoeman

    Johan Schoeman Expert Licensed User

    I will have to look into that again Ali. Been so long since I have done that. But at the time of doing the wrapper (originally) it worked. Have changed the code a hell of a lot since then and will try and figure out why the y-axis min and max values now went missing...
     
    Last edited: Dec 20, 2015
    Mikonios likes this.
  16. Johan Schoeman

    Johan Schoeman Expert Licensed User

    On request - this is an update for the MultiLineChart part of this project:

    1. added ability the specify a single legend text color or for the legend text of each one of the legends to match that of its corresponding line color
    2. bug fix for setting the y-axis minimum and maximum values
    3. added setting of LegendXEntrySpace and LegendYEntrySpace (see the help when entering these methods)
    4. bug fix for DrawFilled and FillColor
    5. changed the y-axis dependency of all 5 the possible line charts to initially be that of the left y-axis
    6. all methods now have help/explanation incorporated

    One more request that I will try and accommodate is specifying the number of insignificant digits (0, 1, 2, or 3) on the popup markers. Will post an update if I can get it sorted out.

    Merry XMAS to everyone! Hope you have a wonderful day!

    Posting new library files and B4A project demonstrating the changes.

    1.png

    Sample code:

    Code:
    #Region  Project Attributes
        
    #ApplicationLabel: MPMultiLineChartV3
        
    #VersionCode: 3
        
    #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.
      
        
    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 mlc1  As MultiLineChart
        
    Private Button1 As Button
        
    Dim flag As Int = 0

        
    Private ImageView1 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",10000)
        ImageView1.Visible = 
    False

      
        mlc1.ChartDescription = 
    "TITLE : Just some random data"   'SORTED OUT DISPLAY OF DESCRIPTION IF NO TITLE IS SET - 22 OCT 2015
        mlc1.ChartDescriptionColor = Colors.Red
        mlc1.ChartDescriptionTextSize = 
    15  
        mlc1.GridBackgroundColor = 
    Colors.DarkGray
      
    '    RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE,
    '    LEFT_OF_CHART, LEFT_OF_CHART_CENTER, LEFT_OF_CHART_INSIDE,
    '    BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER,

    '   CIRCLE, SQUARE, LINE

        mlc1.LegendShapeSize = 
    10.0
        mlc1.setTheLegendPositionAndForm(
    "BELOW_CHART_CENTER","CIRCLE")
        mlc1.TheLegendColor = 
    Colors.White
        mlc1.TheLegendTextSize = 
    10.0  
        mlc1.LegendText = 
    Array As String("2011""2012""2013""2014""2015")
        mlc1.LegendTextColorsToMatchLineColors = 
    True                                      'ADDED 25 Dec 2015
        mlc1.LegendXEntrySpace = 25.0                                                      'ADDED 25 Dec 2015
        mlc1.LegendYEntrySpace = 25.0                                                      'ADDED 25 DEc 2015

        mlc1.ValueTextColor = 
    Array As Int(Colors.White, Colors.Red, Colors.White, Colors.Red, Colors.White)
        mlc1.ValueTextSize = 
    Array As Float(12.010.014.08.016.0)

        mlc1.YaxisTextSize = 
    10.0
      
    '   We are going to draw 5 charts/graphs
        mlc1.Chart_1_Data = Array As Float(10.030.020.0, -50.040.0, -30.045.0, -15.038.3, -18.929.8, -15.7)
        mlc1.Chart_2_Data = 
    Array As Float(1200.0750.0450.0960.0730.01100.0676.5985.61010.8836.4498.5965.3)  
        mlc1.Chart_3_Data = 
    Array As Float(-10.0, -30.0, -20.050.0, -40.030.0, -45.015.0, -38.318.9, -29.815.7)  
        mlc1.Chart_4_Data = 
    Array As Float(345.0, -380.2, -250.4849.7445.0600.5, -300.050.0550.01100.0894.2993.8)  
        mlc1.Chart_5_Data = 
    Array As Float(40.060.050.0, -80.070.0, -6075.0, -45.068.3, -48.959.8, -45.7)  
      
    '   25 DEC 2015 - THE DEFAULT Y-AXIS FOR ALL LINE CHARTS HAS BEEN SET TO THE LEFT Y-AXIS
    '    Dim ad() As String = Array As String("RIGHT", "LEFT", "RIGHT", "LEFT", "RIGHT")     'NEW - ADDED Y AXIS DEPENDANCY - 22 OCT 2015
    '    mlc1.YaxisDependancy = ad                                                           'NEW - ADDED Y AXIS DEPENDANCY - 22 OCT 2015

        mlc1.DrawGraphValues = 
    Array As Boolean(TrueTrueTrueTrueTrue)  
        mlc1.MaxVisibleValueCount = 
    20
      
    '   Maximum 5 colors to be passed ==> must be at least equal to the number of data sets that are passed i.e maximum 5
    '   If you pass only for eg 2 data sets then at least 2 colors need to be passed
    '   If more that 2 colors are passed with for eg only 2 data sets then only the first 2 colors will be used in the color array
        mlc1.LineColors = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)
        mlc1.GraphLineWidth = 
    Array As Float(2.03.04.05.06.0)
      
        mlc1.DrawFilled = 
    Array As Boolean(FalseFalseFalseFalseFalse)                                 'BUG FIX - 25 DEC 2015
        mlc1.FillColor = Array As Int(Colors.Yellow, Colors.Red, Colors.Blue, Colors.Green, Colors.Cyan)      'BUG FIX - 25 DEC 2015
      
        mlc1.XaxisTextColor = 
    Colors.Green
        mlc1.XaxisTextSize = 
    12.0  
        mlc1.XaxisLables = 
    Array As String("Jan""Feb""Mar""Apr""May""Jun""Jul""Aug""Sep""Oct""Nov""Dec")
    '  TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE
        mlc1.XaxisLabelPosition = "TOP"
        mlc1.XaxisTextAngle = 
    30                          'NEW - 'AMENDED CODE TO SET THE ANGLE OF THE X AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
        mlc1.VerticalGridColor = Colors.White             'NEW  - ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015

        mlc1.DrawXaxisGridLines = 
    True
      
        mlc1.DrawYaxisLeftGridLines = 
    True                 'NEW - ADDED 23 OCT 2015
        mlc1.DrawYaxisRightGridLines = False               'NEW - ADDED 23 OCT 2015
      
        mlc1.YaxisLeftMinVal = -
    250                        'BUG FIX 25 DEC 2015 TO SET LEFT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
        mlc1.YaxisLeftMaxVal = 1100                        'AMENDED 22 OCT 2015 TO SET LEFT Y AXIS MAX VAL INDEPENDANTLY - comment it out so that the scale will be set automatically

    '    mlc1.YaxisRightMinVal = -175                      'BUG FIX 25 DEC 2015 TO SET RIGHT Y AXIS MIN VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
    '    mlc1.YaxisRightMaxVal = 175                        'AMENDED 22 OCT 2015 TO SET RIGHT Y AXIS MAX VAL INDEPENDANTLY - comment it out so that the scale will be set automatically
      
        mlc1.YaxisTextSize = 
    10.0
      
        mlc1.YaxisLeftTextColor = 
    Colors.Cyan              'NEW - ADDED 23 OCT 2015   
        mlc1.YaxisRightTextColor = Colors.Yellow          'NEW - ADDED 23 OCT 2015
      
        mlc1.ShowYaxisRightLabels = 
    True
        mlc1.ShowYaxisLeftLabels = 
    True
      
        mlc1.DrawLeftGridDashed = 
    False                   'NEW - ADDED 23 OCT 2015
        mlc1.DrawRightGridDashed = True                   'NEW - ADDED 23 OCT 2015
      
        mlc1.YaxisTextAngle = -
    15                         'NEW - 'ADDED ABILITY TO SET THE ANGLE OF THE Y AXIS LABELS BETWEEN -90 and 90 - 22 OCT 2015
        mlc1.HorizontalGridColorLeft = Colors.White       'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
        mlc1.HorizontalGridColorRight = Colors.Yellow     'NEW - 'ADDED ABILITY TO SET THIS COLOR - 22 OCT 2015
      
        mlc1.CubicIntensity = 
    Array As Float(0.10.20.30.40.5)
        mlc1.DrawCubicGraph = 
    Array As Boolean(TrueFalseTrueFalseTrue)
        mlc1.DrawDashedLine = 
    Array As Boolean(TrueFalseTrueFalseTrue)
        mlc1.GraphCircleSize = 
    Array As Float(4.05.06.07.08.0)
        mlc1.GraphCircleColor = 
    Array As Int(Colors.Red, Colors.Green, Colors.Magenta, Colors.Black, Colors.Blue)
        mlc1.DrawGraphHollowCircles = 
    Array As Boolean(TrueFalseTrueFalseTrue)
        mlc1.MarkerToUse = 
    4
      
        mlc1.XAnimate = 
    False
        mlc1.YAnimate = 
    True
        mlc1.ChartAnimationTime = 
    2000                     'milliseconds
      
    '   the number of charts to be drawn (maximum 5, in this case 5)
    '   the number of x-axis values per chart (in this case 12 = number of elements in the array passed to mlc1.XaxisLables)
        mlc1.setLineData(5,12)
        flag = flag + 
    1
      
    '    mlc1.saveToGallery("mygraph", 50, mlc1.Width, mlc1.Height)
    '     mlc1.saveToPath("mygraph","", mlc1.Width, mlc1.Height)
      

    End Sub

    Sub Activity_Resume
      
    '    t.Enabled = True

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub

    Sub t_tick
      
        mlc1.SavedImageBackgroundColor = 
    Colors.red
        mlc1.saveToGallery(
    "mygraph"50)
        
    DoEvents
        mlc1.saveToPath(
    "mygraph","")
        
    DoEvents
      
        t.Enabled = 
    False
      
        
    DoEvents
        mlc1.Visible = 
    False
        
    DoEvents
      
        ImageView1.Left = mlc1.Left
        ImageView1.Top = mlc1.Top
        ImageView1.Height = mlc1.Height
        ImageView1.width = mlc1.width
        ImageView1.Bitmap = mlc1.ChartBitmap
        ImageView1.Visible = 
    True
      
      
    End Sub
     

    Attached Files:

    Last edited: Dec 25, 2015
    Mikonios and Mahares like this.
  17. Mikonios

    Mikonios Active Member Licensed User

    Perfect perfect ::
    2. bug fix for setting the y-axis minimum and maximum values

    Feliz Navidad !!!!
     
    Johan Schoeman likes this.
  18. jahswani

    jahswani Active Member Licensed User

    Great work.Spécial thanks to @Johan Schoeman For enriching this community more and more.Alors la Chapeau...
     
    Johan Schoeman likes this.
  19. BarryW

    BarryW Active Member Licensed User

    How to disable the rotation of PIE Chart... TNX...
     
  20. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Replace your library files with the attached new libraries and then add the following line to your B4A code:
    Code:
    mpc1.RotationEnabled = False
    BUT MAKE SURE YOU DELETE THE OLD LIBARY FILES COMPLETELY FROM YOUR ADDITIONAL LIBRARY FOLDER AND COPY THE NEW/ATTACHED LIBRARY FILES TO YOUR ADDITIONAL LIBRARY FOLDER.

    EDIT: Have added an updated B4A project to this post
     

    Attached Files:

    Last edited: Jan 3, 2016
    BarryW likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice