Android Question Graph

[Isac]

Hello
I would like to monitor the light intensity in real time and check through the graph.
How do I draw a simple chart?
Thank you

 

[sorex]

with canvas draw functions? (point, line ...)

 

[klaus]

Have a look at Charts Framework.

 

[Isac]

Hello

I would use only:Charts.AddLineColor(LD,colors.red)'First linecolor

but removing:Charts.AddLineColor(LD,colors.blue)'Second linecolor

I raise this error:Error occurred on line:229(charts)
java.lang.IndexOutOfBoundsException: Invalid index1,size is 1


Then how do I give a frequency sine wave?
Currently is static.

Thank You

Sub Create2LinesTab
    Dim p As Panel
    p.Initialize("")
    pnl2Lines.Initialize("pnl2Lines")
    p.AddView(pnl2Lines, 0, 0, 95%x, 100%y - 100dip)
    TabHost1.AddTab2("Luminosità", p)
   
    Dim LD As LineData
    LD.Initialize
    LD.Target = pnl2Lines
    Charts.AddLineColor(LD, Colors.Red) 'First line color
    Charts.AddLineColor(LD, Colors.Blue) 'Second line color
    For i = 0 To 360 Step 10
        'In this case we are adding an array of two values. One for each line.
        'Make sure to create an array for each point. You cannot reuse a single array for all points.
        Charts.AddLineMultiplePoints(LD, i, Array As Float(SinD(i), CosD(i)), i Mod 90 = 0)
    Next
    Dim G As Graph
    G.Initialize
    G.Title = "2 Lines Chart (Sine & Cosine)"
    G.XAxis = "Degrees"
    G.YAxis = "Values"
    G.YStart = -1
    G.YEnd = 1
    G.YInterval = 0.2
    G.AxisColor = Colors.Black
    Charts.DrawLineChart(G, LD, Colors.White)
End Sub

 

[klaus]

If you use only one line replace this code line
Charts.AddLineMultiplePoints(LD, i, ArrayAsFloat(SinD(i), CosD(i)), i Mod90 = 0)
by
Charts.AddLinePoint (LD, X, Y, ShowTick)
Where
X = x axis label as a string
Y = y axis value as a float
ShowTicks is boolean value, if True the X value is displayed. You should use a function for this.
In the two lines examples, i Mod90 = 0 is the function to display an x axis value only every 90°.

Then how do I give a frequency sine wave?

You need to calculate the Y values.
In the two lines examples it's calculated with SinD(i) and CosD(i).

You could also have a look at the User's Guide chapter 10.3 Diagrams / Charts.

 

[Isac]

Thank you
Now it works,but I would like to see the line as a sine wave

I would like to start from 0 then comes for example to 500.

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region
 
Sub Process_Globals
    Dim FontSize = 12 As Float
    Dim MaxVal, MinVal, ScaleMin, ScaleMax, ScaleInterval As Double
End Sub
 
Sub Globals
    Dim pnlLines As Panel
    Dim LD As LineData
    Dim ckbAutomaticScale As CheckBox
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
    ' Initialze the panel to display the lines chart
    pnlLines.Initialize("pnlLines")
    Activity.AddView(pnlLines, 10%x, 10%y, 80%x, 80%y)
   
    ckbAutomaticScale.Initialize("ckbAutomaticScale")
    Activity.AddView(ckbAutomaticScale, 10%x, 0, 80%x, 40dip)
    ckbAutomaticScale.Text = "Automatic scale"
    ckbAutomaticScale.Checked = True
   
    CreateLineData
End Sub
 
Sub Activity_Resume
 
End Sub
 
Sub Activity_Pause (UserClosed As Boolean)
 
End Sub
 
Sub Activity_Click
    CreateLineData
    Activity.Title = Activity.NumberOfViews
End Sub
 
Sub CreateLineData
    ' Initialize the line data
    Dim x As String
    Dim y As Float
    Dim t As Boolean
    t=True
    y= 500
    LD.Initialize
    LD.Target = pnlLines
    LD.AutomaticScale = ckbAutomaticScale.Checked
   
    'Set the line colors   
     Charts.AddLineColor(LD, Colors.Red) 'First line color
   
    ' Add the line points.
'    Dim x As Float
    For i = 0 To 10 Step 10
   
    Charts.AddLinePoint (LD, x, y, t)
 
        ' In the case of 2 lines or more we are adding an array of values.
        ' One for each line.
        ' Make sure to create an array for each point.
        ' You cannot reuse a single array for all points.
 
       
    Next
 
    ' Initialize the graph object
    ' Set the line chart parameters and draw the line chart
    Dim G As Graph
    G.Initialize
    G.Title = "3 Lines"
    G.XAxis = "Time"
    G.YAxis = "Values"
    If ckbAutomaticScale.Checked = False Then
        G.YStart = -50            ' manual scale
        G.YEnd = 50                    ' manual scale
        G.YInterval = 10        ' manual scale
    End If
    G.NbIntervals = 10
    G.AxisColor = Colors.Black
    Charts.DrawLineChart(G, LD, Colors.White)
