OxyPlot Charting Control

The other day, I needed to display a simple time-series chart inside a little tool I was writing. Now, as we know the web has a slew of cool charting controls to pick from including chart.js and amcharts.js which I have used in the past and are great.

But those libraries were out of the question because I needed to include the chart inside a WinForms application.

Now, in the past I played with the Charting Controls from Microsoft and whilst they are good, that suite of controls has not been updated for an ice-age! So I decided to have a look to see what the landscape looks like for charting controls in the WinForms / WPF arena which is where I came across OxyPlot.

OxyPlot is a cross-platform library for .NET and supports WinForms, WPF, Xamarin and UWP (but let's be honest, Who is targeting universal windows apps?). What makes OxyPlot interesting is that their main page says the project is supported by the likes of JetBrains and Xamarin to mention just a few! Those are big names and mean that the project is very well looked after and is very stable and performant.

How performant? Well, it was able to cope with the "100 thousand" datapoints I threw at it (which was much more than I needed). It's very fast!

The documentation can be found here although it is quite patchy in places. For example, the documentation to tell you how to add the control to the VisualStudio toolbox is absent from the docs at the time I was investigating this project. But on the whole, you don't need the docs because the demo app is very comprehensive with literally 100's of examples.

I mean, just look at that Rose Curve!!!

Psst... Come closer. So, between me and you, I have never heard or come across a rose curve before now!!

Code

Getting up and running with plotting a simple a date/time series is pretty easy. I just knocked-up a quick model class to hold the data and added the list to the LineSeries ItemSource property. Here is my code sample in full:

// Step 01: Create a Model class to hold the data
public class ChartDataPoint
{
    public DateTime Date { get; set; }
    public int Value { get; set; }

    public ChartDataPoint( DateTime d, int v)
    {
        Date = d; Value = v;
    }
}

// Step 02: Create the Plot Model
var plotModel = new PlotModel { Title = "Some Cool Chart" };

// Step 03: Setup Y (Left) Axis
plotModel.Axes.Add(new LinearAxis
{
    Title              = "Left",
    Position           = AxisPosition.Left,
    MajorGridlineStyle = LineStyle.Solid,
    MinorGridlineStyle = LineStyle.Dot,
    TickStyle          = OxyPlot.Axes.TickStyle.Outside
});

// Step 04: Setup X (Bottom) Axis
var startDt = new DateTime(2011, 1, 1);
plotModel.Axes.Add(new DateTimeAxis
{
    Position           = AxisPosition.Bottom,
    Minimum            = DateTimeAxis.ToDouble(startDt),
    Maximum            = DateTimeAxis.ToDouble(startDt.AddDays(365)),
    IntervalType       = DateTimeIntervalType.Days,
    MajorGridlineStyle = LineStyle.None,
    Angle              = 30,  // the angle of the text
    StringFormat       = "dd-MM-yyyy",
    MajorStep          = 30, // the positioning of the labels at bottom
    IsZoomEnabled      = true,
    MaximumPadding     = 0,
    MinimumPadding     = 0,
    TickStyle          = OxyPlot.Axes.TickStyle.Crossing
});

// Step 05: Setup the Line Series
var lineSeries = new LineSeries
{
    Title      = "Awesome Series",
    DataFieldX = "Date",
    DataFieldY = "Value",
    YAxisKey   = "megatonnes/day"
};

// Step 06: Populate some data from somewhere!
var chartValues = new List();

for (int nLoopCnt = 1; nLoopCnt < 365; nLoopCnt++)
{
    // generate a random value
    var value = random.Next(1, 100);

    // add data to list
    chartValues.Add(new ChartDataPoint(nextTime, value));

    // increment date by 1 day
    nextTime = nextTime.AddDays(1);
}

// Step 07: Add the values to the line series
lineSeries.ItemsSource = chartValues;
plotModel.Series.Add(lineSeries);

// Step 08: Add the plot model to the control
plotViewChartData.Model = plotModel;

Honorable Mention

Now, I should say, whilst researching charting controls out there I also found LiveCharts which also looks like a great library and something I might use in the future. But when I came to load my test of "100 thousand" data-points LiveCharts coughed and spluttered!! Now, in fairness it wasn't until after that I found that there is a high performant plugin called LiveCharts.Geared which handles more data but by then I had already moved on...Plus LiveCharts.Geared does not look like its free.

Wrapping Up

That's it.. short and sweet. OxyPlot has officially been added to my programmers toolkit! If you need a charting control for your .Net app then give it the once over. It's a nice simple drop-in!