B4J Question xGraph Curve Colors - Made Public Number of colors?

[rgarnett1955]

Hi

I was the guy who asked for the missing data feature. It is excellent.

I notices you made the curve colors public so they may be changed, however I noticed that the max number of curve colors is only 4 when you can have up to 10 traces.

    Private mNbMaxSamples, mNbMaxCurves As Int
    Public CurveX(10000) As Double
    Public CurveY(10, 10000) As Double
    Public CurveYName(10) As String
    Public CurveYUnit(10) As String
    Public CurveColor(4) As Int   ' <====
    Private CurveStrokeWidth(4) As Int
    Private SingleCurveNames = True As Boolean
    Private mDisplayCurveUnit = True As Boolean

Should this dimension be changed to ten?

I also noticed that the b4xlib version of the library isn't the same as the bas file. Should they be the same?

I might have a crack at providing different stroke widths. This would be handy for having max min bound line over average data.

I might also have a crack at filter functions for smoothing, rms or removal of means to add on to the integration and derivative functions. I did this with a Matlab app about fifteen years ago and it was very handy for data analysis as all of the functions were integrated and automated within the one plot space. I had FFT's and histograms for data presentation all within the one set of axis. I think your xGraph would do this stuff easily.

Best regards
Rob

 

[klaus]

Should this dimension be changed to ten?

Not in my mind. You can superimpose up to 4 curves, the colors are meant for those four curves.
I didn't want to have a specific color for each of 10 or more curves.
In my experience, it is be more cumbersome than efficient.
I had made data analyses with several tenths of curves, up to 100. And in these cases, having to specify a specific color for each curve was cumbersome.

I also noticed that the b4xlib version of the library isn't the same as the bas file. Should they be the same?

Sure, they should be the same. Updated in the first post in the xGraph thread.

I might have a crack at providing different stroke widths.

I will set the CurveStrokeWidth array to Public.

I might also have a crack at filter functions for smoothing, rms or removal of means to add on to the integration and derivative functions.

Filter is a big chapter, but, I will add a Smooth method.
I will add the RMS calculation, Mean value calculation does already exist CalcMeanValue, removeal can be done with CalcAddValue.
These methods apply either to the entire curve or only to a zoomed part. The Calc prefix is for all calculation methods.

I had FFT's and histograms for data presentation all within the one set of axis.

This kind of display is based on bar display, I will not implement it in the xGraph class.
This kind of data can be displayed with the xChart class.

The xGraph class is intended to display data in curves with numeric x values, manly time.
I had in mind to develop a xGraphExt class, an extended graph class for data analysis which would have had different analysis function.
The calculation methods in the xGraph class were the beginning.
The xGraph demo program is a small illustration on what the xGraphExt class could have been.
But, I abandoned it because there is not enough interest in it.

I understand your comments very well. I had worked in measurement and data analysis during 25 years at a machine manufacturer for the packaging industry.
I had written a data analysis program, at first, on a HP 9836 computer, in the early 80s, connected to a data acquisition device and then on PCs in VB with a data acquisition board.
At that time, there were no data analysis programs on the market, therefore we wrote our own tools for our needs. With many evolutions and improvements during the years.
The program included also a dynamic simulation part which allowed to compare theory with reality.

Some years ago I had written a small Dynamic Simulations program, for motion control systems which includes a graphic data analysis module, in Basic4PPC for PocketPCs and a bit later a desktop version.
Then, some years later, I ported it to Android with B4A DynSim DynamicSimulations.

 

[rgarnett1955]

Hi Klaus,

I get the color thing, but I don't think assigning colors to ten curves is a big deal. You can default the colors to the standard ones defined in b4x as a starting point.

This is what I am intending:

Vrms Mean - Red thick
Vrms Max - Black Thin
Vrms Min - Black Thin

Frequency Mean - Blue thick
Frequency Max - Black Thin
Frequency Min - Black Thin

What I have tried so far is:

This is only a mock-up to make trying out xGraph easier. The application I am developing is a lot more complicated, with graph setups stored in a db along with their underlying querys and post processing parameters. The user will be able to select the data to plot, whether it includes missing data etc, etc.

