Draw a simple histogram in C#


When the program loads, it generates some random data.
private const int MIN_VALUE = 0;
private const int MAX_VALUE = 100;

private float[] DataValues = new float[10];

// Make some random data.
private void Form1_Load(object sender, EventArgs e)
{
Random rnd = new Random();

// Create data.
for (int i = 0; i < DataValues.Length; i++)
{
DataValues[i] = rnd.Next(MIN_VALUE + 5, MAX_VALUE - 5);
}
}

The DrawHistogram method does all of the interesting work.

// Draw a histogram.
private void DrawHistogram(Graphics gr, Color back_color, float[] values, int width, int height)
{
Color[] Colors = new Color[] {
Color.Red, Color.LightGreen, Color.Blue,
Color.Pink, Color.Green, Color.LightBlue,
Color.Orange, Color.Yellow, Color.Purple
};

gr.Clear(back_color);

// Make a transformation to the PictureBox.
RectangleF data_bounds = new RectangleF(0, 0, values.Length, MAX_VALUE);
PointF[] points =
{
new PointF(0, height),
new PointF(width, height),
new PointF(0, 0)
};
Matrix transformation = new Matrix(data_bounds, points);
gr.Transform = transformation;

// Draw the histogram.
using (Pen thin_pen = new Pen(Color.Black, 0))
{
for (int i = 0; i < values.Length; i++)
{
RectangleF rect = new RectangleF(i, 0, 1, values[i]);
using (Brush the_brush = new SolidBrush(Colors[i % Colors.Length]))
{
gr.FillRectangle(the_brush, rect);
gr.DrawRectangle(thin_pen, rect.X, rect.Y, rect.Width, rect.Height);
}
}
}

gr.ResetTransform();
gr.DrawRectangle(Pens.Black, 0, 0, width - 1, height - 1);
}

This code applies a transformation to the Graphics object to map the histogram's coordinates so they fill the PictureBox. It then loops through the data values drawing their histogram bars. It makes the transformation map the number of data values to the PictureBox's width so it can draw each bar with a width of 1.

Note that the code uses a pen of width 0 to outline the bars. A pen of width 0 is always drawn 1 pixel wide no matter what transformation is in use. (Try using a pen of width 1 and see what happens.)

When the user clicks on the graph, the program uses the following code to determine which histogram bar is under the mouse and displays the corresponding data value.

// Display the value clicked.
private void picHisto_MouseDown(object sender, MouseEventArgs e)
{
// Determine which data value was clicked.
float bar_wid = picHisto.ClientSize.Width / (int)DataValues.Length;
int i = (int)(e.X / bar_wid);
MessageBox.Show("Item " + i + " has value " + DataValues[i],
"Value", MessageBoxButtons.OK, MessageBoxIcon.Information);
}

   

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments
  • No comments exist for this post.
Leave a comment

Submitted comments are subject to moderation before being displayed.

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.