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

Ferraz71

Member
Licensed User
Longtime User
Nice Work!

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

this is my setup for the charts in activity_create. you need create different panels for each chart (sorry!! ...the correct is "different customviews" ... not panels)

B4X:
lc1.GraphTitleColor = Colors.Transparent
    lc1.GraphPlotAreaBackgroundColor = Colors.DarkGray
    lc1.GraphBackgroundColor = Colors.Transparent
    lc1.GraphFrameWidth = 0
    lc1.GraphFrameColor = Colors.Transparent
    lc1.GraphBufferSize = bufsize
    lc1.YaxisValueFormat = lc1.ValueFormat_1
    lc1.YaxisRangeMode = lc1.YAXISMODE_AUTO
    lc1.XaxisLabelTextColor=Colors.Transparent
    lc1.YaxisLabelColor=Colors.red
    lc1.YaxisLabelTextSize=12
    lc1.YaxisLabelAndTitleDistance=40
    lc1.GraphLegendVisibility=False
    lc1.YaxisDivisions = 10
    lc1.YaxisLabelTicks = 1
    lc1.YaxisShowZero = True
    lc1.YaxisGridLineColor = Colors.LightGray
    lc1.XaxisLabelTextSize = 0
    lc1.XaxisGridLineColor = Colors.LightGray
    lc1.XaxisDivisions = (bufsize/8)-1
    lc1.XaxisLabelTicks = 1
    lc1.Line_1_LineColor = Colors.red
    lc1.Line_1_LineWidth = 3.0
    lc1.Line_1_DrawDash = False
    lc1.Line_1_DrawCubic=True
    lc1.Line_1_LegendText = "CO ppm"
    lc1.Line_2_LineColor =Colors.Transparent
    lc1.NumberOfLineCharts = 2


    lc2.GraphTitleColor = Colors.Transparent
    lc2.GraphPlotAreaBackgroundColor =Colors.Transparent'Colors.DarkGray
    lc2.GraphBackgroundColor = Colors.Transparent
    lc2.GraphFrameWidth = 0
    lc2.GraphFrameColor = Colors.Transparent
    lc2.GraphBufferSize = bufsize
    lc2.YaxisValueFormat = lc2.ValueFormat_1
    lc2.YaxisRangeMode = lc2.YAXISMODE_fixed
    lc2.xaxisLabelTextColor=Colors.Transparent
    lc2.YaxisLabelColor=Colors.Transparent
    lc2.YaxisRange(0.0,30.0)
    lc2.YaxisLabelAndTitleDistance=40
    lc2.GraphLegendVisibility=False
    lc2.YaxisDivisions = 10
    lc2.YaxisLabelTicks = 1
    lc2.YaxisShowZero = True
    lc2.YaxisGridLineColor = Colors.Transparent'Colors.LightGray
    lc2.XaxisLabelTextSize = 0
    lc2.XaxisGridLineColor = Colors.Transparent'Colors.LightGray
    lc2.XaxisDivisions = (bufsize/8)-1
    lc2.XaxisLabelTicks = 1
    lc2.Line_1_LineColor = Colors.Blue
    lc2.Line_1_LineWidth = 3.0
    lc2.Line_1_DrawDash = False
    lc2.Line_1_DrawCubic=True
    lc2.Line_1_LegendText = "CO ppm"
    'lc2.Line_2_LineColor = Colors.Transparent
    lc2.NumberOfLineCharts = 1
     lc1.DrawTheGraphs
    lc2.DrawTheGraphs

start the charts.... in activity create or in your own specific subroutine
B4X:
    lc1.START
    lc2.START



Add data ... in my case, i use the data from USB Serial

B4X:
        lc1.addData(VAR TO PLOT (FLOAT),0,0,0,0)
        lc2.addData(VAR2 TO PLOT (FLOAT),0,0,0,0)
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
You should be able to if you make each of the custom views the child of one on the panels. You can do it via code or in the IDE.
 

Ferraz71

Member
Licensed User
Longtime User
Johan,

i created two customView panels inside the b4a visual designer,with lc1 in background, and lc2 in foreground.
These customviews use activitys or panels like as parent.
in my case i use the two customviews over an activity, and i use the same properties (width/ heigth /left /top ) in lc1 and lc2
 

Scantech

Well-Known Member
Licensed User
Longtime User
I am not getting it. I have attached my example.
 

Attachments

  • 2ChartsExample.zip
    298.2 KB · Views: 338

Scantech

Well-Known Member
Licensed User
Longtime User

Thanks. lc1.bringtofront is my problem. I removed it. its working now.
 

Scantech

Well-Known Member
Licensed User
Longtime User
I realize the Chart text sizes are not identical to android label sizes.

lc1.YaxisLabelTextSize=82

on my S6 Galaxy. Setting y axis text size to 82 is almost equivalent to 18 with android label text size. I am going to add another Chart and place it to the right of lc1 and lc2. Set everything to transparent, except y axis labels.

If your y axis is in auto mode, don't forget to update the labels.
 

JonRubin

Member
Licensed User
Longtime User
Johan... Great Lib.... Is there a way to scroll the chart horizontally to see plots that have scrolled off the image? Thanks... Jon
 

