Graph points in WPF and C#

[graph points]

This example extends the previous example Draw a graph in WPF and C# to draw ellipses marking the data sets’ points. See that example for an explanation of how most of the program works.

The following code shows how the program draws its data sets. Scroll down to the blue lines to see the code that is used to graph points. (You can read the rest of the code if you like. See the previous post for information about that code.)

// Draw a simple graph.
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    const double margin = 10;
    double xmin = margin;
    double xmax = canGraph.Width - margin;
    double ymin = margin;
    double ymax = canGraph.Height - margin;
    const double step = 10;

    // Make the X axis.
    GeometryGroup xaxis_geom = new GeometryGroup();
    xaxis_geom.Children.Add(new LineGeometry(
        new Point(0, ymax), new Point(canGraph.Width, ymax)));
    for (double x = xmin + step; x <= canGraph.Width - step; x += step)
    {
        xaxis_geom.Children.Add(new LineGeometry(
            new Point(x, ymax - margin / 2),
            new Point(x, ymax + margin / 2)));
    }

    Path xaxis_path = new Path();
    xaxis_path.StrokeThickness = 1;
    xaxis_path.Stroke = Brushes.Black;
    xaxis_path.Data = xaxis_geom;

    canGraph.Children.Add(xaxis_path);

    // Make the Y ayis.
    GeometryGroup yaxis_geom = new GeometryGroup();
    yaxis_geom.Children.Add(new LineGeometry(
        new Point(xmin, 0), new Point(xmin, canGraph.Height)));
    for (double y = step; y <= canGraph.Height - step; y += step)
    {
        yaxis_geom.Children.Add(new LineGeometry(
            new Point(xmin - margin / 2, y),
            new Point(xmin + margin / 2, y)));
    }

    Path yaxis_path = new Path();
    yaxis_path.StrokeThickness = 1;
    yaxis_path.Stroke = Brushes.Black;
    yaxis_path.Data = yaxis_geom;

    canGraph.Children.Add(yaxis_path);

    // Make some data sets.
    Brush[] brushes = { Brushes.Red, Brushes.Green, Brushes.Blue };
    Random rand = new Random();
    for (int data_set = 0; data_set < 3; data_set++)
    {
        int last_y = rand.Next((int)ymin, (int)ymax);

        PointCollection points = new PointCollection();
        for (double x = xmin; x <= xmax; x += step)
        {
            last_y = rand.Next(last_y - 10, last_y + 10);
            if (last_y < ymin) last_y = (int)ymin;
            if (last_y > ymax) last_y = (int)ymax;
            points.Add(new Point(x, last_y));
        }

        Polyline polyline = new Polyline();
        polyline.StrokeThickness = 1;
        polyline.Stroke = brushes[data_set];
        polyline.Points = points;

        canGraph.Children.Add(polyline);

        // Display ellipses at the points.
        const float width = 4;
        const float radius = width / 2;
        foreach (Point point in points)
        {
            Ellipse ellipse = new Ellipse();
            ellipse.SetValue(Canvas.LeftProperty, point.X - radius);
            ellipse.SetValue(Canvas.TopProperty, point.Y - radius);
            ellipse.Fill = brushes[data_set];
            ellipse.Stroke = brushes[data_set];
            ellipse.StrokeThickness = 1;
            ellipse.Width = width;
            ellipse.Height = width;
            canGraph.Children.Add(ellipse);
        }
    }
}

The blue lines of code loop through a data set’s points. For each point, the code creates a new Ellipse object. It uses the SetValue method to set the Left and Top dependency properties provided by the Canvas control that will contain the Ellipse. If you create an Ellipse in the Window Designer, those properties appear in the Properties window as Canvas.Left and Canvas.Top.

The code then fills in the Ellipse object’s other properties such as its Fill color, Stroke color, StrokeThickness, Width, and Height. The loop finishes by adding the Ellipse to the Canvas control’s Children collection.


Download Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in algorithms, drawing, geometry, graphics, mathematics, wpf and tagged , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.