Page 1 of 1

Bar Chart in C#

#1 rusoaica  Icon User is offline

  • They're watching you, Neo!
  • member icon

Reputation: 209
  • View blog
  • Posts: 672
  • Joined: 10-March 12

Posted 25 October 2014 - 07:35 PM

Bar Chart in C# [WinForms]


This tutorial will show you how you can draw a bar chart as a Control, in C#. The final product will look like this:

Posted Image

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:

Spoiler


Remember, because our class is a custom control, we need to make it inherit from Control, like this:

Spoiler


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:

Spoiler


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:

Spoiler


Now, we can properly initialize our control and set its default values:

Spoiler


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:

Spoiler


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:

Spoiler


At this point, we can provide a method that we can call to provide the values of each column of our chart:

Spoiler


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:

Spoiler


At last, it is time to draw our rows and columns. This involves a little bit of math (yuck!):

Spoiler


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:

Spoiler


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:

Spoiler


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


Is This A Good Question/Topic? 0
  • +

Replies To: Bar Chart in C#

#2 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5676
  • View blog
  • Posts: 12,199
  • Joined: 02-June 10

Posted 26 October 2014 - 07:23 AM

I think this is closer to looking like a VU meter than a bar chart. But a nice tutorial. Thanks for the hard work.

This post has been edited by tlhIn`toq: 26 October 2014 - 07:23 AM

Was This Post Helpful? 1
  • +
  • -

#3 rusoaica  Icon User is offline

  • They're watching you, Neo!
  • member icon

Reputation: 209
  • View blog
  • Posts: 672
  • Joined: 10-March 12

Posted 26 October 2014 - 07:37 AM

Yes, indeed, it might be used as a VU-Meter control, and i was thinking of naming it that way, but if i were to chose that name, i would have had to also provide an example of using it with some media player; for that, i would have had to also create a tutorial about getting the audio stream, split it into different frequences that can be measured, etc. This way it's simple and easy to understand.
You are welcome! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1