Visual Studio Example
DownloadOrder
Introduction 
Products 
Support 
Contact 

Rt-Plot 
Rt-Tools2D 
Free Component 

Seite in Deutsch



 

 

 

 

  

Usage of Rt-Tools2D for Visual Studio® by Example

The task of generating a two-dimensional graph may initially seem complicated when you look at the Cartesian graph components and their numerous options. A walkthrough of a small example program is thus offered as a usage demonstration. The sample program draws the sine and cosine functions in the range 0-360° as 0-2π:
First, the data to be generated is assessed: the X-data values of the sine and cosine functions will be the same, while sine and cosine will have different function (Y) values for different values of X.
Now create a new project in the IDE and name the form GraphExample. Open the "Rt-Graph2D" palette and place three   DoubleVector components on form designer. Using the Properties Window, rename these to AngleVector, SineVector and CosineVector. Save the project as "GraphExample".

Now place a  Graph2D component on the form and adjust it to fit. On creation, the graph contains two axes: XAxis1 (with Caption X-Axis) and YAxis1 (with Caption Y-Axis).

Now change the names and captions of the axes. The x-axis is modified by clicking on it and editing the corresponding Name to read AngleAxis and the Text to read Angle/Radiant within the object inspector. Do the same for the y-axis, setting Name to FunctionAxis and Caption to Sine and Cosine.

With the graph now visible, add data points to display on it to demonstrate the sine and cosine functions. To do this, place two  PointSeries components on the form. Set their names to SinSeries and CosSeries and the captions to Sine and Cosine, respectively.

Within the form, select both series components. In the object inspector, set the XData property to AngleVector.

   

Select the SinSeries component and set the YData property to SineVector.
Analogously, select the CosSeries component and set the YData property to CosineVector.
Since you will want to have different symbols and lines for the series, set the Line.Color to Green and the PointSymbol.FillColor to Blue.

To assist you in finding the most appropriate line and point settings, the graph will show some random points representing each series. Your graph should now look similar to the graph displayed on the left.

Since with this example you want to display the sine and cosine functions, you need to implement a method to fill the data vectors mentioned above. The simplest way to do this is by placing a Button control to the form and then setting the Click event to the following procedure:

    private void button1_Click(object sender, EventArgs e)
    {
        // adds sine and cosine function values every 10°
        for (int i = 0; i <= 36; i++)
        {
            // using NextIdx instead of i. Clicking twice will extend graph
            int nextIdx = this.AngleVector.Count;
            double angleAsRad = RtScience.WinForms.RtMath.DegRad(nextIdx * 10);
            this.AngleVector[nextIdx] = angleAsRad;
            this.SineVector[nextIdx] = Math.Sin(angleAsRad);
            this.CosineVector[nextIdx] = Math.Cos(angleAsRad);
        }
    }

As you see, the data vectors can be handled as if they are zero based arrays of double. But writing to it, you must not take care for the size of the array. This is adjusted automatically by the DoubleVector component.

If you want to compile the project and run it, please click "button1". Your output should look like the image on the left.

Another way to access the data is to treat it as a list of doubles. This is described in the example with the Click event of a second button. On clicking this button, the graph is extended by one point.

    private void button2_Click(object sender, EventArgs e)
    {
        // adds additional point 10° after the last
        double angleAsRad = RtScience.WinForms.RtMath.DegRad(AngleVector.Count * 10);
        AngleVector.Add(angleAsRad);
        SineVector.Add(Math.Sin(angleAsRad));
        CosineVector.Add(Math.Cos(angleAsRad));
    }

You might want a legend for the series, showing line styles and captions. Do this by adding a  Legend component to the graph. Set the Position property to TopCenterOfGraph then you can generate the output shown on the left.

 

As you can see, it takes only a few minutes to create a fully working graph program.

More Information see  PDF-Manual(2.64MB).

 

Copyright © 2008 Horst Reichert all rights reserved
webmaster@rt-science.com