Adding Labelled Axis to a Bar Chart RRS feed

  • Question

  • User472123540 posted
    I have a Bar Graph that had successfully extrapolated figures from my SQL Database. However, the only problem I have is that I cannot get the x and y axis to have appropriate labels. Especially the x axis, where I want the user to be able to see what each bar belongs to a record in the database.

    This is my coding so far:

    File 1:

    <%@ Register TagPrefix="ChartControl" TagName="Chart" Src="CarControl.ascx" %>
    <%@ import Namespace="System.Data" %>
    <%@ import Namespace="System.Data.SqlClient" %>
    <%@ import Namespace="System.Data.SqlDbType" %>
    <script runat="server">

        Sub Page_Load
            Dim concardb As SqlConnection
            Dim cmdCarSold As SqlCommand
            ' Open a connection to the database
            concardb = New SqlConnection(ConfigurationSettings.AppSettings("cardbconnect"))
            cmdCarSold = New SqlCommand ("Select CarSold, CarModel From Car", concardb)
            ctrlChart.DataSource = cmdCarSold.ExecuteReader()
            ctrlChart.Datafield = "CarSold"
        End Sub

        <ChartControl:Chart id="ctrlChart" runat="server" ForeColor="Purple" BackColor="Yellow"></ChartControl:Chart>

    File 2:

    <%@ Page ContentType="image/gif" Debug="True"%>
    <%@ import Namespace="System.Drawing" %>
    <%@ import Namespace="System.Drawing.Imaging" %>
    <script runat="server">

        Sub Page_Load
            Dim objBitmap As Bitmap
            Dim objGraphics As Graphics
            Dim decMaxData As Decimal
            DIm strBackColor As String
            Dim strForeColor As String
            Dim objBackColor As Color
            Dim objForeColor As Color
            Dim decMultiplier As Decimal
            Dim intWidth As Integer
            Dim intHeight As Integer
            Dim arrChartData() As String
            Dim intDataIndex As Integer
            Dim intDataItem As Integer
            Dim objBrush As SolidBrush
            ' Calculate Multiplier
            decMaxData = Request.QueryString("x")
            ' The height of the graph
            decMultiplier = 400 / decMaxData
            ' Retrieve Colors
            strBackColor = Request.QueryString("backcolor")
            strForeColor = Request.QueryString("forecolor")
            objBackColor = ColorTranslator.FromHTML(strBackColor)
            objForeColor = ColorTranslator.FromHTML(strForeColor)
            objBrush = New SolidBrush(objForeColor)
            ' Build Bar Chart
            arrChartData = Request.QueryString.GetValues("d")
            intWidth = (arrChartData.Length * 15) + 480 ' Width of the outer frame
            intHeight = (decMaxData * decMultiplier) + 5 ' Gap from the highest bar to the top of the frame
            If Not arrChartData Is Nothing Then
                objBitmap = New Bitmap(intWidth, intHeight)
                objGraphics = Graphics.FromImage(objBitmap)
                For intDataIndex = 0 To arrChartData.Length - 1
                    intDataItem = arrChartData(intDataIndex) * decMultiplier
                    ' Size properties of each individual bar - Gap, Rendering. Thickness
                    objGraphics.FillRectangle(objBrush, (intDataIndex * 75) + 5, intHeight - intDataItem, 50, intHeight)
                objBitmap.Save(Response.OutputStream, ImageFormat.GIF)
           End If
        End Sub

        <form runat="server">
            <!-- Insert content here -->

    I want to implement the CarModel for the x axis, so that each bar has a description. Is there a way to do this???


    Tuesday, January 3, 2006 4:20 PM

All replies

  • User1550782130 posted

    This is actually going to require some fairly complex code ... so if you are just a beginner you may want to try to steer clear from it if possible.  However, I made a similar class recently in C# so I know it can be done.  And as luck would have it the X axis label is easier than the Y axis label because it doesn't have to be rotated.

    As you probably already figured out, you will have to make extensive use
    System.Drawing Namespace.  You first need to create a Rectangle structure that will be used to contain and center the axis label.  It might look something like this (like I said it is in C#, but the VB.NET code will look very similar):

    Rectangle recXAxis = new Rectangle((int)(intWidth * .15), (int)(intHeight * .93), (int)(intWidth * .75), (int)(intHeight * .07));

    Then you will need to create a font that will be used to format the label, and also create a StringFormat object that will be used to make the text centered inside the Rectangle:

    Font AxisFont = new Font("Arial", 16);
    StringFormat FormatCenter = new StringFormat();
    FormatCenter.Alignment = StringAlignment.Center;

    Then you simply write the label out to the rectangle passing in the various attributes:

    objGraphics.DrawString("Label Text", AxisFont, new SolidBrush(Color.Black), recXAxis, FormatCenter);

    Hope this helps get you started in the right direction.

    Wednesday, January 4, 2006 6:12 PM
  • User472123540 posted
    Thanks alot mate.

    I appreciate your information, and I will definetly give it a go!

    At least I now have somewhere to start. [:)]

    Thanks again!

    Wednesday, January 4, 2006 6:16 PM