B4J Question xCharts with realtime data?

[Mark Read]

After getting the demo running from this class. I would like to modify it to deal with realtime data. I have tried to modify the CreateLineChart2Data sub to plot one point and then with a timer, call this sub at a said interval but I keep on getting an error in the xChart class in line 1023 - Index out of bounds.

Is it at all possible just to plot one point and then another point later? Has anyone done this?


This is my effort to date:

Sub InitYXChart
    ' set the line properties
    YXChart1.ClearData
    YXChart1.AddYXLine2("Speed", xui.Color_Red, 2dip, True, "CIRCLE", False, xui.Color_Red)
    YXChart1.AddYXLine2("Direction", xui.Color_Green, 2dip, False, "SQUARE", True, xui.Color_Green)
    YXChart1.XScaleTextOrientation = "VERTICAL"
    YXChart1.ChartBackgroundColor = xui.Color_White
    YXChart1.GridFrameColor = xui.Color_Black
    YXChart1.GridColor = xui.Color_Gray
    YXChart1.TitleTextColor = xui.Color_Black
    YXChart1.ScaleTextColor = xui.Color_Black
    YXChart1.DisplayValues = False
    
End Sub

Sub timer1_Tick
    CreateYXChartData
End Sub

Private Sub CreateYXChartData
    YXChart1.ClearData
    'add the points
    
    'Create dummy values
    DateTime.TimeFormat = "HH:mm:ss"
        
    Private ElapsedTime As String
    ElapsedTime=DateTime.Time( DateTime.Now)        'time in seconds
                
    Speed = Rnd(0, 6)
    Direction = Rnd(0, 360)
            
    'ptx = Array As Double(ElapsedTime, ElapsedTime)
    'pty = Array As Double(Speed,Direction)
        
    YXChart1.AddLineMultiplePoints( ElapsedTime, Array As Double(Speed,Direction), False)
    YXChart1.DrawChart
End Sub

Many thanks.

 

[klaus]

You should modify the title.
You are refering to jCharts, and in the content you speak about xChart.
Can you post your test project, and I will have a look at it.

 

[Mark Read]

You should modify the title.

Oops, sorry - done

 

[Mark Read]

Here is the project, its in the very early stages.

Thanks Klaus.

 

[klaus]

Here you are.
You were mixing YXChart and Line Chart!
You use a Line chart but you are adding YXLinepoints, which are incompatible!
Then you clear all data each time you call CreateYXChatData, which removes ALL data including the line definition and the previous points.

The attached modified project works.
I added a new method in the class: RemoveLinePoint.
This is used to limit the number of points.

 

[Mark Read]

You were mixing YXChart and Line Chart!
You use a Line chart but you are adding YXLinepoints, which are incompatible!

Thanks for pointing out this mistake.

Then you clear all data each time you call CreateYXChatData, which removes ALL date including the line definition and the previous points

OK.

The RemoveLinePoint addition is great, saves me trying to figure it out. The test for the number of points I have changed as it was prepared

NbPoints = NbPoints + 1                    'KC
    If NbPoints > ReadingsToShow Then                        'KC
        NbPoints = ReadingsToShow                                    'KC
        YXChart1.RemoveLinePoint(0)        'KC
    End If

The interval I also had in seconds but forgot the timer takes milliseconds - corrected to 2000 for test purposes.

One last question, is it possible to get the time on the x-axis? It is held in "ElapsedTime" as a string. At the moment it is blank.

 

[Mark Read]

Another point I have noticed. Make the changes as above. Try setting

YXChart1.DisplayValues = True

in line 69. Click on the chart after some data and hold the mouse button down. The data changes but the red line stays. Do you see it as well?

 

[klaus]

One last question, is it possible to get the time on the x-axis?

Sure, simply replace False in this line:
YXChart1.AddLineMultiplePoints(ElapsedTime, Array As Double(Speed,Direction), False)
by True, ShowTicks:
YXChart1.AddLineMultiplePoints(ElapsedTime, Array As Double(Speed,Direction), True)

The data changes but the red line stays.

Amended in the update below.
The problem was that the class was not thought nor designed for dynamic data, the cursor remained when new data is added.
Now, as soon as a new data is added the DisplayValue function is disabled.
ATTENTION: I renamed the RemoveLinePoint to RemovePointData.

 

[Mark Read]

Thank you Klaus. This is great, just what I needed. I am sure others can use these new functions as well.