This data is a five minute aggregates of two second power data for my house. It looks great and works really well. The zoom and cursors and missing data functions are excellent. (Although there is not missing data in this part of the data-set)

Assigning colors in this case requires six lines of code only two more than the maximum of four.

I want to make the mean values colored thick stroke and the max and mins dark gray thin stroke.

I wasn't asking for you to modify your library I was intending to include the xGraph.bas file in my project and just make minor mods to get it to do what I want. So i was just interested in knowing whether I would cause a problem if I increased the color dimension from 4 to 10.

I think the idea that FFT output must be plotted on a bar chart is questionable. If you only have a small number of frequency points; say 16, this works, but if like most engineering spectra applications you may have 512 points, or even more, a bar graph is useless. Most spectrum analyzers used for science and engineering display spectra's using line graphs. In fact I have never seen an instrument that used bar graphs, they all used lines. The problem with bar graphs is you cannot easily put multiple spectra on the same plot for comparison and make it legible. Using cursors to read off values is a bit of a nightmare.

I wasn't asking you to add these additional functions, I was going to do it myself. I wasn't going to mod your code I was going to make a class that would use your app as the basis for these other functions. One minor issue I can see is getting a log axis for the frequency scale. In some cases particularly vibration analysis a linear scale is best, but for sound spectra and some types of noise analysis log is better. The Matlab plot could be switched from log to linear using the x Axis properties. The only problem with Matlab is of course the price and it doesn't work that well in a production environment it's more an R&D tool. I'm not worried about having a meaningfull x axis eg dates as using the cursor call back function you can index into a date array and display the results in a label outside of the xGraph. In a lot of cases it's handy to be able to get both the x index and the actual real unit x Value.

As an example of a typical FFT we used in the power industry I have attached a copy of the output of my Matlab App. It's 20,000 bin FFT with a flat-top window using off-line data of the 500 kV voltages from two phases of the transmission line that connects Loy Yang B power station to the grid. This same axis can be used to display the underlying time domain data, however I didn't have a print of this.

Anyway Klaus this is where I'm coming from on this. Thanks for all the work you have done. So I guess I can set the number of colors to 10 and it won't break the functions?


Best regards
Rob

 

[klaus]

I finally added a property UseCustomColors, custom colors and custom widths for curves.
This means that by default, UseCustomColors = False, the 'standard' four colors for the displayed curves are used, like before.
Setting UseCustomColors = True allows to use a specific color and width for each curve.
The 'standard' CurveColor(4) and CurveWidth(4) and CurveCustomColor(NumberMaxCurves) and CurveCustomWidth(NumberMaxCurves) are public arrays.
NumberMaxCurves can be defined in the Designer or in the code, like before.

As written in my previous post, I added also a Smooth method.

Can you please test the attached B4J project before I update it in the xGraph thread.

EDIT: Removed the project, a more recent one is in post#13.

 

[rgarnett1955]

I finally added a property UseCustomColors, custom colors and custom widths for curves.
This means that by default, UseCustomColors = False, the 'standard' four colors for the displayed curves are used, like before.
Setting UseCustomColors = True allows to use a specific color and width for each curve.
The 'standard' CurveColor(4) and CurveWidth(4) and CurveCustomColor(NumberMaxCurves) and CurveCustomWidth(NumberMaxCurves) are public arrays.
NumberMaxCurves can be defined in the Designer or in the code, like before.

As written in my previous post, I added also a Smooth method.

Can you please test the attached B4J project before I update it in the xGraph thread.

Hi Klaus,

I will get to it tomorrow. It's Beer O'Clock time here in Aus and I'm having a cold one, so I think testing complex software is a bad Idea right now.

I should get back to you tomorraow or Monday

Best regards
Rob

I finally added a property UseCustomColors, custom colors and custom widths for curves.
This means that by default, UseCustomColors = False, the 'standard' four colors for the displayed curves are used, like before.
Setting UseCustomColors = True allows to use a specific color and width for each curve.
The 'standard' CurveColor(4) and CurveWidth(4) and CurveCustomColor(NumberMaxCurves) and CurveCustomWidth(NumberMaxCurves) are public arrays.
NumberMaxCurves can be defined in the Designer or in the code, like before.

