Create a math plot in c# xaml

Question

I have a c# xaml project and I want to create a plot that depicts real time a fuction an output variable. I want to plot every time the new value of a variable in fact and demostrate it in a diagram in xaml. How can I do so? I am using .NET 4.5. I tried to followed the answer below. I created the following code:

 private void AddChart(List<float> scores)
    {
        // Draw sine chart:
        polyline = new Polyline { Stroke = Brushes.Black };

        for (int i = 0; i < scores.Count; i++)
        {
            var y = scores[i];
            polyline.Points.Add(CorrespondingPoint(new Point(i, y)));
        }
        canvas.Children.Add(polyline);

    }
    private Point CorrespondingPoint(Point pt)
    {
        var result = new Point
        {
            X = (pt.X - xmin) * canvas.Width / (xmax - xmin),
            Y = canvas.Height - (pt.Y - ymin) * canvas.Height
                / (ymax - ymin)
        };
        return result;
    }

AddChart take as an input a list of scores which every time that the function is called is updated and plot it. However it doesnt seem to work like this. Could anyone help on this? How can I add axis in the plot?

score 3 · Answer 1 · answered Nov 17 '15 at 14:46

I tried a lot of open source alternatives, and really they were not what I needed, thats why I made this https://github.com/beto-rodriguez/Live-Charts it has a nice documentation nd examples when you clone the repo.

XAML

<charts:LineChart Height="300" x:Name="LineChart" 
          Background="#FBFBFB" BorderBrush="LightGray" BorderThickness="1"
          Zooming="True"></charts:LineChart>

C#

        LineChart.Series = new ObservableCollection<Serie>
        {
            new LineSerie
            {
                PrimaryValues = new ObservableCollection<double>
                {
                    -10, 5, 9, 28, -3, 2, 0, 5, 10, 1, 7, 2
                }
            }
        };

score 2 · Accepted Answer · answered Nov 17 '15 at 12:17

Or if you wish to have more control you can consider scaling with help of Canvas:

<Window x:Class="MathPlot.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MathPlot"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="240" Margin="21,37,0,0" VerticalAlignment="Top" Width="463"/>
    <Button x:Name="Draw_Sin" Content="Draw Sin" HorizontalAlignment="Left" Margin="21,292,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.498,-0.932" Click="Draw_Sin_Click"/>

</Grid>

And C# code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Draw_Sin_Click(object sender, RoutedEventArgs e)
    {
        AddChart();
    }


    private double xmin = 0;

    private double xmax = 6.5;
    private double ymin = -1.1;
    private double ymax = 1.1;
    private Polyline polyline;


    private void AddChart()
    {
        // Draw sine chart:
        polyline = new Polyline {Stroke = Brushes.Black};

        for (int i = 0; i < 70; i++)
        {
            var x = i / 5.0;
            var y = Math.Sin(x);
            polyline.Points.Add(CorrespondingPoint(new Point(x, y)));
        }
        canvas.Children.Add(polyline);
        // Draw cosine chart:
        polyline = new Polyline
        {
            Stroke = Brushes.Black,
            StrokeDashArray = new DoubleCollection(new double[] {4, 3})
        };
        for (int i = 0; i < 70; i++)
        {
            var x = i / 5.0;
            var y = Math.Cos(x);
            polyline.Points.Add(CorrespondingPoint(new Point(x, y)));
        }
        canvas.Children.Add(polyline);
    }
    private Point CorrespondingPoint(Point pt)
    {
        var result = new Point
        {
            X = (pt.X - xmin)*canvas.Width/(xmax - xmin),
            Y = canvas.Height - (pt.Y - ymin)*canvas.Height
                /(ymax - ymin)
        };
        return result;
    }

}

I want the values of a list of float to be rendered real time. — snake plissken, Nov 17 '15 at 13:48
For real time drawing isntead of Math.Sin(x) feed your values. Also you can add floats instead of doubles. For axis I propose to create another function, inside of which you'll be able to draw two polilines — Yuriy Zaletskyy, Nov 17 '15 at 13:55
Almost I did it. I wasnt able to see it because I had an extremely high fps of values. One last question how can I change the color and the font of the strength of the line. — snake plissken, Nov 17 '15 at 14:00
Try Stroke = Brushes.Red for color, for strength of the line try StrokeThickness = 10 — Yuriy Zaletskyy, Nov 17 '15 at 14:09

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

This library might be interesting for you: http://www.codeproject.com/Articles/32836/A-simple-C-library-for-graph-plotting

This question here might be helpful as well: WPF chart controls

To update everytime a new value of a variable is set, you just raise an event which updates your plot.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 17 '15 at 12:01

FKutsche

392
2
17

Create a math plot in c# xaml

3 Answers3