1. Black Friday Sale - 50% off

    B4A Standard for $29 instead of $59!
    Buy Now
    Dismiss Notice

B4A Library androidplot - Real Time Line Chart with data passed from B4A project

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

  1. Johan Schoeman

    Johan Schoeman Expert Licensed User

    I have started wrapping version 0.6.2 of this charting/graphing project. The attached project draws multiple line charts. See the sample code (or attached B4A project) for various settings of the graphs and the plot layout.

    This has really been a very challenging project thus far - way more complicated than MPAndroidCharts. Will post updates and additional type of charts going forward (but one thing that I will not do is to accommodate any special requests that would require modifying the original code - there are at present over 1400 lines of code in the wrapper just to wrap the multi-line chart part of the original project).

    The attached project will allow you to draw up to 5 line chats in a single plot. Most of the exposed methods in the library (I think just about all...) have been used in the attached project.

    Posting the following:
    1. B4A project demonstrating this wrapper (i.e multi line chart)
    2. B4A library files - copy them to your additional library folder

    1.png

    Sample code:

    Code:
    #Region  Project Attributes
        
    #ApplicationLabel: AndroidPlot_PieChart
        
    #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 lc1 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")
      
        lc1.GraphBackgroundColor = 
    Colors.DarkGray
        lc1.GraphFrameColor = 
    Colors.Blue
        lc1.GraphFrameWidth = 
    4.0
        lc1.GraphPlotAreaBackgroundColor = 
    Colors.ARGB(5000255)
        lc1.GraphTitleTextSize = 
    15
        lc1.GraphTitleColor = 
    Colors.White
        lc1.GraphTitleSkewX = -
    0.25
        lc1.GraphTitleUnderline = 
    True
        lc1.GraphTitleBold = 
    True
        lc1.GraphTitle = 
    "MONTHLY RAINFALL FOR SOME PLACE IN THE WORLD - 2010 TO 2014"              'put this statement last  
      
        lc1.LegendBackgroundColor = 
    Colors.White                          'it will be converted to an Alpha = 100
        lc1.LegendTextColor = Colors.Black
        lc1.LegendTextSize = 
    15.0

        lc1.DomianLabel = 
    "MONTH OF THE YEAR"  
        lc1.DomainLabelColor = 
    Colors.Green
        lc1.DomainLabelTextSize = 
    18.0

        lc1.XaxisGridLineColor = 
    Colors.ARGB(100,255,255,255)
        lc1.XaxisGridLineWidth = 
    2.0
        lc1.XaxisLabelTicks = 
    1
        lc1.XaxisLabelOrientation = 
    0
        lc1.XaxisLabelTextColor = 
    Colors.Red
        lc1.XaxisLabelTextSize = 
    15.0
        lc1.XAxisLabels = 
    Array As String("Jan","Feb""Mar","Apr""May","Jun","Jul""Aug","Sep","Oct"', "Nov","Dec")
      
        lc1.YaxisDivisions = 
    8
    '    lc1.YaxisRange(0, 9000)                                 'enable this line if you want to set the y-axis minimum and maximum values - else it will be scaled automatically
        lc1.YaxisValueFormat = lc1.ValueFormat_0                'could be ValueFormat_0, ValueFormat_1, ValueFormat_2, or ValueFormat_3
        lc1.YaxisGridLineColor = Colors.Black
        lc1.YaxisGridLineWidth = 
    2
        lc1.YaxisLabelTicks = 
    1
        lc1.YaxisLabelColor = 
    Colors.Yellow
        lc1.YaxisLabelOrientation = -
    30
        lc1.YaxisLabelTextSize = 
    12
        lc1.YaxisTitleColor = 
    Colors.Green
        lc1.YaxisTitleFakeBold = 
    False
        lc1.YaxisTitleTextSize = 
    20.0
        lc1.YaxisTitleUnderline = 
    True
        lc1.YaxisTitleTextSkewness = 
    0
        lc1.YaxisLabelAndTitleDistance = 
    60.0
        lc1.YaxisTitle = 
    "mm of rainfall recorded"                 'put this statement last
      
        lc1.MaxNumberOfEntriesPerLineChart = 
    10                    'this value must be equal to the number of x-axis labels that you pass

        lc1.Line_1_LegendText = 
    "2010"
        lc1.Line_1_Data = 
    Array As Float (1000.01500.01700.02000.01800.02500.02700.02800.03100.01600.0)
        lc1.Line_1_PointLabelTextColor = 
    Colors.Yellow
        lc1.Line_1_PointLabelTextSize = 
    15.0
        lc1.Line_1_LineColor = 
    Colors.LightGray
        lc1.Line_1_LineWidth = 
    2.0
        lc1.Line_1_PointColor = 
    Colors.Red
        lc1.Line_1_PointSize = 
    20.0
        lc1.Line_1_PointShape = lc1.SHAPE_ROUND
        lc1.Line_1_DrawDash = 
    True
        lc1.Line_1_DrawCubic = 
    True

        lc1.Line_2_LegendText = 
    "2011"
        lc1.Line_2_Data = 
    Array As Float (2200.02700.02900.02800.02600.03000.03300.03400.03900.01400.0)  
        lc1.Line_2_PointLabelTextColor = 
    Colors.Black
        lc1.Line_2_PointLabelTextSize = 
    15.0  
        lc1.Line_2_LineColor = 
    Colors.Green
        lc1.Line_2_LineWidth = 
    5.0
        lc1.Line_2_PointColor = 
    Colors.Cyan
        lc1.Line_2_PointSize = 
    20.0
        lc1.Line_2_PointShape = lc1.SHAPE_SQUARE
        lc1.Line_2_DrawDash = 
    True
        lc1.Line_2_DrawCubic = 
    False
      
        lc1.Line_3_LegendText = 
    "2012"
        lc1.Line_3_Data = 
    Array As Float (3200.03700.03900.03800.03600.04000.04300.04400.04900.0400.0)  
        lc1.Line_3_PointLabelTextColor = 
    Colors.Green
        lc1.Line_3_PointLabelTextSize = 
    15.0  
        lc1.Line_3_LineColor = 
    Colors.White
        lc1.Line_3_LineWidth = 
    3.0
        lc1.Line_3_PointColor = 
    Colors.Green
        lc1.Line_3_PointSize = 
    15.0
        lc1.Line_3_PointShape = lc1.SHAPE_BUTT
        lc1.Line_3_DrawDash = 
    False
        lc1.Line_3_DrawCubic = 
    True  
      
        lc1.Line_4_LegendText = 
    "2013"
        lc1.Line_4_Data = 
    Array As Float (5000.05300.05400.05900.01600.04200.04700.04900.04800.04600.0)  
        lc1.Line_4_PointLabelTextColor = 
    Colors.LightGray
        lc1.Line_4_PointLabelTextSize = 
    15.0  
        lc1.Line_4_LineColor = 
    Colors.Red
        lc1.Line_4_LineWidth = 
    7.0
        lc1.Line_4_PointColor = 
    Colors.Black
        lc1.Line_4_PointSize = 
    18.0
        lc1.Line_4_PointShape = lc1.SHAPE_ROUND
        lc1.Line_4_DrawDash = 
    False
        lc1.Line_4_DrawCubic = 
    False  
      
        lc1.Line_5_LegendText = 
    "2014"
        lc1.Line_5_Data = 
    Array As Float (7700.07900.07800.07600.08000.08300.08400.08900.07400.06200.0)  
        lc1.Line_5_PointLabelTextColor = 
    Colors.Transparent     'make the point label text to appear "invisible"
        lc1.Line_5_PointLabelTextSize = 15.0  
        lc1.Line_5_LineColor = 
    0xFFFF1493
        lc1.Line_5_LineWidth = 
    5.0
        lc1.Line_5_PointColor = 
    Colors.Transparent              'make the point to appear "invisible"
        lc1.Line_5_PointSize = 10.0
        lc1.Line_5_PointShape = lc1.SHAPE_SQUARE
        lc1.Line_5_DrawDash = 
    True
        lc1.Line_5_DrawCubic = 
    True      
      
        lc1.NumberOfLineCharts = 
    5                              'set the number of graphs to draw from the 1 to 5 graph that has been set up above
           
        lc1.DrawTheGraphs
      
    End Sub

    Sub Activity_Resume
      
    End Sub

    Sub Activity_Pause (UserClosed As Boolean)
      
    End Sub
    The library as it stands at present:

    AndroidPlot_0_6_2
    Author:
    Wrapped by Johan Schoeman
    Version: 1

    • Fields:
      • Labels As String[]
      Methods:
      • clone As Object
      • format (obj As Object, toAppendTo As StringBuffer, pos As FieldPosition) As StringBuffer
      • formatToCharacterIterator (arg0 As Object) As AttributedCharacterIterator
      • parseObject (string As String, position As ParsePosition) As Object
    LineChart
    Fields:

    • SHAPE_BUTT As String
      draw the point on the line as BUTT
    • SHAPE_ROUND As String
      draw the point on the line as ROUND
    • SHAPE_SQUARE As String
      draw the point on the line as SQUARE
    • ValueFormat_0 As String
      value will be displayed without and decimals
    • ValueFormat_1 As String
      value will be displayed with one decimal
    • ValueFormat_2 As String
      value will be displayed with two decimals
    • ValueFormat_3 As String
      value will be displayed with three decimals
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • DrawTheGraphs
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • YaxisRange (mimimum As Float, maximum As Float)
      Set the minimum and maximum range of the y-axis
      If not set then they y-axis min and max will be set automatically
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • DomainLabelColor As Int [write only]
      set the color of the domain label
    • DomainLabelTextSize As Float [write only]
      set the text size of the domain label
    • DomianLabel As String [write only]
      set the domain label
    • Enabled As Boolean
    • GraphBackgroundColor As Int [write only]
      set graph background color
    • GraphFrameColor As Int [write only]
      set the color of the outer frame around the graph
    • GraphFrameWidth As Float [write only]
      set the width of the outer frame around the graph
    • GraphLegendVisibility As Boolean [write only]
      set the legend visibility
    • GraphPlotAreaBackgroundColor As Int [write only]
      set the background color of the plot area
    • GraphTitle As String [write only]
      set the graph title
    • GraphTitleBold As Boolean [write only]
      set bold text of the graph main title
    • GraphTitleColor As Int [write only]
      set the color main graph title
    • GraphTitleSkewX As Float [write only]
      set the skewness to the main graph title
      a float value ranging from -1.0 to 1.0
    • GraphTitleTextSize As Int [write only]
      set the text size of the graph main title
    • GraphTitleUnderline As Boolean [write only]
      set undelining of the graph main title
    • Height As Int
    • Left As Int
    • LegendBackgroundColor As Int [write only]
      Set the background color of the legend
    • LegendTextColor As Int [write only]
      Set the legend text color
    • LegendTextSize As Float [write only]
      Set the legend text size
    • Line_1_Data() As Float [write only]
      set line 1 data to plot
    • Line_1_DrawCubic As Boolean [write only]
      draw Line_1's line graph as a cubic line
    • Line_1_DrawDash As Boolean [write only]
      draw Line_1's line graph as a dashed line
    • Line_1_LegendText As String [write only]
      set line 1 legend text
    • Line_1_LineColor As Int [write only]
      set the color of Line_1's graph
    • Line_1_LineWidth As Float [write only]
      set the width of Line_1's line graph
    • Line_1_PointColor As Int [write only]
      set the color of the points on Line_1's line graph
    • Line_1_PointLabelTextColor As Int [write only]
      set line 1 point label text color
    • Line_1_PointLabelTextSize As Float [write only]
      set line 1 point label text size
    • Line_1_PointShape As String [write only]
      set the shape of the points on Line_1's line graph
    • Line_1_PointSize As Float [write only]
      set the size of the points on Line_1's line graph
    • Line_2_Data() As Float [write only]
      set line 2 data to plot
    • Line_2_DrawCubic As Boolean [write only]
      draw Line_2's line graph as a cubic line
    • Line_2_DrawDash As Boolean [write only]
      draw Line_2's line graph as a dashed line
    • Line_2_LegendText As String [write only]
      set line 2 legend text
    • Line_2_LineColor As Int [write only]
      set the color of Line_2's graph
    • Line_2_LineWidth As Float [write only]
      set the width of Line_2's line graph
    • Line_2_PointColor As Int [write only]
      set the color of the points on Line_2's line graph
    • Line_2_PointLabelTextColor As Int [write only]
      set line 2 point label text color
    • Line_2_PointLabelTextSize As Float [write only]
      set line 2 point label text size
    • Line_2_PointShape As String [write only]
      set the shape of the points on Line_2's line graph
    • Line_2_PointSize As Float [write only]
      set the size of the points on Line_2's line graph
    • Line_3_Data() As Float [write only]
      set line 3 data to plot
    • Line_3_DrawCubic As Boolean [write only]
      draw Line_3's line graph as a cubic line
    • Line_3_DrawDash As Boolean [write only]
      draw Line_3's line graph as a dashed line
    • Line_3_LegendText As String [write only]
      set line 3 legend text
    • Line_3_LineColor As Int [write only]
      set the color of Line_3's graph
    • Line_3_LineWidth As Float [write only]
      set the width of Line_3's line graph
    • Line_3_PointColor As Int [write only]
      set the color of the points on Line_3's line graph
    • Line_3_PointLabelTextColor As Int [write only]
      set line 3 point label text color
    • Line_3_PointLabelTextSize As Float [write only]
      set line 3 point label text size
    • Line_3_PointShape As String [write only]
      set the shape of the points on Line_3's line graph
    • Line_3_PointSize As Float [write only]
      set the size of the points on Line_3's line graph
    • Line_4_Data() As Float [write only]
      set line 4 data to plot
    • Line_4_DrawCubic As Boolean [write only]
      draw Line_4's line graph as a cubic line
    • Line_4_DrawDash As Boolean [write only]
      draw Line_4's line graph as a dashed line
    • Line_4_LegendText As String [write only]
      set line 4 legend text
    • Line_4_LineColor As Int [write only]
      set the color of Line_4's graph
    • Line_4_LineWidth As Float [write only]
      set the width of Line_4's line graph
    • Line_4_PointColor As Int [write only]
      set the color of the points on Line_4's line graph
    • Line_4_PointLabelTextColor As Int [write only]
      set line 4 point label text color
    • Line_4_PointLabelTextSize As Float [write only]
      set line 4 point label text size
    • Line_4_PointShape As String [write only]
      set the shape of the points on Line_4's line graph
    • Line_4_PointSize As Float [write only]
      set the size of the points on Line_4's line graph
    • Line_5_Data() As Float [write only]
      set line 5 data to plot
    • Line_5_DrawCubic As Boolean [write only]
      draw Line_5's line graph as a cubic line
    • Line_5_DrawDash As Boolean [write only]
      draw Line_5's line graph as a dashed line
    • Line_5_LegendText As String [write only]
      set line 5 legend text
    • Line_5_LineColor As Int [write only]
      set the color of Line_5's graph
    • Line_5_LineWidth As Float [write only]
      set the width of Line_5's line graph
    • Line_5_PointColor As Int [write only]
      set the color of the points on Line_5's line graph
    • Line_5_PointLabelTextColor As Int [write only]
      set line 5 point label text color
    • Line_5_PointLabelTextSize As Float [write only]
      set line 5 point label text size
    • Line_5_PointShape As String [write only]
      set the shape of the points on Line_5's line graph
    • Line_5_PointSize As Float [write only]
      set the size of the points on Line_5's line graph
    • MaxNumberOfEntriesPerLineChart As Int [write only]
      set the number of entries per Line graph
    • NumberOfLineCharts As Int [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
    • XAxisLabels() As String [write only]
      set the x-axis labels
    • XaxisGridLineColor As Int [write only]
      set the color of the major grid lines parallel to the x-axis
    • XaxisGridLineWidth As Float [write only]
      set the width of the major grid lines parallel to the x-axis
    • XaxisLabelOrientation As Float [write only]
      set x-axis label orientation (degrees)
    • XaxisLabelTextColor As Int [write only]
      set x-axis label text color
    • XaxisLabelTextSize As Float [write only]
      set x-axis label text size
    • XaxisLabelTicks As Int [write only]
      set the number of x-axis ticks between consecutive labels
    • YaxisDivisions As Int [write only]
      Set the number of y-axis divisions
    • YaxisGridLineColor As Int [write only]
      set the color of the major grid lines parallel to the y-axis
    • YaxisGridLineWidth As Float [write only]
      set the width of the major grid lines parallel to the y-axis
    • YaxisLabelAndTitleDistance As Float [write only]
      set the distance between yaxis labels and the y-axis title
    • YaxisLabelColor As Int [write only]
      set the color of the y-axis labels
    • YaxisLabelOrientation As Float [write only]
      set the text orientation of the y-axis labels
    • YaxisLabelTextSize As Float [write only]
      set the text size of the y-axis labels
    • YaxisLabelTicks As Int [write only]
      set the number of y-axis ticks between consecutive labels
    • YaxisTitle As String [write only]
      set the range label (i.e the y-axis title)
    • YaxisTitleColor As Int [write only]
      set the y-axis title color
    • YaxisTitleFakeBold As Boolean [write only]
      set fake bold of the y-axis title
    • YaxisTitleTextSize As Float [write only]
      set the y-axis title text size
    • YaxisTitleTextSkewness As Float [write only]
      set the y-axis title text skewness
      a float value ranging from -1.0 to 1.0
    • YaxisTitleUnderline As Boolean [write only]
      set underlining of the y-axis title
    • YaxisValueFormat As String [write only]
      set the y-axis value format
      (eg 99, 99.1, 99.12, 99.123)
      pass the required ValueFormat_x string eg
      lc1.YaxisValueFormat = lc1.ValueFormat_3

    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: May 2, 2016
  2. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Posting an update. The update adds the following:

    1. lc1.YaxisShowZero = False (or True - see the detail help that is displayed when you use this call and the explanation that is given)
    2. pinch zoom the graph and drag the graph left/right after the pinch zoom (take note of what happens to the x-axis labels - it will only show during the drag if a y-axis value (range value) is in the vicinity of a valid x-axis value (domain value)
    3. lc1.GraphReset (reset the graph after a pinch zoom (see how I have implemented it with a timer in the attached sample project)
    4. Some minor "cosmetic" changes - eg increased the distance between the line charts and the values being displayed within the plot area


    GRAPH PINCH ZOOMED: lc1.GraphPinchZoomable = True and then pinch zoomed and dragged
    1.png

    Force y-axis to start at 0 (see the method help when entering this method): lc1.YaxisShowZero = True
    2.png

    Set the y-axis min and max values: lc1.YaxisRange(-1000, 10000)
    3.png
    Sample code:

    Code:
    #Region  Project Attributes
        
    #ApplicationLabel: AndroidPlot_MultiLineChart
        
    #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.
      
        
    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 lc1 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")
      
        t.Initialize(
    "t"10000)
      
        lc1.GraphPinchZoomable = 
    True              'see note in this methods help about implimentation of this functionality
        lc1.GraphBackgroundColor = Colors.DarkGray
        lc1.GraphFrameColor = 
    Colors.Blue
        lc1.GraphFrameWidth = 
    4.0
        lc1.GraphPlotAreaBackgroundColor = 
    Colors.ARGB(5000255)
        lc1.GraphTitleTextSize = 
    15
        lc1.GraphTitleColor = 
    Colors.White
        lc1.GraphTitleSkewX = -
    0.25
        lc1.GraphTitleUnderline = 
    True
        lc1.GraphTitleBold = 
    True
        lc1.GraphTitle = 
    "MONTHLY RAINFALL FOR SOME PLACE IN THE WORLD - 2010 TO 2014"              'put this statement last  
      
        lc1.LegendBackgroundColor = 
    Colors.White                                                  'it will be converted to an Alpha = 100
        lc1.LegendTextColor = Colors.Black
        lc1.LegendTextSize = 
    15.0

        lc1.DomianLabel = 
    "MONTH OF THE YEAR"  
        lc1.DomainLabelColor = 
    Colors.White
        lc1.DomainLabelTextSize = 
    18.0

        lc1.XaxisGridLineColor = 
    Colors.ARGB(100,255,255,255)
        lc1.XaxisGridLineWidth = 
    2.0
        lc1.XaxisLabelTicks = 
    1
        lc1.XaxisLabelOrientation = 
    0
        lc1.XaxisLabelTextColor = 
    Colors.White
        lc1.XaxisLabelTextSize = 
    15.0
        lc1.XAxisLabels = 
    Array As String("Jan","Feb""Mar","Apr""May","Jun","Jul""Aug","Sep","Oct"', "Nov","Dec")
      
        lc1.YaxisDivisions = 
    8
        lc1.YaxisShowZero = 
    False
        lc1.YaxisRange(-
    100010000)                                 'enable this line if you want to set the y-axis minimum and maximum values - else it will be scaled automatically
        lc1.YaxisValueFormat = lc1.ValueFormat_0                'could be ValueFormat_0, ValueFormat_1, ValueFormat_2, or ValueFormat_3
        lc1.YaxisGridLineColor = Colors.Black
        lc1.YaxisGridLineWidth = 
    2
        lc1.YaxisLabelTicks = 
    1
        lc1.YaxisLabelColor = 
    Colors.Yellow
        lc1.YaxisLabelOrientation = -
    30
        lc1.YaxisLabelTextSize = 
    12
        lc1.YaxisTitleColor = 
    Colors.Green
        lc1.YaxisTitleFakeBold = 
    False
        lc1.YaxisTitleTextSize = 
    20.0
        lc1.YaxisTitleUnderline = 
    True
        lc1.YaxisTitleTextSkewness = 
    0
        lc1.YaxisLabelAndTitleDistance = 
    60.0
        lc1.YaxisTitle = 
    "mm of rainfall recorded"                 'put this statement last
      
        lc1.MaxNumberOfEntriesPerLineChart = 
    10                    'this value must be equal to the number of x-axis labels that you pass

        lc1.Line_1_LegendText = 
    "2010"
        lc1.Line_1_Data = 
    Array As Float (3000.01000.01700.02000.01800.02500.02700.02800.03100.01600.0)
        lc1.Line_1_PointLabelTextColor = 
    Colors.Yellow
        lc1.Line_1_PointLabelTextSize = 
    10.0
        lc1.Line_1_LineColor = 
    Colors.LightGray
        lc1.Line_1_LineWidth = 
    2.0
        lc1.Line_1_PointColor = 
    Colors.Red
        lc1.Line_1_PointSize = 
    10.0
        lc1.Line_1_PointShape = lc1.SHAPE_ROUND
        lc1.Line_1_DrawDash = 
    True
        lc1.Line_1_DrawCubic = 
    True


        lc1.Line_2_LegendText = 
    "2011"
        lc1.Line_2_Data = 
    Array As Float (2200.02700.02900.02800.02600.03000.03300.03400.03900.01400.0)  
        lc1.Line_2_PointLabelTextColor = 
    Colors.Black
        lc1.Line_2_PointLabelTextSize = 
    10.0  
        lc1.Line_2_LineColor = 
    Colors.Green
        lc1.Line_2_LineWidth = 
    5.0
        lc1.Line_2_PointColor = 
    Colors.Cyan
        lc1.Line_2_PointSize = 
    10.0
        lc1.Line_2_PointShape = lc1.SHAPE_SQUARE
        lc1.Line_2_DrawDash = 
    True
        lc1.Line_2_DrawCubic = 
    False

      
        lc1.Line_3_LegendText = 
    "2012"
        lc1.Line_3_Data = 
    Array As Float (3200.03700.03900.03800.03600.04000.04300.04400.04900.0400.0)  
        lc1.Line_3_PointLabelTextColor = 
    Colors.Green
        lc1.Line_3_PointLabelTextSize = 
    10.0  
        lc1.Line_3_LineColor = 
    Colors.White
        lc1.Line_3_LineWidth = 
    3.0
        lc1.Line_3_PointColor = 
    Colors.Green
        lc1.Line_3_PointSize = 
    10.0
        lc1.Line_3_PointShape = lc1.SHAPE_BUTT
        lc1.Line_3_DrawDash = 
    False
        lc1.Line_3_DrawCubic = 
    True  

      
        lc1.Line_4_LegendText = 
    "2013"
        lc1.Line_4_Data = 
    Array As Float (5000.05300.05400.05900.01600.04200.04700.04900.04800.04600.0)  
        lc1.Line_4_PointLabelTextColor = 
    Colors.LightGray
        lc1.Line_4_PointLabelTextSize = 
    10.0  
        lc1.Line_4_LineColor = 
    Colors.Red
        lc1.Line_4_LineWidth = 
    7.0
        lc1.Line_4_PointColor = 
    Colors.Black
        lc1.Line_4_PointSize = 
    10.0
        lc1.Line_4_PointShape = lc1.SHAPE_ROUND
        lc1.Line_4_DrawDash = 
    False
        lc1.Line_4_DrawCubic = 
    False

      
        lc1.Line_5_LegendText = 
    "2014"
        lc1.Line_5_Data = 
    Array As Float (7700.07900.07800.07600.08000.08300.08400.08900.07400.06200.0)  
        lc1.Line_5_PointLabelTextColor = 
    Colors.White     'make the point label text to appear "invisible"
        lc1.Line_5_PointLabelTextSize = 10.0  
        lc1.Line_5_LineColor = 
    0xFFFF1493
        lc1.Line_5_LineWidth = 
    5.0
        lc1.Line_5_PointColor = 
    Colors.White              'make the point to appear "invisible"
        lc1.Line_5_PointSize = 10.0
        lc1.Line_5_PointShape = lc1.SHAPE_SQUARE
        lc1.Line_5_DrawDash = 
    True
        lc1.Line_5_DrawCubic = 
    True      

      
        lc1.NumberOfLineCharts = 
    5                              'set the number of graphs to draw from the 1 to 5 graph that has been set up above
           
        lc1.DrawTheGraphs
      
    End Sub

    Sub Activity_Resume
      
        t.Enabled = 
    True
      
    End Sub

    Sub Activity_Pause (UserClosed As Boolean)
      
        t.Enabled = 
    False
      
    End Sub

    Sub t_tick
      
        lc1.GraphReset
      
    End Sub
     

    Attached Files:

    Ohanian and wonder like this.
  3. Johan Schoeman

    Johan Schoeman Expert Licensed User

    I will revisit this sometime in future....at the moment just done for the fun of it. Performs very much like an oscilloscope with real time animation...note that the data generation takes place inside the wrapper at present...

    The example changes the frequency and number of points via a timer in the B4A project.

    1.png

    2.png
     

    Attached Files:

    Last edited: Dec 21, 2015
    wonder and JordiCP like this.
  4. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Really really nice to see this one in action - real time graph plotting the sensor orientation (Azimuth, Pitch, and Roll) of your device as you move/tilt it around. Will get back to this one to adapt it for B4A to be used as a dynamic line chart/graph.

    1.png


    2.png
     

    Attached Files:

    javierfs and wonder like this.
  5. Johan Schoeman

    Johan Schoeman Expert Licensed User

    It adds to the project in post #4. New library files attached....

    1.png

    2.png
     

    Attached Files:

  6. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Attached project will draw up to 5 simultaneous Real Time line graphs with data passed from the B4A project. See the attached B4A project. Also posting the new library files.

    You can set the buffer/display size for the X-Axis. X-axis labels can be changed dynamically (via Strings - see the code in the timer) to for eg accommodate a "timing" x-axis.

    See comments that I have added to effect fixed x-axis labels (this will correspond with the index of the range value at that position. Once the buffer reached its set size the oldest data gets deleted and new data gets added.

    1.png

    2.png

    Some sample code:

    Code:
    #Region  Project Attributes
        
    #ApplicationLabel: b4aAndroidPlot_RealTimeLineChart
        
    #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.
       
        
    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.

        
    Dim a As Int = 0
        
    Dim b As Int = 30
        
    Dim c As Int = 60
        
    Dim d As Int = 90
        
    Dim e As Int = 121
        
    Dim bufsize As Int = 180                                   'set the data buffer size here i.e how many values to display in the plot area
        Dim xlab(bufsize) As String   
        
    Private lc1 As RealTimeLineChart

        
    Dim xlabeltrack As Int = 0
       
    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"100)
       
        lc1.GraphTitleColor = 
    Colors.White
        lc1.GraphTitleSkewX = -
    0.15
        lc1.GraphTitleBold = 
    True
        lc1.GraphTitleTextSize = 
    20.0
        lc1.GraphPlotAreaBackgroundColor = 
    Colors.DarkGray          'this will paint the plotting area DrakGray regardless of what GraphBackgroundColor has been set to
        lc1.GraphBackgroundColor = Colors.Transparent               'this will paint everything within the outer frame to be white
        lc1.GraphFrameColor = Colors.Red                            'this adjusts only the outer frame color
        lc1.GraphFrameWidth = 2.0
        lc1.GraphBufferSize = bufsize
        lc1.GraphTitle = 
    "REAL TIME LINE CHART - POWERED BY B4A"   

        lc1.DomainLabelColor = 
    Colors.Cyan
        lc1.DomainLabelTextSize = 
    20
        lc1.DomianLabel = 
    "Degrees"
       
        lc1.YaxisRangeMode = lc1.YaxisMode_FIXED                    
    'the other option is FIXED
        lc1.YaxisRange(-1.51.5)
        lc1.YaxisDivisions = 
    10
        lc1.YaxisLabelTicks = 
    1
        lc1.YaxisShowZero = 
    True
        lc1.YaxisTitleTextSize = 
    20.0
        lc1.YaxisTitleColor = 
    Colors.Green
        lc1.YaxisGridLineColor = 
    Colors.Yellow
        lc1.YaxisLabelTextSize = 
    15
        lc1.YaxisLabelColor = 
    Colors.Green
        lc1.YaxisLabelOrientation = 
    0
        lc1.YaxisTitle = 
    "F(x)"
       
    '************************ If you comment this code then the x-axis labels will be the index value of the buffer   
        For i = 0 To bufsize - 1
            xlab(i) = 
    "x-" & i
        
    Next
        lc1.XAxisLabels = xlab
    '*************************************************************************************************************   
           
        lc1.XaxisLabelTextSize = 
    15
        lc1.XaxisLabelTextColor = 
    Colors.Cyan
        lc1.XaxisGridLineColor = 
    Colors.Yellow
        lc1.XaxisLabelOrientation = 
    0
        lc1.XaxisDivisions = 
    59
        lc1.XaxisLabelTicks = 
    1

       
        lc1.LegendTextSize = 
    15.0
        lc1.LegendTextColor = 
    Colors.White
        lc1.LegendBackgroundColor = 
    Colors.Transparent
       
        
    'setup for Line 1   
        lc1.Line_1_LineColor = Colors.Red
        lc1.Line_1_LineWidth = 
    2.0
        lc1.Line_1_DrawDash = 
    True
        lc1.Line_1_LegendText = 
    "Sin(x)"

        
    'setup for Line 2   
        lc1.Line_2_LineColor = Colors.Green
        lc1.Line_2_LineWidth = 
    2.0
        lc1.Line_2_DrawDash = 
    False
        lc1.Line_2_LegendText = 
    "Sin(x + 30)"

        
    'setup for Line 3
        lc1.Line_3_LineColor = Colors.Yellow
        lc1.Line_3_LineWidth = 
    2.0
        lc1.Line_3_DrawDash = 
    True
        lc1.Line_3_LegendText = 
    "Sin(x + 60)"
       
        
    'setup for Line 4
        lc1.Line_4_LineColor = Colors.Cyan
        lc1.Line_4_LineWidth = 
    2.0
        lc1.Line_4_DrawDash = 
    False
        lc1.Line_4_LegendText = 
    "Sin(x + 90)"
       
        
    'setup for Line 5
        lc1.Line_5_LineColor = Colors.Magenta
        lc1.Line_5_LineWidth = 
    2.0
        lc1.Line_5_DrawDash = 
    True
        lc1.Line_5_LegendText = 
    "Sin(x + 120)"   
       
        lc1.NumberOfLineCharts = 
    5
        lc1.DrawTheGraphs
       
    End Sub

    Sub Activity_Resume
        t.Enabled = 
    True
        lc1.START
       
    End Sub

    Sub Activity_Pause (UserClosed As Boolean)
       
        t.Enabled = 
    False
       
    End Sub

    Sub t_tick
       
       lc1.addData(
    SinD(a), SinD(b), SinD(c), SinD(d), SinD(e))
       a = a + 
    1
       b = b + 
    1
       c = c + 
    1
       d = d + 
    1
       e = e + 
    1
       
    If a = 361 Then a = 0
       
    If b = 361 Then b = 0
       
    If c = 361 Then c = 0
       
    If d = 361 Then d = 0 
       
    If e = 361 Then e = 0  
      

    '   If xlabeltrack = bufsize + 1 Then
    '         t.Enabled = False
    '      lc1.ClearAllData                        'THIS WILL CLEAR THE DATA
    '   End If
    '************************ If you comment this code then the x-axis labels will be the index of the buffer
       xlabeltrack = xlabeltrack + 1
       
    If xlabeltrack > bufsize Then
             xlab = shiftarray(xlab)
          xlab(bufsize - 
    1) = "x-" & xlabeltrack
          lc1.XAxisLabels = xlab
       
    End If
       xlab(bufsize - 
    1) = "x-" & xlabeltrack
    '************************************************************************************************************** 
      
    End Sub

    Sub shiftarray (oldarray() As StringAs String()
       
        
    Dim newarray(bufsize)
        
    For i = 0 To bufsize - 2
            newarray(i) = oldarray(i + 
    1)
        
    Next
        
    Return newarray
       
    End Sub
     

    Attached Files:

    Last edited: Dec 23, 2015
    AymanA, f0raster0, Isac and 6 others like this.
  7. wonder

    wonder Expert Licensed User

    Beautiful, great work!! :)
     
    Johan Schoeman likes this.
  8. BarryW

    BarryW Active Member Licensed User

    I try this graph but nothings happen... how to input in this version. I like to use it on my arduino project... tnx
     
  9. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Are you referring to the project in post #4? Is so, then that project is for demo purposes only. You will have to use the project in post#6.
     
  10. BarryW

    BarryW Active Member Licensed User

    Tnx...
     
  11. BarryW

    BarryW Active Member Licensed User

    Can i know when is ur project #4 will be available? Cuz i need that kind of graph. I will donate to u if u want... Tnx
     
  12. Johan Schoeman

    Johan Schoeman Expert Licensed User

    The "base" of the graphs in post #4 and post #6 are the same except that the one in post #6 has all the necessary methods available inside B4A to design your graph with. If you say that you need the same kind of graph are you then saying that you want to plot the sensor data? There are libraries on the forum that can provide the sensor data and you can use one of those libs to provide the data to the project in post #6. Or am I misunderstanding you about what it is that you require?
     
  13. BarryW

    BarryW Active Member Licensed User

    Can u post a running input using project #4 with timer and random numbers only. Tnx...
     
  14. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Here you go...I have only amended the B4A code in post #6 to do this. Nothing else necessary to do to make it work

    1.png
     

    Attached Files:

    BarryW likes this.
  15. Ferraz71

    Ferraz71 Member Licensed User

    can i use different values in the y-axis for each line? eg 2 lines, each with their different values of y?
     
  16. Johan Schoeman

    Johan Schoeman Expert Licensed User

    No, unfortunately not possible.
     
    Ferraz71 likes this.
  17. Ferraz71

    Ferraz71 Member Licensed User

    can i change YaxisRangeMode and YaxisRange in runtime? i am using the RealTimeLineChart. How can i do this? i am using adddata(var1,var2,0,0,0) when occurs a serial data input on the usb
     
  18. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Not sure - I will have to go back to the library code to see if it is possible. If not I will try to amend the code to allow it.
     
    Ferraz71 likes this.
  19. Ferraz71

    Ferraz71 Member Licensed User

    Thanks, i solved this question using two realtimelinecharts. the first realtimelinechart is in background and it is printed with background color, y axis values , and xyaxis divisions, the second realtimeline chart is all "transparent" and shows only the line_1 over the first realtimelinechart. the x axis values are omitted in both charts, and the y axis values for the second realtimelinechart was created with simple b4a labels in the visual designer.

    great work!! thank you very much!!!!

    teste.jpg
     
    Last edited: Mar 16, 2016
  20. Scantech

    Scantech Well-Known Member Licensed User

    Nice Work!

    The first chart properties is in color and cannot be seen. I set the second chart on top of the first chart. Everything was set to Transparent on second chart, except the line_1_LineColor. Strange! I am missing something.

    Code:
    lc2.GraphTitleColor = Colors.Transparent
        lc2.GraphPlotAreaBackgroundColor = 
    Colors.Transparent          'this will paint the plotting area DrakGray regardless of what GraphBackgroundColor has been set to
        lc2.GraphBackgroundColor = Colors.Transparent               'this will paint everything within the outer frame to be white
        lc2.GraphFrameColor = Colors.Transparent
        lc2.Color = 
    Colors.Transparent
        lc2.YaxisTitleColor = 
    Colors.Transparent
        lc2.YaxisGridLineColor = 
    Colors.Transparent
        lc2.YaxisLabelColor = 
    Colors.Transparent
        lc2.DomainLabelColor = 
    Colors.Transparent
        lc2.XaxisLabelTextColor = 
    Colors.Transparent
        lc2.XaxisGridLineColor = 
    Colors.Transparent
        lc2.LegendTextColor = 
    Colors.Transparent
        lc2.LegendBackgroundColor = 
    Colors.Transparent   
        lc2.Line_1_PointColor = 
    Colors.Transparent
        lc2.Line_1_LineColor = 
    Colors.blue
     
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