How to animate a chart in Visual Studio C#?

Question

Is there a way to animate a chart in a C# Form Application in Visual Studio 2013 to show the line being gradually drawn onto the screen once a button is pressed? Thanks in advance :)

Sure. For animation in Winforms use a Timer. Are you using Winforms?? __Always__ tag your question correctly. — TaW, Apr 19 '16 at 14:22
I haven't tried anything yet because I didn't know where to start, yes I am using a Windows Form Application in Visual Studio, how would I use a timer for this? — Josh Macleod, Apr 19 '16 at 17:14

score 2 · Accepted Answer · edited May 23 '17 at 12:09

Here is an example that should get you started. It first creates test data and then uses a Timer to display them..:

List<PointF> data = new List<PointF>();
Timer timer = new Timer();

private void button1_Click_1(object sender, EventArgs e)
{
    data.Clear();

    for (int i = 0; i < 400; i++)
    {
        float x = i / 50f * (float)( Math.Cos(i / 10f));
        float y = i / 50f * (float)(Math.Sin(i / 10f));
        data.Add(new PointF(x,y));
    }

    chart1.Series.Clear();
    Series S1 = chart1.Series.Add("S1");
    Series S2 = chart1.Series.Add("S2");

    S2.MarkerSize = 2;
    S2.MarkerStyle = MarkerStyle.Circle;
    S2.Color = Color.Green;
    S1.Color = Color.FromArgb(64, Color.Red);
    S1.BorderWidth = 9;

    S2.ChartType = SeriesChartType.Point;
    S1.ChartType = SeriesChartType.Line;
    chart1.ChartAreas[0].AxisX.Minimum = -10;
    chart1.ChartAreas[0].AxisX.Maximum = 10;
    chart1.ChartAreas[0].AxisY.Minimum = -10;
    chart1.ChartAreas[0].AxisY.Maximum = 10;
    chart1.ChartAreas[0].BackColor = Color.White;

    timer.Interval = 15;
    timer.Start();
}

Note that I am using a PointF structure to store the test data as it is a handy floating point structure..

This is the Timer.Tick event. Don't forget to hook it up! Here we draw all data until we are through; then we stop the Timer:

void timer_Tick(object sender, EventArgs e)
{
    Series S1 = chart1.Series[0];
    Series S2 = chart1.Series[1];
    int pointsSoFar = S1.Points.Count;
    if (pointsSoFar < data.Count)
    {
        S1.Points.AddXY(data[pointsSoFar].X, data[pointsSoFar].Y);
        S2.Points.AddXY(data[pointsSoFar].X, data[pointsSoFar].Y);
    }
    else
    {
        timer.Stop();
        chart1.ChartAreas[0].BackColor = Color.AntiqueWhite;
    }
}

Note that I have chosen to draw the Lines in a semitransparent color. It is instructive to watch the results of the strong overlapping of the line segments!

And here..

..the resulting..

.. animation..:

How to animate a chart in Visual Studio C#?

1 Answers1