Graph settings

gkumar

Active Member
Licensed User
Longtime User
I have to display a graph with multiple curves.
I saw the Graph sample application. I could not understood what is amplitude, offset and omega parameters.
I have around 200 X and Y points. Is it not possible to direct curve point value assigment without above parameters?

I want a similar kind of graph look as in attached image.
Please let me know the best possible settings for this.
 

Attachments

  • graph.png
    graph.png
    7.7 KB · Views: 356

klaus

Expert
Licensed User
Longtime User
The curve values are stored in the Curve(i, n) array where:
i is the sample index
n is the curve index
Curve(43, 2) is the value of sample 43 in curve 2.
The indexes begin with 0.
In the Graph example the CurveValInit routine only calculates example curves to show.
The curves are sine curves where Amplitude is the sine amplitude, Offset is the zero offset and Omega is the sine period.
You can put in this routine whatever you need, the only restriction is the Curve array or write another routine more suited to your needs.
Depending on your scales you need to adapt the ScaleXMin, ScaleXMax , ScaleYMin and ScaleYMax values.

You could also have a look at the Oscilloscope example.

Best regards.
 
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Hello Klaus,
Thanks for the info.

I am having 150 pair of X and Y values. But curves array takes 2 parameter, one is for curve index and another is Y value? Which place I need to use this X and Y value assignment and how? Is it in CurveValInit()? Means how can I calculate the curve point based on X and Y value?
 
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
To give you a concrete answer I need more information.
1) Do you have two arrays for the X and Y values ?
2) Is the X space between the points constant or different ?

1) It would be easier to modify the CurveDraw routine and use the two arrays one to calculate the X screen coordinate and the other for the Y screen coordinate.
2) You need to calculate the X screen scale to calculate the X screen coordinatefor each point.

If you posted your code I would have a look at it.

Best regards.
 
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Thanks Klaus, I am just analising and developing the app. I will send you my sample app, If I am stuck in between.

Meanwhile I can store the X and Y values in separate array, as well as in Map.
So If I have separate arrays for X and Y values, then what will be the calculation to find out the coordinates? I am having different X values, but division is 10 divisions between XMax and XMin. As in the attached image of previous thread, If I am having separate X and Y value arrays and X and Y scales and divisions as shown in the image, then how the curve point calculation can be done?
 
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
Attached you find a modified version of the Graph1 program that comes also with the User's Guide with different Y scales for each curve.
The modified version Graph2 works with two arrays for the point values CurveX(i, n) and CurveY(i, n).
It works also if the ScaleXMin value is different from 0.

Best regards.
 

Attachments

  • Graph2.zip
    8 KB · Views: 386
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Hi Klaus, Thanks for your inputs.

I have modified the code again to have only one curve for now and hardcoded the 80 X and Y values, But the graph line displays as a single stright line. Whats wrong here?
Please find the attached modified code.
 

Attachments

  • Graph2.zip
    9.5 KB · Views: 263
Upvote 0

klaus

Expert
Licensed User
Longtime User
The problem is that in the CurveValInit routine you recalculated CurveX and CurveY and there you replaced your values by a straight line.

In the original program CurveNbPoints was the total number of points - 1 and represented the number of lines or spaces.
It wasn't the best so I replaced it by CurveNbPoints_1

- You shouldn't have changed ScaleGravity(0) = "RIGHT", I reset it from LEFT to RIGHT.

- I moved the curve definition into the CurveValInit routine.

Attached the modified version.

Best regards.
 

Attachments

  • Graph21.zip
    8.8 KB · Views: 304
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Thanks Klaus!


In yesterdays code which you sent, I tried by reducing the ScaleYMin(0) value to 100, then the Y scale text was not displayed properly in the graph. I tried with ScaleYMin(0) value as 200, then the scale displayed properly. I could not figure out the problem by debugging the code.

One more thing i wanted to ask you that, I need to draw few curve lines as dotted lines instead of continuous line. Is it possible? how can I achieve this?
 
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Klaus, Y scale was displaying out of border, thats why it was looking like wrong number. After reducing the scale text size and Rounding the number to fixed decimal digits, its displaying properly now..

But my other question is, I need to draw few curve lines as dotted lines instead of continuous line. Is it possible? how can I achieve this?
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
Here you are, it needed some Googeling and testing.
It needs to use the ABExtDrawing Library.
Instead of drawing the curve with the DrawLine function we need to use a ABPath and a ABPaint objet and draw the Path with a ABExtDrawing object.

Best regards.
 

Attachments

  • Graph3.zip
    9 KB · Views: 369
  • DashedLines.jpg
    DashedLines.jpg
    47.4 KB · Views: 349
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Wow Klaus, that looks cool! Thanks.:)

One more question!:eek:

1) How can I reduce the grid area and move the scaling little bit inside so that I can put some lable text for X and Y axis.

1) How can I draw a hiphen(--, -) kind of lines outside of grid lines after scaling points mentioned. As in my thread start image attachment.. Is it possible?


Thanks again.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
In the routine GridInit you can change the value of GridX0.
GridX0 represents the the distance from the Graph border to the grid.
If necessary you could also change the value of GridW.
You should read the explanations in chapter 9.3.1 Diagrams / Graph example program in the User's Guide.
You can add the scale ticks in the ScaleXDraw and ScaleYDraw routines drawing small lines.
To add texts for the X and Y scales I suggest you to draw the texts instead of using Labels.

Best regards.
 
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Hi Klaus,

I am drawing one graph with one curve line with required points, its working fine. Now I am trying to draw the second curve line. Here my new tasks are,

1) when the scale changes for second curve line, I want to redraw the first curve line to adjust to the new scale(new scale will be within the range of first curve line)

2) When I uncheck something, the second curve line should disappear. (Remove the particular curve line). How can I achieve this?
 
Last edited:
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
Hi Klaus,
Thanks for the inputs.
I am getting the graph display as in attached image.
But I want line draw as smooth line. As of now curve points ranges from 200 to 500 points. I tried to reduce the CurveLinestroke to less than 2. But that is not giving smooth line look.
 

Attachments

  • graph.png
    graph.png
    3.1 KB · Views: 277
Upvote 0

klaus

Expert
Licensed User
Longtime User
You can try to set the Antialiasing filter to ON.
User's Guide chapter 9.4
B4X:
Sub SetAntiAlias (c As Canvas, Active As Int)
    ' Active = 0 filter OFF
    ' Active = 1 filter ON
    Dim r As Reflector
    Dim NativeCanvas As Object
    r.Target = c
    NativeCanvas = r.GetField("canvas")
    Dim PaintFlagsDrawFilter As Object
    PaintFlagsDrawFilter = r.CreateObject2("android.graphics.PaintFlagsDrawFilter", _
        Array As Object(0, Active), Array As String("java.lang.int", "java.lang.int"))
    r.Target = NativeCanvas
    r.RunMethod4("setDrawFilter", Array As Object(PaintFlagsDrawFilter), _
        Array As String("android.graphics.DrawFilter"))
End Sub
Best regards.
 
Upvote 0

gkumar

Active Member
Licensed User
Longtime User
I searched in this link, but there is no 'Reflector' library, only 'Reflection' library is there. Or am I missing something?
 
Upvote 0
Top