Exploring the Windows Forms controls in our new Cashflow Dashboard

This month, Infragistics takes you through the creation of a financial cash flow dashboard using our Windows Forms controls, but without looking like a typical clunky Windows Forms application.

To start with, Infragistics designers came up with a mockup of what they wanted the application to look like:

After all was said and done, the finished application looks like this:

The biggest challenge implementing this was the chart on top in the ‘total cashflow’ section. The new Infragistics UltraDataChart is a powerful control, but it could not achieve the desired effect here right out of the box. As you can see, the total cashflow chart has two different Y Axes, and the middle section is really nothing but a series of labels. This took some creative coding.

In fact, that top chart is really 3 separate chart controls that are cleverly styled to appear as one.

The first chart is a simple Line Series.

 

The second is a chart that only displays Axis labels and no data.

And the third chart contains 4 Column Series – two for inflow and outflow and two more for the projected values (which display as circles).

This required the addition of a separate UltraScrollBar control to allow synchronized scrolling of all three charts. And the highlight of the ‘active’ item was achieved using the Paint event of the controls to draw a semi-transparent overlay and a border.

The bottom section of the dashboard displays details of inflow and outflow using either a StackSeries or an AreaSeries, depending on the user’s selection:

And we round things out with an UltraWinGrid to show the actual numbers.

The summary blocks on the left side of the dashboard are UserControls which contain Infragistics UltraLabel controls. They are arranged inside the UltraGridBagLayoutPanel so that they size proportionally along with the form.

When you start off by seeing just how much data we needed to include in this dashboard, it's pretty impressive to see the finished product. 

Inspired to build your own dashboard next? Grab your free trial of Infragistics Ultimate, check out our making of the app video, and get the code for yourself so you can start creating some in-depth visualizations like this one. Happy coding!