As written in my previous post, I added also a Smooth method.

Can you please test the attached B4J project before I update it in the xGraph thread.

Hi Klaus,

I tested the new version and it works fine with the following setup code:

'======================================================================================
private Sub initX1
    xGraph1.GraphWithMissingData = True
    xGraph1.SetCurveName(0, "Voltage RMS", False)
    xGraph1.SetScaleManu(0, 200, 260)
    xGraph1.CurveCustomColor(0)  = 0xFFFF0000
    xGraph1.CurveCustomWidth(0) = 2dip
    
    xGraph1.SetCurveName(1, "VMax", False)
    xGraph1.SetScaleManu(1, 200, 260)
    xGraph1.CurveCustomColor(1)  = 0xFF4F4F4F
    xGraph1.CurveCustomWidth(1) = 1dip
    
    xGraph1.SetCurveName(2, "VMin", False)
    xGraph1.SetScaleManu(2, 200, 260)
    xGraph1.CurveCustomColor(2)  = 0xFF4F4F4F
    xGraph1.CurveCustomWidth(2) = 1dip
    
    xGraph1.SetCurveName(3, "Frequency Hz", False)
    xGraph1.SetScaleManu(3, 49, 52)
    xGraph1.CurveCustomColor(3)  = 0xFF006EFF
    xGraph1.CurveCustomWidth(3) = 2dip
    
    xGraph1.SetCurveName(4, "Freq Max", False)
    xGraph1.SetScaleManu(4, 49, 52)
    xGraph1.CurveCustomColor(4)  = 0xFF4F4F4F
    xGraph1.CurveCustomWidth(4) = 1dip
    
    xGraph1.SetCurveName(5, "Freq Min", False)
    xGraph1.SetScaleManu(5, 49, 52)
    xGraph1.CurveCustomColor(5)  = 0xFF4F4F4F
    xGraph1.CurveCustomWidth(5) = 1dip
    
    xGraph1.CurvesToDisplay.Initialize2(Array As Int(0, 1, 2, 3, 4, 5))
    xGraph1.NbSamples = 7200
    xGraph1.NbMaxSamples = 7200
    ...
End Sub

however there is an issue with the Y Axis scale annotations as you can see from the pix below.

I don't see much point in trying to display more than two Y scale value annotations at a time. More than a couple on each side becomes a nightmare to interpret. Users should stick to one or two and scale their variables so that variables are plotted against these Y scales. We had a plant data historian at the power station where I worked and this tried to present multiple data on a line chart with every Y axis annotation. They did this by having very large borders on each side of the plot area. It didn't work well as once you get past half a dozen colors the limitation of color resolution of the human eye kicks in and you can't tell the colors apart.

I think that one solution might be to be able to turn the Y scaling display on or off for each trace.

So in my example I would turn off the scaling for the Black traces and on only for the Vrms (Red) and frequency (Blue). This would leave only two Y scale annotations - quite easy for the user to understand.


You can see from the example that xGraph with the color control and thickness control works really well for displaying max/min bounds and it's dead easy to do.

When you have a lot of traces the in-plot cursor annotations can overlay the graph lines, but this isn't a problem as I just added a button to turn them on or off.

Having the trace colors and cursor values above the chart is really good and makes the need for a complete set of Y axis scale values minimal.

I haven't tested the smoothing and RMS functions yet.

I will get onto it ASAP.

Best regards
Rob

 

[rgarnett1955]

I finally added a property UseCustomColors, custom colors and custom widths for curves.
This means that by default, UseCustomColors = False, the 'standard' four colors for the displayed curves are used, like before.
Setting UseCustomColors = True allows to use a specific color and width for each curve.
The 'standard' CurveColor(4) and CurveWidth(4) and CurveCustomColor(NumberMaxCurves) and CurveCustomWidth(NumberMaxCurves) are public arrays.
NumberMaxCurves can be defined in the Designer or in the code, like before.

As written in my previous post, I added also a Smooth method.

Can you please test the attached B4J project before I update it in the xGraph thread.