End Sub

 

[klaus]

You need to be more precise on what exactly you want to do.

I would like to start from 0 then comes for example to 500.

What exactly do you mean with this ?
Do you want to draw from 0 degree to 500 degrees ?
If yes, then use something similar to the original code.

For i = 0 To 500 Step 10
    Charts.AddLinePoint (LD, i, SinD(i), i Mod 90 = 0)
Next

 

[Isac]

ok but if I try to timing the sine wave does not move

Sub t1_Tick
    Activity_Click
    i=Rnd(0, 500)

End Sub
Sub CreateLineData
    ' Initialize the line data
    Dim x As String
    Dim i As Float
    Dim t As Boolean
   

    LD.Initialize
    LD.Target = pnlLines
    LD.AutomaticScale = ckbAutomaticScale.Checked
   
    ' Set the line colors   
    Charts.AddLineColor(LD, Colors.Red) 'First line color
   
    ' Add the line points.
'    Dim x As Float
    For i = 0 To 500 Step 10
    Charts.AddLinePoint (LD, i, SinD(i), i Mod 90 = 0)

 

[klaus]

Once again, please explain EXACTLY what you want to do !

 

[KitCarlson]

It seems like a spread sheet example would be worth 1000 words. Showing both the data, and desired example chart.

I modified the Klaus Oscilloscope example to make a chart recorder. Is this similar to your needs? It works by moving the chart left, and adding new plotted points at the right edge. Old data rolls off the left edge.
http://www.b4x.com/android/forum/threads/scroll-chart-example.26335/#content
Project .zip is included.

 

[Isac]

thanks


I wanted to get this but now I can not see the numbers on the chart.
When changing the values I would like to see them on the graph.

#Region Module Attributes
    #FullScreen: False
    #IncludeTitle: True
    #ApplicationLabel: ScrollChartExample
    #VersionCode: 1
    #VersionName:
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

' Scroll Chart Example, started with Klaus Oscillioscope example
' Changes by KitCarlson to make Plot Scroll using canvas, on single Panel

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim ProgName As String                    : ProgName = "Test"  
    Dim ProgVersion As String                : ProgVersion = "Test"          
   
    Dim Timer1 As Timer
    Dim d As Timer
   
    Dim NC As Int : NC = 3   
    Type Curves (Name As String, Color As Int, Width As Float, Scale As Double, Offset As Double, Draw As Boolean)
    Dim CurveVal(NC, 101) As Double
    Dim Curve(NC) As Curves
    Dim CurvesNb As Int                    : CurvesNb = NC-1 '
    Dim CurvesNbDisp As Int
    Dim y1(NC) As Float  ' old plot points
    Dim y2(NC) As Float  ' new plot points
    Dim w(NC) As Double
    Dim a(NC) As Double   
   
    Dim Border, PltW As Int
    Dim GridX0, GridX1, GridY0, GridY1, GridYm, GridW, GridH As Int
    Dim DivX, DivY As Int
    Dim NbDivX, NbDivY As Int
    Dim GridCnt As Int
   
    Dim ScreenCol, GridLineCol As Int  ' for grid and screen colors

    Dim t, dt As Double
    Dim ii As Float
   
    Dim Stopped As Boolean                : Stopped = True
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 btnStart As Button
    Dim pnlChart As Panel
    Dim cvsGraph As Canvas
    Dim rectGrid As Rect
    Dim SrcRec, DestRec, PltRec As Rect
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.Title = ProgName & " " & ProgVersion
   
    dt =  0.01
    t = 0
    Timer1.Initialize("Timer1", 1000)'1000
    d.Initialize("d", 50)
    d.Enabled = True
    Timer1.Enabled = True
   
    NbDivX = 20 ' number of divisions displayed
    NbDivY = 10
   
    DivY = Floor(90%y / NbDivY)
    DivX = Floor(90%x / NbDivX)   

    GridW = DivX * NbDivX
    GridH = DivY * NbDivY
   
    PltW = 3dip

    Border = 6dip
    GridY0 = Border
    GridY1 = GridY0 + GridH
    GridX0 = Border
    GridX1 = GridX0 + GridW
    GridYm = GridH / 2
   
    GridCnt = 0

    rectGrid.Initialize(GridX0, GridY0, GridX1, GridY1)      ' initialize rectangle for plot cover
    SrcRec.Initialize(GridX0 + PltW, GridY0, GridX1, GridY1) ' initialize rectangle for copy
    DestRec.Initialize(GridX0, GridY0, GridX1 - PltW, GridY1)' initialize rectangle for paste
    PltRec.Initialize(GridX1 - PltW, GridY0, GridX1, GridY1) ' initialize rectangle for plot
   
    ScreenCol = Colors.Black  ' for erase
    GridLineCol = Colors.Gray ' for grid
   
    pnlChart.Initialize("")
    Activity.AddView(pnlChart, 0, 0, 100%x, 100%y)
    pnlChart.Color = Colors.DarkGray ' back ground color for panel
   
    cvsGraph.Initialize(pnlChart)
   
    btnStart.Initialize("btnStart") ' Start/Stop button
    btnStart.Text = "Start"
    pnlChart.AddView(btnStart, 0,GridY1,60,40)
   
    InitCalcCurves   
    InitCurves