Johan Schoeman

Expert
Licensed User
Longtime User
Johan... Great Lib.... Is there a way to scroll the chart horizontally to see plots that have scrolled off the image? Thanks... Jon
Hi Jon - unfortunately not. Once it has scrolled past the left vertical axis it is gonners...
 

JonRubin

Member
Licensed User
Longtime User
Johan... Thank you for your quick response..... 1 more quick followup can the chart be printed so that the lost scrolled data is retained?
I'm would like to create a graph like a ECG, which scrolls... then be able to forward it via SMS or email. Hence the print... I hope that explains what I am trying to accomplish.

Thanks... Jon
 

Johan Schoeman

Expert
Licensed User
Longtime User
I think that other than me having to do some changes to the original code (which I don't really want to do) it might be a solution to keep track of the progress of the graph relative to the origin and then take a snapshot of the UI/screen and save it once the graph reaches the max point on the x-axis. And then track it again from there onwards until the buffer is double the size, etc, etc.
 

Massimiliano

Member
Licensed User
Longtime User
Hello Johan,

Great Lib, but I'm unable to make the Sensor Orientation Chart background white color (there is always a black contour), and legends background is darker (like they have an alpha channel). Could you give it a look?
No problem at all with Real Time Line Chart.

Thank You,
Massimiliano
 

Johan Schoeman

Expert
Licensed User
Longtime User
Are you referring to post #4 or #5?
 

Massimiliano

Member
Licensed User
Longtime User
Are you referring to post #4 or #5?
Yes, but the library was taken at post #6

This is what I see in attach.

B4X:
cs.DomainLabelColor = Colors.Black
cs.GraphBackgroundColor = Colors.LightGray
cs.GraphFrameColor = Colors.DarkGray
cs.GraphPlotAreaBackgroundColor = Colors.LightGray
cs.GraphTitleColor = Colors.Black
cs.LegendBackgroundColor = Colors.Transparent
cs.LegendTextColor = Colors.Black
cs.XaxisGridLineColor = Colors.DarkGray
cs.XaxisLabelTextColor = Colors.Black
cs.YaxisGridLineColor = Colors.DarkGray
cs.YaxisLabelColor = Colors.Black
cs.YaxisTitleColor = Colors.Black
 

Attachments

  • screenshot.png
    13.8 KB · Views: 318

Johan Schoeman

Expert
Licensed User
Longtime User
I will have to dig out the library as I have not worked on it since December 2015.....
 

Johan Schoeman

Expert
Licensed User
Longtime User
Can you upload me your sample B4A project?
 

Massimiliano

Member
Licensed User
Longtime User
Can you upload me your sample B4A project?

In attachment.
Make sure to use the library at post #6 (your latest library post)
This is your sample, made by me with LightGray background
 

Attachments

  • b4aAndroidPlot_SensorOrientationChart.zip
    64.5 KB · Views: 294

Johan Schoeman

Expert
Licensed User
Longtime User
Without changing anything to the library and with the below code I get this (using the Phone library and event OrientationChanged):





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
    Dim ps As PhoneOrientation
   
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.DomainLabelColor = Colors.Black
    lc1.GraphBackgroundColor = Colors.White
    lc1.GraphFrameColor = Colors.DarkGray
    lc1.GraphPlotAreaBackgroundColor = Colors.white
    lc1.GraphTitleColor = Colors.Black
    lc1.LegendBackgroundColor = Colors.Transparent
    lc1.LegendTextColor = Colors.Black
    lc1.XaxisGridLineColor = Colors.DarkGray
    lc1.XaxisLabelTextColor = Colors.Black
    lc1.YaxisGridLineColor = Colors.DarkGray
    lc1.YaxisLabelColor = Colors.Black
    lc1.YaxisTitleColor = Colors.Black

   
'    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(-360, 360)
    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) = i
    Next
    lc1.XAxisLabels = xlab
'*************************************************************************************************************   
       
    lc1.XaxisLabelTextSize = 15
'    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 = "Azimuth"

    '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 = "Pitch"

    'setup for Line 3
    lc1.Line_3_LineColor = Colors.Blue
    lc1.Line_3_LineWidth = 2.0
    lc1.Line_3_DrawDash = True
    lc1.Line_3_LegendText = "Roll"
   
   
    lc1.NumberOfLineCharts = 3
    lc1.DrawTheGraphs
   
End Sub

Sub Activity_Resume
    ps.StartListening("ps")
'    t.Enabled = True
    lc1.START
   
End Sub

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

Sub t_tick(val1 As Float, val2 As Float, val3 As Float)
   
   lc1.addData(val1, val2, val3, 0,0)
   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) = xlabeltrack
      lc1.XAxisLabels = xlab
   End If
   xlab(bufsize - 1) = xlabeltrack
'************************************************************************************************************** 
  
End Sub

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

Sub ps_OrientationChanged(val1 As Float, val2 As Float, val3 As Float)
   
    t_tick(val1, val2, val3)

End Sub

Have not looked at your project yet. Will download it and test it...
 

Massimiliano

Member
Licensed User
Longtime User
Dear Johan,
forget multilinechart (it's working fine) and take only a look to sensor chart, here it's a bug or 2 ;-)
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…