Hello again Klaus,

I added in a public variable array variable called

CurveYAxisAnnoEnable

and use it to display or not display the Y axis annotations and it works OK Viz:

    Public CurveCustomWidth(10) As Int
    Public CurveYAxisAnnoEnable(10) As Boolean   'RJG  Line 100
    Public CurveColor(4) As Int

                If CurveYAxisAnnoEnable(nc) = True Then ' RJG Mod Line 677
                    If nc Mod 2 = 0 Then
                        xcvsGraph.DrawText(txt, Graph.Left - dx, y, Texts.ScaleFont, col, "RIGHT")
                    Else
                        xcvsGraph.DrawText(txt, Graph.Right + dx, y, Texts.ScaleFont, col, "LEFT")
                    End If
                End If ' End RJG Mod

This does the trick. Using this method could confuse a user who "turns off" the trace that has the Y annotation enabled leaving the Y axis without any annotation, but a smart user would turn on the annotation for a trace that is turned on that shared this Y Axis range. It would take complicated logic to fix this issue. You would have to find visible curves with common Y axis limits and set the Y Annotations to Enabled for one of them. I'm not sure that this is neccessary.

Anyhow doing it the way I have is simple and works, but my naming conventions might not be good and there might be a more elegant way.

I have attached the xGraph.Bas file I modified.



Best regards
Rob

 

[rgarnett1955]

I finally added a property UseCustomColors, custom colors and custom widths for curves.
This means that by default, UseCustomColors = False, the 'standard' four colors for the displayed curves are used, like before.
Setting UseCustomColors = True allows to use a specific color and width for each curve.
The 'standard' CurveColor(4) and CurveWidth(4) and CurveCustomColor(NumberMaxCurves) and CurveCustomWidth(NumberMaxCurves) are public arrays.
NumberMaxCurves can be defined in the Designer or in the code, like before.

As written in my previous post, I added also a Smooth method.

Can you please test the attached B4J project before I update it in the xGraph thread.

Hi Klaus,

I tested the smoothing and it worked OK but it doesn't take account of missing data. Viz:

I added three additional functions:

1. RMS Smoothing which uses the smoothing window to take the square of the values before summing and then taking the square root at the end. This is useful for analysis of raw ac power line data to convert the varying amplitude of the sine wave into the rms value. I added it as a boolean option, but it could be included as a parameter in the smoothing function. i.e True for RMS Smoothing False for Straight Average. This RMS filter is not the same as the existing rms calc as appears to do the RMS of the whole or selected data set. We used this technique in the power station to convert three phase 50 Hz ac voltages and currents captured at 4kHz sample rate into RMS values for Automatic Voltage Regulator compliance testing.
   
   
2. CalcExponentialLag ; This is based on our old friend the first order difference equation and simulates in discrete time what a first order lag does in the continuous world. i.e. charging a capacitor heating water etc. I have included handling of missing data in this one. I haven't added a calculation of the difference coefficient Kt as a function of the sample period as I've forgotten it again, but I will look it up. You could then enter the sample time of the raw data, the time constant you want and Kt will be calculated.
   
   
3. CalcExponentialLead; This is just the inverse of the previous filter. It's a high pass rather than a low pass. Again I have included missing data handling.

I don't know if you want to include them. I used them a lot in my engineering past. Particularly the RMS filter and Lag. The lag is often quicker than a moving average for heavy smoothing with a large moving average filter window is a lot slower than the lag which only has one multiplication per sample. Compared to N for a moving window (FIR) filter.

I have attached the latest xGraph file along with the small test program. Where I have made changes in xGraph I have put my initials in caps RJG.


Additional: I remembered the Time constant formula Kt = TsampleTime / (TSampleTime + TimeConstant)

I have attached it as xGraphRJGMods_WithTimeConstantCalc.zip

Additional 2: Synchronization of Two Graphs & Height of zoom Scroll bar

1. Synchronization of Two xGraphs

I ran into a problem with the main app I'm developing.

It has two xGraph objects identical in size and x scale, but with different curve data. I wanted to sync the zooming of the graphs i.e. if you zoomed the top one then the bottom graph automatically zoomed to the same x range. viz:

