Budgeter 5000 - A Budgeting Prism 6 Windows Application Part 8, Income Graph

OxyPlot

OxyPlot is an open source .NET graphing library.  It is very active on GitHub.  It publishes its builds to Nuget.  It is covered under a MIT license.

I have been highly impressed by the flexibility it allows me to customize graphs.  They do a good job of publishing examples on how to do many different visualizations.

It publishes alpha builds which have broken code in the past.  My example code works against v1.0.0-unstable1886.  At the time of this article they are on version v1.0.0-unstable1904.

 

Graph Structure

The layout of the graph structure is listed below.  We will review the major components in detail.

Graph structure

 

Graph Module

The GraphModule inherits from IModule and implements its required method, Initialize.  The navigation view is added to the navigation region.  The IncomeGraphView type is registered.  

The IncomeGraphViewModel is instantiated to allow the graph to create itself during the application creation.  This enables the report to show more than a blank image if it happens to run before the graph is opened.

By using the Unity container to instantiate the class, the dependencies are automatically resolved.

Graph module

Graph View Model

The IncomeGraphViewModel constructor takes two parameters.  The first parameter, IGraphService will store a reference to the OxyPlot graph.  This is used in the report module to generate an updated image of the graph during report creation.

The second parameter, ITransactionService is used to gather all the data required for the graph.

It calls the method Initialize to implement these services.

Graph constructor

 

Initialize

In Initialize the IncomePlot property is initialized to the GraphService WorkingPlotModel property. Also the TransactionService Updated event is attached.  The event will call the DrawGraph Draw method whenever the data changes.

The DrawGraph Draw method is called to ensure that during application load a graph is created.  It was separated into a static class responsible for all graph drawing functionality.

Graph initialize

Draw Graph

The DrawGraph class is static and will not need to save any state.  It helps the IncomeGraphViewModel to draw and redraw the graph.

It calls these three private methods and uses the IncomePlot.InvalidatePlot(true) command to refresh the graph.

DrawGraph draw

 

Clear Graph

The Oxyplot graph uses collections to store the data.  We must clear it before re-adding any data or it will accumulate.

The Income graph only uses two collections, the axes and series collections.

Graph clear

 

Add Axis

There are different axis types depending on the data and representation you want.  For my income graph I want the date in relation to the amount over time.  I also wanted the date to show at an angle.

Graph add axis

 

Add Series

The series collection contains the data.  Oxyplot supports many different series types.  My income statement is using the LinearBarSeries to display the data as positive and negative bars.

I have two loops in order to separate the income and expense transactions.  I am coloring them differently and inversing the sign on my expenses.

Graph add series

 

Income Graph Complete

Here is what the graph looks like while running.  As new transactions are added the graph will update.  

The mouse can be used to zoom and pan via the scroll wheel and right mouse buttons.

Graph income

 

The complete source code for this project is located on Github.

https://github.com/twodawg/Budgeter5000

 

If you found this article helpful, use the tweet button below to spread the word.  Thank you.

 

Leave your comment