Windows Forms: Live Chart Graph Controls in WinForm App in C#

This post shows you How to use Live Chart Graph Controls in WinForm App in C# .NET

LiveCharts

Live Charts control is a c# chart library open source, it's simple, flexible, interactive & powerful data visualization for .Net LiveCharts is just data visualization but built and for everyone.

Creating a new Windows Forms Application project, then install the LiveCharts.WinForms from the Mange Nuget Packages to your project,

Next, Rebuild your project you will see the live chart control automatically add into your visual studio toolbox.

CartesianChart

The Cartesian Chart class allows you to plot any series that uses a Cartesian coordinate system, each point is a pair of values ​​(X, Y), in simple terms Y will be the value you passed and X index of the value in the array.

The Cartesian charts support multiple series and you can combine any series in a cartesian chart.

Opening your form designer, then drag CartesianChart, DataGridView and Button controls from the visual studio toolbox to your winform.

c# CartesianChart

Creating the Revenue class, then add a bindingsouce to the DataGridView

public class Revenue
{
    public int Year { get; set; }
    public int Month { get; set; }
    public double Value { get; set; }
}

Adding the Form_Load event handler allows you to initalize the CartesianChart

private void Form1_Load(object sender, EventArgs e)
{
    revenueBindingSource.DataSource = new List<Revenue>();
    cartesianChart1.AxisX.Add(new LiveCharts.Wpf.Axis
    {
        Title = "Month",
        Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
    });
    cartesianChart1.AxisY.Add(new LiveCharts.Wpf.Axis
    {
        Title = "Revenue",
        LabelFormatter = value => value.ToString("C")
    });
    cartesianChart1.LegendLocation = LiveCharts.LegendLocation.Right;
}

Adding the click event handler to the Load button allows you to set data to the CartesianChart

private void btnLoad_Click(object sender, EventArgs e)
{
    //Init data
    cartesianChart1.Series.Clear();
    SeriesCollection series = new SeriesCollection();
    var years = (from o in revenueBindingSource.DataSource as List<Revenue>
                 select new { Year = o.Year }).Distinct();
    foreach (var year in years)
    {
        List<double> values = new List<double>();
        for (int month = 1; month <= 12; month++)
        {
            double value = 0;
            var data = from o in revenueBindingSource.DataSource as List<Revenue>
                       where o.Year.Equals(year.Year) && o.Month.Equals(month)
                       orderby o.Month ascending
                       select new { o.Value, o.Month };
            if (data.SingleOrDefault() != null)
                value = data.SingleOrDefault().Value;
            values.Add(value);
        }
        series.Add(new LineSeries() { Title = year.Year.ToString(), Values = new ChartValues<double>(values) });
    }
    cartesianChart1.Series = series;
}

We will display revenue by year with the CartesianChart.

VIDEO TUTORIAL

Related