To achieve this I added another event

#Event: Touch (Parameters() As Int)
#RaisesSynchronousEvents: Touch(Parameters())
#Event: CursorPositionChanged (CursorIndex As Int, XIndex As Int)
#RaisesSynchronousEvents: CursorPositionChanged (CursorIndex As Int, XIndex As Int)

'RJG
#Event: ZoomChanged (zib As Int, zie As Int)
#RaisesSynchronousEvents: ZoomChanged (zib As Int, zie As Int)

This event provides a way of setting the zoom range of any other xGraph objects in the App.

The event gets called in two places in the xpnlCursor_Touch method.

                Case 1 'Up'
                ...
                ' RJG Zoom Changed Callback  Line 346
                If xui.SubExists(mCallBack, mEventName & "_ZoomChanged", 2) Then
                    CallSubDelayed3(mCallBack, mEventName & "_ZoomChanged", ZoomIBegin, Index)
                End If               
                
                
                Case 2 'Move'
                ...
                ' RJG Zoom Changed Callback Line 395
                If xui.SubExists(mCallBack, mEventName & "_ZoomChanged", 2) Then
                    CallSubDelayed3(mCallBack, mEventName & "_ZoomChanged", ScaleX.IBegin, ScaleX.IEnd)
                End If

I have updated my example to include two xGraphs to demonstrate the use of the ZoomCahnged event.


2. Height Of Scroll Rectangle

I am using a high-res screen which makes the zoom scroll rectangle very thin. At first I thought it was an artifact then I clicked on it and it turned out to be a scroll
control. I created a new variable:

    Public  zoomCursorHeight As Int
    
    ...
    
'Draws the zoom cursor
Private Sub DrawZoomCursor
    ZoomScale = xpnlCursor.Width / ScaleX.NbSamples
    xcvsCursor.ClearRect(RectZoomCursor)
    If Zoomed = True Then
        RectZoomCursor.Initialize(ScaleX.IBegin * ZoomScale, xpnlCursor.Height - zoomCursorHeight, ScaleX.IEnd * ZoomScale, xpnlCursor.Height)  'RJG
        xcvsCursor.DrawRect(RectZoomCursor, xui.Color_ARGB(180, 180, 180, 180), True, 1)
    End If
    xcvsCursor.Invalidate
End Sub

You can see the effect of this in the screen shot.


I have attached the second version of my test app which has the two xGraphs so you can see how it works.


Best regards
Rob

 

[klaus]

Hi Rob,
I will look at your additions tomorrow.
Thank you for sharing them.

 

[rgarnett1955]

OK

 

[rgarnett1955]

Hi Rob,
I will look at your additions tomorrow.
Thank you for sharing them.

Hi Klaus,

I added a couple of extra things in my detailed post. ZoomChanged Event and Zoom cursor height.

Best regards
Rob

 

[klaus]

Hi Rob.
Almost all your suggestions have been implemented.
I set the visible zoom cursor height according to the scale text height, this is automatic.
The touch zone height was already higher.
I did not add CalcExponentialLag nor CalcExponentialLead, I find these too specialized.
For the synchronization of two xGraphs, I will look to also synchronisize the 'standard' cursor.
This needs some more work.

 

[rgarnett1955]

Hi Klaus,

Thanks for that.

As far as the exponential filters go maybe if you renamed them to "low pass filter" and "high pass filter" the meaning of them might become clear. In any event I can add them in or do them externally. These functions aren't specialised for electrical engineers, they get taught in first year, but I take your point that most people wouldn't know about them.

Another function that might be handy is a way to "print" the chart to an image or pdf. Matlab plots provided this function and could output in various formats, pdf, jpg, png etc. I know you can do a snip or a snag-it and get similar results, but it is nicer to have it built in.

You could then take the file produced and insert the chart into a word document or some other document type. I have no idea how to do this it needs a proper programmer not a hacker like me.

I have incorporated all of my mods into the main application I'm working on and it's looking good. I am developing an interface so users can which select curves to plot, mod the axis ranges and colors, titles etc and save the setups in a db along with the data sources queries using JRDC. I am going to make it a custom view as I like the way these encapsulate the functionality and the screen layout. I will post it when I have got it working.

