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: 943
  • b4aAndroidPlot_LineChart.zip
    59.5 KB · Views: 887
Last edited:

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
this is my setup for the charts in activity_create. Are you use 2 different 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
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: 334

Scantech

Well-Known Member
Licensed User
Longtime User
you forgot to load the value of buffersize

try this
Dim bufsize As Int = 400 (number of points shwoed in chart) you need to put this line inside the "Sub Globals"

and enable these code lines :
lc1.GraphBufferSize = bufsize
lc2.GraphBufferSize = bufsize

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
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
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
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
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
    screenshot.png
    13.8 KB · Views: 311

Johan Schoeman

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

Johan Schoeman

Expert
Licensed User
Longtime User
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
Without changing anything to the library and with the below code I get this (using the Phone library and event OrientationChanged):


1.png



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 ;-)
 
Top