End Sub

Sub Activity_Resume
    InitHGrid
    cvsGraph.DrawLine(GridX1-PltW, GridY0, GridX1-PltW, GridY1, GridLineCol, 1dip) ' first vert. grid
End Sub

Sub Activity_Pause (UserClosed As Boolean)
'    If Stopped = False Then ' if running
'          btnStart_Click      ' stop
'    End If
End Sub

Sub InitHGrid ' Horizontal grid lines
    Dim i, y As Int
   
    For i = 0 To NbDivY
        y = GridY0 + i * DivY
        cvsGraph.DrawLine(GridX0, y, GridX1, y, GridLineCol, 1dip)
    Next
End Sub

'Sub btnStart_Click
'    If Stopped Then
'        Stopped = False
'        ii = 0   
'        d.Enabled = True
'        Timer1.Enabled = True
'        EraseCurves
'        btnStart.Text = "Stop"
''    Else
''        Timer1.Enabled = False
''        Stopped = True
''        btnStart.Text = "Start"
'    End If
'End Sub
Sub d_Tick
DrawCurves
End Sub
Sub Timer1_Tick
    ii = ii + 1
    GridCnt = GridCnt + 1
    t = t + dt
    If ii > 100 Then ii = 100
    GetValues
'    DrawCurves
    InitCalcCurves
End Sub

Sub DrawCurves
    Dim i As Int
   
    cvsGraph.DrawBitmap(cvsGraph.Bitmap,SrcRec,DestRec) ' copy scroll grid and plots
    cvsGraph.DrawRect(PltRec, ScreenCol, True, 1)       ' erase last plot area
    If GridCnt = NbDivX Then                            ' add vert grid
        GridCnt = 0
        cvsGraph.DrawLine(GridX1-PltW, GridY0, GridX1-PltW, GridY1, GridLineCol, 1dip)
    End If
    InitHGrid
    For i = 0 To CurvesNb
        If Curve(i).Draw = True Then
            y2(i) = GridYm + (-Curve(i).Offset - CurveVal(i, ii)) * Curve(i).Scale
            cvsGraph.DrawLine(GridX1, y2(i),GridX1 - PltW, y1(i),Curve(i).Color, 2dip) ' plot new
            y1(i) = y2(i) ' save for start point next curve
        End If
    Next
    pnlChart.Invalidate
    DoEvents
End Sub

Sub GetValues
    Dim i As Int
   
    For i = 0 To CurvesNb
        CurveVal(i, ii) =  a(i) * Sin(w(i) * t)
    Next
End Sub

Sub EraseCurves
    cvsGraph.DrawRect(rectGrid, Colors.Transparent, True, 1)
    GridCnt = 0
    InitHGrid ' add horizontal grid
    cvsGraph.DrawLine(GridX1-PltW, GridY0, GridX1-PltW, GridY1, GridLineCol, 1dip)' vertical grid
End Sub

Sub InitCurves
    Curve(0).Draw = True
'    Curve(1).Draw = True
'    Curve(2).Draw = True
'   
    Curve(0).Color = Colors.Red
'    Curve(1).Color = Colors.Blue
'    Curve(2).Color = Colors.Green

    Curve(0).Scale = 30
'    Curve(1).Scale = 30
'    Curve(2).Scale = 30

    Curve(0).Offset = 1
'    Curve(1).Offset = 0
'    Curve(2).Offset = 1
   
    Curve(0).Draw = True
'    Curve(1).Draw = True
'    Curve(2).Draw = True
End Sub

Sub InitCalcCurves
    w(0) = Rnd(0,1000)
    Log(w(0))
'    w(1) = cPI * 3.0
'    w(2) = cPI * 4.0
   
'    y1(0) = GridYm
'    y1(1) = GridYmASF
'    y1(2) = GridYm
'   
    a(0) = 5.0
'    a(1) = 2.0
'    a(2) = 3.0
End Sub