This tutorial will show you how you can draw a bar chart as a Control, in C#. The final product will look like this:
First, open Visual Studio and create a new C# Windows Form Control Library project. Name it BarChartControl. Open BarChartControl.cs. It's time to start coding. There are several namespaces that needs to be imported at the top of our code:
Remember, because our class is a custom control, we need to make it inherit from Control, like this:
Also, we need to add a few class-level variables that we will use later on in our code. So, we add them at the top of our Class:
Our chart now needs some properties. There are 5 properties: the chart rows number, the chart columns number, the minimum value color, the medium value color and the maximum value color of the chart. We split the values between minimum, medium and maximum so we can display a three-colors bar chart:
Now, we can properly initialize our control and set its default values:
Of course, you can set the default values and colors of the bar chart to whatever your needs. After setting its properties and initializing it, our controls needs some methods. First, SetBarChartColumns. This method can be called to specify the number of columns and rows we want for our chart control. It also checks for invalid values that could result in errors, if unhandled:
Next, we provide a method for setting the range of our chart. The defaults are: minimum = 0-60, medium = 60-80, maximum = 80-100. We call this method if we want to display a different range:
At this point, we can provide a method that we can call to provide the values of each column of our chart:
Lets take a closer look at our parameters:
- value - this is the actual number of columns we wish to display. If we provide a number that is less than the number of column in our control, the columns that are not being assigned a value to will display the default maximum value. This is useful when we wish to display just a range of our chart values.
- offset - will move the starting value of our first and subsequent columns to the value provided. So, if we have 100 values and we want our chart to display the values starting at the 33rd value, we set our offset to 33.
- size - is the number of values we wish to display. If we have 100 values and we want our chart to display only 10 of them, here we set our value.
In this method you can also notice that we assign the value of each chart bar to our integer array InputData.
Before we go to the actual drawing part, we need one last function that can tell us whether our value is in the valid range:
At last, it is time to draw our rows and columns. This involves a little bit of math (yuck!):
What it actually does is take all the values in our integer array, assign each value a column and create as many rows as the actual value. If the value is smaller than the maximum value of our control, the rest of the rows are set to the BackColor property of our control. The rows that are within our integer value, are split between our minimum, medium and maximum values, so they can be drawn with the corresponding colors.
These being said, we now overwrite our OnPaint event so we can actually draw our final control:
That's it! In conclusion, we add our control to a Windows Form so we can actually see it at work. For this, we will add a timer that will change some random values that we will assign to some integer array, like this:
Now, you can replace the integer array with some values retrieved from a database or whatever numerical data you need to display.
This post has been edited by tlhIn`toq: 26 October 2014 - 07:14 AM