Best regards
Rob

 

[klaus]

Attached you find the latest version.
It includes a synchronization of two xGraph objects.
You don't need to add much code for the synchronization, just two lines:

    xGraph1.SetGraphToSynchronize(xGraph2)    'synchronizes xGraph2 with xGraph1
    xGraph2.SetGraphToSynchronize(xGraph1)    'synchronizes xGraph1 with xGraph2

All the rest is managed insides the xGraph class.
Below you see a blue line on top of the upper xGraph, this indicates the selected object
All the functions in the bottom part of the demp program apply to the selected xGraph.
To select the xGraph, just click on it, the colored top line will move to the other xGraph.
This is done in the xGraph1_Touch and xGraph2_Touch event routines with:
SelectGraph(xGraph2, xui.Color_Red)
SelectGraph(xGraph1, xui.Color_Blue)
The 'standard' cursor, the additional cursors and the zoom cursor moves are synchronized.
When you move one of them in one graph it is also moved in the other.
The ZoomChanged event routine is no more needed.

It works, of course, only if the X coordinates are the same!

I am not yet really convinced of this principle, duplicate data.
The best way would be to include directly in the class the possibility to display two graphs, but this is another challenge.

The scale routine has been improved, when the Y scales of all the displayed curves are the same, only one scale is displayed.

Can you please test it.

Another function that might be handy is a way to "print" the chart to an image or pdf.

Haven't you seen the Snapshot routine in the demo program !?
With xGraph.Snapshot you get a bitmap and then you can do whatever you want with it.
The Snapshot routine in the demo program saves the bitmap into a file. It is just an example of what can be done.

 

[budakbaru]

Attached you find the latest version.
It includes a synchronization of two xGraph objects.
You don't need to add much code for the synchronization, just two lines:

    xGraph1.SetGraphToSynchronize(xGraph2)    'synchronizes xGraph2 with xGraph1
    xGraph2.SetGraphToSynchronize(xGraph1)    'synchronizes xGraph1 with xGraph2

All the rest is managed insides the xGraph class.
Below you see a blue line on top of the upper xGraph, this indicates the selected object
All the functions in the bottom part of the demp program apply to the selected xGraph.
To select the xGraph, just click on it, the colored top line will move to the other xGraph.
This is done in the xGraph1_Touch and xGraph2_Touch event routines with:
SelectGraph(xGraph2, xui.Color_Red)
SelectGraph(xGraph1, xui.Color_Blue)
The 'standard' cursor, the additional cursors and the zoom cursor moves are synchronized.
When you move one of them in one graph it is also moved in the other.
The ZoomChanged event routine is no more needed.

It works, of course, only if the X coordinates are the same!

View attachment 103564

I am not yet really convinced of this principle, duplicate data.
The best way would be to include directly in the class the possibility to display two graphs, but this is another challenge.

The scale routine has been improved, when the Y scales of all the displayed curves are the same, only one scale is displayed.

Can you please test it.


Haven't you seen the Snapshot routine in the demo program !?
With xGraph.Snapshot you get a bitmap and then you can do whatever you want with it.
The Snapshot routine in the demo program saves the bitmap into a file. It is just an example of what can be done.

Dear Klaus,
Thanks for your excellence graph plotting module. I have tested the above XGraph and need your help to look for 2 functions I need.
1. The setcursor function is not functioning well in B4A. I tried add setcursor function in above demo and it crash. I add it after XGraph.draw method calling. In B4J it is ok.
2. When I click add cursor button but without touch the graph I call removecursor function then it crash.

another thing is about CalcRMSValue function, at line 2071 i think it should be (CurveY(CurveIndex, i) * CurveY(CurveIndex, i)) to calculate the rms value of the curve. Not only (CurveY(CurveIndex, i).

Thanks in advance.

 

[klaus]

Thank you for reporting the issues.
Just to let you know the evolution.
I am currently working on this class improving the synchronization methods.
Point1. I need to investigate further.
Point2. Amended.
CalcRMSValue, of course you are right.