|
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
fields XtraTitle 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;
|
