XYGraph Features

XYGraph Features

Learn how to draw a simple graph and make use of more advanced features.

Here we show you how to control and manage your chart and give you further tips for optimal usage.

After setting a few basic properties we will draw a simple sin wave. Code is shown for C# and can easily be converted to Visual Basic and C++.
See code examples for Visual Basic and C++ usage.

Step 1: Basic Properties

After adding an XYGraph to your form you can select the graph and press F4 to view and set its properties.
Properties can also be set at runtime as shown below.

You can label the graph by filling in the fieldsXtraTitle and XtraLabelX and XtraLabelY. Don’t change any of the other default settings for now.

Step 2: Basic Graph

A graph is created using the method AddGraph. Data is added using AddValue and the graph is redisplayed with Invalidate.

MyGraph.AddGraph(“Sin”, DashStyle.Solid,
Color.Red, 1, false);
for(float x=0; x<1000; x++)
MyGraph .AddValue(0, x, (float)Math.Sin(x / 3.14));
MyGraph .Invalidate();

Step 3: Two Graphs

With a few extra lines we add another graph.

MyGraph.AddGraph(“Sin”, DashStyle.S olid, Color.Red, 1, false); MyGraph.AddGraph(“Sin2”, DashStyle.Dot, Color.Blue, 1, false); for(float x=0; x<1000; x++)
{
MyGraph.AddValue(0, x, (float)Math.Sin(x/(10*3.14)));
MyGraph.AddValue(1, x, (float)Math.Sin(2*x/10*3.14)));
}
MyGraph .Invalidate();

Step 4: Show Legend

The legend can be displayed at runtime with the following statement:

MyGraph.XtraLegend = true;

Step 5: Context Menu

Right click on the graph for a pop-up menu with seven functions as shown below.

Step 6: Manual scaling

By turning autoscale off and setting the minimum and maximum for each axis, scaling can be manually controlled. The step property can be used to control the number of ticks.

MyGraph.XtraAutoScale = false;
MyGraph.XtraXmin  = 0;
MyGraph.XtraXmax  = 1000;
MyGraph.XtraXstep = 200;
MyGraph.XtraYmin  = -2;
MyGraph.XtraYmax  = 2;
MyGraph.XtraYstep = 1;

Step 7: Label Style

The X and Y labels can be shown in the usual positions centered next to the axis or positioned as below to save space.

MyGraph.XtraClassicLabels = false;

Step 8: Marker

Special events can be indicated with a marker by using the function AddVertLine.

MyGraph.AddVertLine(x, “Max”, DashStyle.Solid, Color.Green,2);


Step 9: Graph Alignment

If you have two graphs which are not aligned on the left axis as shown below, you can align the two charts by setting a minimum left margin:

This misalignment can be removed by setting a min. left margin:

UpperGraph.MinLeftMargin = 65;
LowerGraph.MinLeftMargin = 65;


Step 10: Events

Events can be added to reflect the zoom in one graph into another. Double click  the event XtraZoomChanged on each graph:

private void UpperGraph_XtraZoomChanged(object sender,
componentXtra.XYGraph.ZoomChangeEventArgs e)
{
LowerGraph.ZoomX(e.xFrom, e.xTo);
}

private void LowerGraph_XtraZoomChanged(object sender,
componentXtra.XYGraph.ZoomChangeEventArgs e)
{
UpperGraph.ZoomX(e.xFrom, e.xTo);
}

Step 11: Logarithmic

Data can be displayed on a single or double logarithmic scale by setting the two properties as shown below.

MyGraph.XtraLogX = true;
MyGraph.XtraLogY = true;

 

Additional information
For further details and a list of properties and methods see the Help File and try  our Demo Application.