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

Sample 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(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

 

[Johan Schoeman]

This has been

Dear Johan,
forget multilinechart (it's working fine) and take only a look to sensor chart, here it's a bug or 2 ;-)

This has been sorted out in a PM.

 

[rbghongade]

Dear Johan,
There seems to be no way of clearing the plot. Can you please clarify?
Thanks for the great library.
rajesh

 

[Johan Schoeman]

Dear Johan,
There seems to be no way of clearing the plot. Can you please clarify?
Thanks for the great library.
rajesh

Replace the sample code with the below and see what it does (same library files). It will clear all the values once the plots reach the right hand y-axis and then start drawing from scratch...

#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 = 360                                   '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
   
    Private btnSave As Button
    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", 20)
   
    lc1.GraphTitleColor = Colors.White
    lc1.GraphTitleSkewX = -0.15
    lc1.GraphTitleBold = True
    lc1.GraphTitleTextSize = 20.0
    lc1.GraphPlotAreaBackgroundColor = Colors.Black          '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.1, 1.1)
    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 = 20
    lc1.XaxisLabelTextColor = Colors.Cyan
    lc1.XaxisGridLineColor = Colors.Yellow
    lc1.XaxisLabelOrientation = 0
    lc1.XaxisDivisions = 30
    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
           xlabeltrack = 0
        lc1.ClearAllData                        'THIS WILL CLEAR THE DATA
        a = 0
        b = 30
        c = 60
        d = 90
        e = 121
        For i = 0 To bufsize - 1
               xlab(i) = "x-" & i
        Next
        lc1.XAxisLabels = xlab
        lc1.DrawTheGraphs
        t.Enabled = True
        lc1.START
   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

 

[Itila Tumer]

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.

View attachment 39852

View attachment 39853

Can we create graphics in a dynamic way?

For example, we will graph the data from the array every 2 seconds.

Our series will consist of numerical data.

 

[Johan Schoeman]

Can we create graphics in a dynamic way?

For example, we will graph the data from the array every 2 seconds.

Our series will consist of numerical data.

https://www.b4x.com/android/forum/t...ta-passed-from-b4a-project.61521/#post-388909

 

[AymanA]

Hi Johan, thank you for this great library, it is so simple to understand and to implement, I have a question regarding the livechart at post #6, I think this one doesn't provide the Line_1_point text and shape feature, is that correct?

if incorrect then how to pass point data to the live line chart? post 2 use the lc1.Line_1_Data to present the points so not sure how to enable the point in the live graph/chart (post 6 use lc1.addData).

I am using exactly the same as in post 6 but added the below which doesn't show the points:

lc1.Line_1_PointLabelTextSize = 15.0
lc1.Line_1_PointShape = lc1.SHAPE_ROUND
lc1.Line_1_PointColor = Colors.RGB(177,194,216)
lc1.Line_1_PointSize=5
lc1.Line_1_PointLabelTextColor = Colors.Black

Note: Apologies as I am new to the forum so I assume it is ok to ask question with relation to the feature of the library, if that is not ok, let me know and I can create a new thread.

 

[BarryW]

How to change the color and the thickness of line beside yaxis labels and the line above the xaxis labels. Also after changing the font size of yaxis labels it seems that the top value display has been cut.

Please help. Thanks

 

[sasetcolombia]

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
View attachment 39820

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

Set the y-axis min and max values: lc1.YaxisRange(-1000, 10000)
View attachment 39822
Sample 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(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

Hi;
How to clear all data and load new data in the same LC1(LineChart)?.In RealTimeLineChart is ClearAllData but this function is not available in Linechart.
I have to show the data of different variables (temperature, humidity, soil, precipitation) when the user selects from a listView
Thanks for your help!

 

[DonManfred]

How to clear all data and load new data in the same LC1(LineChart)?

Setting lc1.Line_1_Data() or/and lc1.Line_2_Data() with the new values and so on?

 

[sasetcolombia]

I only needed to display one graph at a time (lc1.Line_1) when clicking on an item in the listview.
lc1 was added from the designer.
If I changed the values and reloaded the chart, it kept showing the old values and overwriting the new values.
The solution was to call "lc2.RemoveView" in the ItemClick event of the listview and call another method to reload the LineChart to the Activity.
Thanks!

Setting lc1.Line_1_Data() or/and lc1.Line_2_Data() with the new values and so on?

Private Sub lvGraficas_ItemClick (Position As Int, Value As Object)
    Select Case Position
        Case 0'Humedad Aire
            LegendText="hum_aire"
            GraphTitle="HUMEDAD DEL AIRE"
            YaxisTitle="%"
            Data= dataHumAire' Float array
        Case 1'Temperatura
            LegendText="temp_ambiente"
            GraphTitle="TEMPERATURA AMBIENTE"
            YaxisTitle="°C"
            Data= dataTempAmbiente' Float array
        Case 3'Velocidad Viento
            LegendText="vel_viento"
            GraphTitle="VELOCIDAD DEL VIENTO"
            YaxisTitle="m/s"
            Data= dataVelViento' Float array
        Case 4
        '....
        End select
            lc2.RemoveView ' when starting the Activity the graph of a variable is loaded
    generarGrafica
    End Sub
'Initialize and load the new graph to the Activity
Sub generarGrafica
'lc2 IS NOT ADDED FROM DESIGNER '
    lc2.Initialize("lc2")'initialize LineChart, clear data 
    Activity.AddView(lc2,0,0,100%x,100%y)'add to activity
    lc2.GraphTitle = GraphTitle
    lc2.LegendText=LegendText
    lc2.YaxisTitle=YaxisTitle
    'LineChart configuration code...
    ...
    lc2.Line_1_Data = Data
    ...
End Sub

 

[f0raster0]

I'm attempting to run this example but encountering the error described below:

Compiling resources    Error
res\values\style.xml:17: error: root element must be <resources>.
res\values\style.xml: error: file failed to compile.

(i treid Jetify and then clean the project)
thanks in advance

 

[Johan Schoeman]

I'm attempting to run this example but encountering the error described below:

Compiling resources    Error
res\values\style.xml:17: error: root element must be <resources>.
res\values\style.xml: error: file failed to compile.

(i treid Jetify and then clean the project)
thanks in advance

Delete the Objects/res folder from the B4A project once you have unzipped the B4A project - it should then run. Let me know.

 

[f0raster0]

Delete the Objects/res folder from the B4A project once you have unzipped the B4A project - it should then run. Let me know.

Thank you. It appears that the chart doesn't offer the ability to select a point or zoom in/out, like in your other chart here, is that correct?