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

Johan Schoeman · Dec 19, 2015

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:

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

Johan Schoeman · Apr 15, 2017

This has been

Massimiliano said:
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 · Dec 29, 2017

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

Johan Schoeman · Dec 29, 2017

rbghongade said:
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...

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 = 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 · Mar 28, 2019

Johan Schoeman said:
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 · Mar 29, 2019

Itila Tumer said:
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 · Apr 17, 2019

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 · Aug 1, 2020

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 · Jun 24, 2021

Johan Schoeman said:

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:

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

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 · Jun 25, 2021

sasetcolombia said:
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 · Jun 25, 2021

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!

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

B4X:

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 · Dec 17, 2023

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

B4X:

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 · Dec 17, 2023

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

B4X:

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 · Dec 17, 2023

Johan Schoeman said:
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?

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

Attachments

Johan Schoeman

Expert

rbghongade

Active Member

Johan Schoeman

Expert

Itila Tumer

Active Member

Johan Schoeman

Expert

AymanA

Active Member

BarryW

Active Member

sasetcolombia

Member

DonManfred

Expert

sasetcolombia

Member

f0raster0

Well-Known Member

Johan Schoeman

Expert

f0raster0

Well-Known Member

Similar Threads

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

Attachments

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Member

Expert

Member

Well-Known Member

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency