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

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:

B4X:
#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(50, 0, 0, 255)
    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.0, 1500.0, 1700.0, 2000.0, 1800.0, 2500.0, 2700.0, 2800.0, 3100.0, 1600.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.0, 2700.0, 2900.0, 2800.0, 2600.0, 3000.0, 3300.0, 3400.0, 3900.0, 1400.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.0, 3700.0, 3900.0, 3800.0, 3600.0, 4000.0, 4300.0, 4400.0, 4900.0, 400.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.0, 5300.0, 5400.0, 5900.0, 1600.0, 4200.0, 4700.0, 4900.0, 4800.0, 4600.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.0, 7900.0, 7800.0, 7600.0, 8000.0, 8300.0, 8400.0, 8900.0, 7400.0, 6200.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
 

Attachments

  • AndroidPlot_0_6_2_LibFiles.zip
    172.1 KB · Views: 938
  • b4aAndroidPlot_LineChart.zip
    59.5 KB · Views: 883
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime 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:

B4X:
#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(50, 0, 0, 255)
    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(-1000, 10000)                                 '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.0, 1000.0, 1700.0, 2000.0, 1800.0, 2500.0, 2700.0, 2800.0, 3100.0, 1600.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.0, 2700.0, 2900.0, 2800.0, 2600.0, 3000.0, 3300.0, 3400.0, 3900.0, 1400.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.0, 3700.0, 3900.0, 3800.0, 3600.0, 4000.0, 4300.0, 4400.0, 4900.0, 400.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.0, 5300.0, 5400.0, 5900.0, 1600.0, 4200.0, 4700.0, 4900.0, 4800.0, 4600.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.0, 7900.0, 7800.0, 7600.0, 8000.0, 8300.0, 8400.0, 8900.0, 7400.0, 6200.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
 

Attachments

  • AndroidPlot_0_6_2LibFiles.zip
    185.5 KB · Views: 524
  • b4aAndroidPlot_LineChart.zip
    59.6 KB · Views: 530

Johan Schoeman

Expert
Licensed User
Longtime 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
 

Attachments

  • b4aAndroidPlot_DynamicLineChart.zip
    59.1 KB · Views: 533
  • AndroidPlot_0_6_2LibFiles.zip
    201.9 KB · Views: 517
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime 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
 

Attachments

  • AndroidPlot_0_6_2LibFiles.zip
    214.9 KB · Views: 553
  • b4aAndroidPlot_SensorOrientationChart.zip
    60 KB · Views: 573

Johan Schoeman

Expert
Licensed User
Longtime User
It adds to the project in post #4. New library files attached....

1.png


2.png
 

Attachments

  • AndroidPlot_0_6_2LibFiles.zip
    227.7 KB · Views: 552
  • b4aAndroidPlot_SensorOrientationBar.zip
    60.2 KB · Views: 579

Johan Schoeman

Expert
Licensed User
Longtime 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:

B4X:
#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.5, 1.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 String) As String()
   
    Dim newarray(bufsize)
    For i = 0 To bufsize - 2
        newarray(i) = oldarray(i + 1)
    Next
    Return newarray
   
End Sub
 

Attachments

  • AndroidPlot_0_6_2LibFiles.zip
    240.8 KB · Views: 772
  • b4aAndroidPlot_RealTimeLineChart.zip
    298.6 KB · Views: 771
Last edited:

BarryW

Active Member
Licensed User
Longtime 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.

View attachment 39877


View attachment 39878
I try this graph but nothings happen... how to input in this version. I like to use it on my arduino project... tnx
 

Johan Schoeman

Expert
Licensed User
Longtime User
I try this graph but nothings happen... how to input in this version. I like to use it on my arduino project... tnx
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.
 

BarryW

Active Member
Licensed User
Longtime 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.

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
 

Johan Schoeman

Expert
Licensed User
Longtime 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
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?
 

BarryW

Active Member
Licensed User
Longtime User
Can u post a running input using project #4 with timer and random numbers only. Tnx...
 

Johan Schoeman

Expert
Licensed User
Longtime User
Can u post a running input using project #4 with timer and random numbers only. Tnx...
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
 

Attachments

  • b4aAndroidPlot_RealTimeBarryW.zip
    298.4 KB · Views: 612

Ferraz71

Member
Licensed User
Longtime User
can i use different values in the y-axis for each line? eg 2 lines, each with their different values of y?
 

Ferraz71

Member
Licensed User
Longtime 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
 

Johan Schoeman

Expert
Licensed User
Longtime 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
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

Member
Licensed User
Longtime 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.

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:

Scantech

Well-Known Member
Licensed User
Longtime 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!!!!

View attachment 42485

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.

B4X:
    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
 
Top