Wednesday, October 21, 2009

VS 2010 Chart/Dundas Charting

I have worked on a very limited basis with Dundas (http://www.dundas.com/) charts in the past and have waited quite some time for charts to come to WinForms. VS2010 finally does this, and from what I can tell they are an exact replica of Dundas if not the actual chart themselves.

I built a project with the Dundas charts and had to tweek many of the parts, so this post will serve as a guide to working with Dundas charts and also VS2010 charts if they do prove to be identical in use as the initial project was built with Dundas, and this sample will use the WinForm chart.
Setting up data sources is the same in VS2010 as it was in previous versions so if you need more detailed instructions, refer to my earlier posts. In this sample I am using the Northwinds.mdb Products table.
Go ahead an drag a chart component onto your form, it should be in the toolbox under Data automatically. We will spend the next bit of time in the charts properties window, it is much easier to set up here than doing it entirely through code.
First thing I do is delete the Legend, you will notice it is a collection, just open it and remove. The next step is to drag the table onto the screen in the form of a DataGridView (check other posts on databinding if you don't know how), you might have to manually select it because in my Beta version None is selected by default. This creates your table adapters and binding sources etc and gives us something to look at to easily verify what we are doing.
Next step, in the properties window set your datasource to the newly created bindingsource. Now we want to modify the series collection, this is where most of the groundwork is done.



I changed the Name, made it a Line chart, and changed the X and Y value members under datasource, these only have selections available if you have binded the chart to a datasource already. This series is UnitsInStock and I will add one more showing UnitsOnOrder and will name it OnOrder:
I also changed the border width to make my line thicker and easier to see, you can also specify in this screen whether the data is on a secondary axis.

Now the chart looks OK, but there is too much data for it to be of much use. So lets filter this using a combobox to let us choose which departments to look at. Drag on a combobox and set the binding (so far in the Beta version, dragging the item from the data source does not actually bind the item) it should look like this:

Now we just need to set the logic up in code. Create an event for a combobox change and add this line:

Me.ProductsBindingSource.Filter = "CategoryID=" & Me.CategoryIDComboBox.Text

What you'll notice however is that the combobox is filled with multiples, and when you change the binding with the filter, you remove all of your selections. You can load the box manually, do buttons instead, any number of things, but I want to show you a way that you can use in other situations that aren't as straight forward.
In you DataSources window right-click on your DataSet and select Edit DataSet with Designer. Now copy the Products table and paste it, this will create another table called Products1. If you link these together, you will be able to make a selection in one which will cascade to another, very helpful but not a part of this post. In the new table choose Configure.



Hit next a couple of times until you get to the SQL and you see Query Builder. You can write the SQL yourself or take the easy route and just use the QB. In the end the SQL should look like this:

SELECT DISTINCT CategoryID


FROM Products



Note the Distinct, this will keep data from showing up multiple times. Keep hitting next and finally Finish. Next we need to update the binding on our ComboBox:

Notice we are opening the dataset and going with Products1 which is the new table we created. The code we have in the selected change is still valid so we can go ahead and run it.

Your data should change, but your chart should not. We need to rebind and update the chart, so at the bottom of the selectedChange event we will add:

Me.Chart1.DataBind()
Me.Chart1.Update()

Thats it, your chart should now update based upon your selection.

The next post will show how to tweak some things such as X and Y minimums and maximums as well as tooltips and labels.

No comments: