Hi! everyone. I am doing a bar chart project.
my project should looks like this:

[img]http://i6.tinypic.com/86gjn2e.jpg[/img]

the problem i have right now is that
i don't know how to draw the rectangle
in the right way.
my rectangle start to draw at the left top, how do i fix my code to make the rectangle draw start from the bottom?
Also, i don't know how to print data values inside each bar, centered horizontally and vertically
Anyone can give me any idea?

this is what i have done so far
[img]http://i8.tinypic.com/6nt35tw.jpg[/img]

Here is my code:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click


		Dim Blue As Brush = Brushes.Blue
		Dim Red As Brush = Brushes.Red
		Dim Purple As Brush = Brushes.Purple
		Dim Green As Brush = Brushes.Green
		Dim Yellow As Brush = Brushes.Yellow

		Dim Black As Pen = New Pen(Color.Black, 3)
		Dim total As Decimal
		Dim data(5) As Decimal
		Dim percentage(5) As Decimal

		data(0) = Val(TextBox1.Text)
		data(1) = Val(TextBox2.Text)
		data(2) = Val(TextBox3.Text)
		data(3) = Val(TextBox4.Text)
		data(4) = Val(TextBox5.Text)

		If data(0) = 0 And data(1) = 0 And data(2) = 0 Then Exit Sub
		total = data(0) + data(1) + data(2) + data(3) + data(4)
		percentage(0) = data(0) / total
		percentage(1) = data(1) / total
		percentage(2) = data(2) / total
		percentage(3) = data(3) / total
		percentage(4) = data(4) / total


		Dim g As Graphics = PictureBox1.CreateGraphics()


		g.Clear(Color.White)


		g.FillRectangle(Blue, 30, 30, 30, 300 * percentage(0))
		
		g.FillRectangle(Red, 65, 30, 30, 300 * percentage(1))
		
		g.FillRectangle(Purple, 100, 30, 30, 300 * percentage(2))
		
		g.FillRectangle(Green, 135, 30, 30, 300 * percentage(3))
		
		g.FillRectangle(Yellow, 170, 30, 30, 300 * percentage(4))
		

		g.Dispose()												 
	End Sub

anyone can help me fix it? Thank you.

This is the correct way to draw a chart..

    Dim Black As Pen = New Pen(Color.Black, 3)
    Dim total As Decimal
    Dim data(5) As Decimal
    Dim percentage(5) As Decimal

    data(0) = Val(TextBox1.Text)
    data(1) = Val(TextBox2.Text)
    data(2) = Val(TextBox3.Text)
    data(3) = Val(TextBox4.Text)
    data(4) = Val(TextBox5.Text)

    If data(0) = 0 And data(1) = 0 And data(2) = 0 Then Exit Sub
    total = data(0) + data(1) + data(2) + data(3) + data(4)
    percentage(0) = data(0) / total
    percentage(1) = data(1) / total
    percentage(2) = data(2) / total
    percentage(3) = data(3) / total
    percentage(4) = data(4) / total


    Dim g As Graphics = PictureBox1.CreateGraphics()


    g.Clear(Color.White)


    g.FillRectangle(Blue, 30, 425-300*percentage(0), 30, 300 * percentage(0))

    g.FillRectangle(Red, 65, 425-300*percentage(0), 30, 300 * percentage(1))

    g.FillRectangle(Purple, 100, 425-300*percentage(0), 30, 300 * percentage(2))

    g.FillRectangle(Green, 135, 425-300*percentage(0), 30, 300 * percentage(3))

    g.FillRectangle(Yellow, 170, 425-300*percentage(0), 30, 300 * percentage(4))


    g.Dispose()                                              
End Sub

anyone can help me fix it? Thank you.

Edited 3 Years Ago by Reverend Jim: Fixed formatting

I have been having a lot of issues about creating a bar chart with a picturebox, but finally I did it and it is working perfectly.

I'll tell you that the code above is fine, but it would work as the image that the user jason7361 was drawing.

The problem with the code is when you put this:

g.FillRectangle(Blue, 30, 425-300*percentage(0), 30, 300 * percentage(0))

The parameters that FillRectangle method has are this:

- Brush as System.Drawing.Brush
- X as integer
- Y as integer
- Width as integer
- Height as integer

The problem happens while setting the Y parameter, because it represents the coordenate of the left superior corner of the rectangle, so you have to calculate that this point is going to be de TOP of your bar.

Basically I have this method that returns me the exact position of the Top of the bar:

Public Function getSize(ByVal pMaxValue As Integer, ByVal pHeight As Double, ByVal pValue As Integer) As Integer


        'pMaxValue ---> pHeight
        'pValue ------> x

        If (pMaxValue = 0) Then pMaxValue = 1

        Dim x As Integer

        x = CInt((pValue * pHeight) / pMaxValue)

        x = CInt(pHeight - x)

        Return x

    End Function

Then I set my Y position like this:

Dim posY As Integer = getSize(maxValue, PictureBox1.Height, value)

where:

- maxValue is the maximum value of the values you want to put in the chart
- PictureBox1.Height is the height of the picturebox you are creating the chart in
- value is the value you want to make a bar with


So... you just have to invoke the FillRectangle method with the posY attribute :)

Hope it helped someone!

Edited 5 Years Ago by eltincho2202: n/a

This article has been dead for over six months. Start a new discussion instead.