How do I get the bar graph to sit at the bottom of the picture box?

149 Views Asked by At

I've been trying for hours but can't seem to figure it out. How can I get the bar-graph to sit on the bottom of the picture box without instead of it hanging from the top. Here is a picture of what it looks like so far. I've tried changing the Y position but it just moves the whole graph downwards rather then inverting it.

I want to take the distance walked and display it in a bar graph using the DrawRectangle, DrawLine Method. Here are the two methods I am using to draw the bar graph:

Method to retrieve data from list then display as bar graph in picture box:

private void DrawBarGraph()
    {
        Graphics canvas = pictureBoxTop.CreateGraphics();
        int x = 200;
        int y = 0;
        foreach (int i in distanceList)
        {
            int length = SCALE_FACTOR * i;
            DrawABar(canvas, x, y, length , Color.Red);
            x += BAR_WIDTH + GAP;
        }             
    }

Method to draw bars:

private void DrawABar(Graphics paper, int x, int y, int length, Color colour)
    {
        //create a brush of specified colour and fill background with this colour 
        SolidBrush brush = new SolidBrush(colour);
        paper.FillRectangle(brush, x, y, BAR_WIDTH, length);

        //draw outline in black
        paper.DrawRectangle(Pens.Black, x, y, BAR_WIDTH, length);
    }

Bar graph drawing with DrawRectangle method.

1

There are 1 best solutions below

0
gunr2171 On

OP's solution (extracted from question post)

    /// <summary>
    /// Draw a bar graph in the picture box
    /// </summary>
    private void DrawBarGraph()
    {
        Graphics canvas = pictureBoxTop.CreateGraphics();
        // Set world transform of graphics object to translate.
        canvas.TranslateTransform(1200.0F, 195.0F);

        // Then to rotate, prepending rotation matrix.
        canvas.RotateTransform(180.0F);
        //set row and column length then allocate colors to specific columns
        int x = 0;
        int y = 0;
        foreach (int i in distanceList)
        {
            int length = SCALE_FACTOR * i;
            DrawABar(canvas, x, y,length , Color.Red);
            x += BAR_WIDTH + GAP;
        }               
    }

After a couple of google searches and a bit more playing around I came across two methods designed to rotate the images inside of a picture box.

Here is the picture below: Inverted bar graph using RotateTransfrom and RotateFlip Properties.