compare-chart.aspx

ASP.NET Web Forms Techniques

<%@Page Language="C#" EnableViewState="False" EnableSessionState="False"%>
<%@Import Namespace="System.Drawing" %>
<%@Import Namespace="System.Drawing.Imaging" %>
<%@Import Namespace="System.Data" %>
<%@Import Namespace="System.Data.SqlClient" %>
<script runat="server">

// page-level variable to hold comparison type
String sCompareIndex;

// page-level variable to hold vehicle list
String sModelList;

// page-level variable to hold chart caption
String sCaption;

// page-level variable to hold bitmap object
Bitmap oBitMap;

// page-level variable to hold graphics object
Graphics oGraphics;

// page-level variable to hold pen for drawing lines
Pen oPen;

// page-level variable to hold brush for drawing text
SolidBrush oBrush;

// page-level variable to hold array of colors
Color[] aColors = new Color[13];

// -------------------------------------------------------------------

void Page_Load() {

  // set content-type of response so client knows it is a GIF image
  Response.ContentType="image/gif";

  // create a new bitmap
  oBitMap = new Bitmap(400, 350);

  // create new graphics object to draw on bitmap
  oGraphics = Graphics.FromImage(oBitMap);

  // create a black pen for drawing lines
  oPen = new Pen(Color.Black, 1);

  // create a white solid brush for the background and fill it
  oBrush = new SolidBrush(Color.White);
  oGraphics.FillRectangle(oBrush, 0, 0, oBitMap.Width, oBitMap.Height);

  // get comparison type from query string
  sCompareIndex = Request.QueryString["ctype"];
  int iCompareIndex = -1;
  try {
    iCompareIndex = int.Parse(sCompareIndex);
  }
  catch {}
  if (iCompareIndex >= 0 && iCompareIndex <= 2) {

    // get model list from query string
    sModelList = Request.QueryString["list"];
    if (sModelList != "" && sModelList != null) {
      DrawChart();
    }
    else {  // no vehicle list in query string
      DrawErrorMessage("No vehicles specified");
    }

  }
  else {  // no comparison type in query string
    DrawErrorMessage("Comparison type incorrect or not specified");
  }

  // write bitmap to response
  oBitMap.Save(Response.OutputStream, ImageFormat.Gif);

  // dispose of objects
  oPen.Dispose();
  oBrush.Dispose();
  oGraphics.Dispose();
  oBitMap.Dispose();
}

// -------------------------------------------------------------------

// routine to draw chart on bitmap
void DrawChart() {

  // get DataSet containing rows to chart
  DataSet dsResult = GetCompareDS();

  // get reference to table in DataSet
  DataTable tblResult = dsResult.Tables["Compare"];

  // exit from routine if there was an error
  if (tblResult == null) return;

  // exit if there were no rows found
  if (tblResult.Rows.Count == 0) {
    DrawErrorMessage("No matching vehicles found");
    return;
  }

  // fill the array of colors for each item
  FillColorArray();

  // decide which type of chart to draw and
  // pass in suitable parameter values
  switch(sCompareIndex) {

    case "0":    // compare Performance
      DrawLineChart(0, 30, 5, "seconds", "miles per hour", tblResult);
      break;

    case "1":    // compare Maximum Speed
      DrawBarChart(10, "miles per hour", tblResult);
      break;

    case "2":    // compare Fuel Consumption
      DrawLineChart(0, 55, 5, "miles per gallon", "miles per hour", tblResult);
      break;

  }

   // draw text caption onto chart
   DrawText(35, 0, 365, 12, sCaption, null, 0, "", null, 0);
}

// -------------------------------------------------------------------

void DrawLineChart(int iYMinVal, int iYMaxVal, int iYInterval,
                   String sYAxisText, String sXAxisText, DataTable oXData) {

  // variables required within routine
  int iTextPos, iKeyXTop, iKeyXLeft;
  int iLineXStart, iLineYStart, iLineXEnd, iLineYEnd;
  String sValue;
  Single fValue;
  DataColumn oCol;

  // create arrow-head end point for pen and draw axes lines
  oPen.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
  oGraphics.DrawLine(oPen, 35, 250, 399, 250);   // X Axis
  oGraphics.DrawLine(oPen, 35, 250, 35, 10);     // Y Axis
  oPen.EndCap = System.Drawing.Drawing2D.LineCap.NoAnchor;

  // now add text and caption to Y (vertical) axis
  // calculate spacing in pixels and value of each increment
  int iYValCount = ((iYMaxVal - iYMinVal) / iYInterval) + 1;
  int iYSpacePX = (int)(230 / (iYValCount - 1));
  Single fYSpaceValue = (iYMaxVal - iYMinVal) / (iYValCount - 1);

  // for each value on Y axis
  for (int iLoop = 0; iLoop < iYValCount; iLoop++) {

    // calculate value to display
    sValue = (iYMinVal + (iLoop * fYSpaceValue)).ToString();

    // calculate vertical position and write text
    iTextPos = 244 - (iLoop * iYSpacePX);
    DrawText(11, iTextPos, 25, 12, sValue, null, 0, "", StringAlignment.Far, 0);

    // draw light gray horizontal line if not on X axis
    if (iLoop > 0) {
      oPen.Color = Color.FromArgb(204, 204, 204);  // light gray
      oGraphics.DrawLine(oPen, 36, iTextPos + 6, 395, iTextPos + 6);
    }
  }

  // write Y axis caption vertically aligned left (top)
  DrawText(0, 20, 12, 230, sYAxisText, null, 0, "", StringAlignment.Near,
           StringFormatFlags.DirectionVertical);

  // now ready to start X (horizontal) axis text and captions
  // calculate spacing in pixels of values on X axis
  // use DataColumns collection, but not first column (car name)
  int iXValCount = oXData.Columns.Count - 1;
  int iXSpacePX = (int)(355 / (iXValCount - 1));

  // for each value on X axis
  for (int iLoop = 0; iLoop < iXValCount; iLoop++) {

    // get column name to display
    sValue = oXData.Columns[iLoop + 1].ColumnName;

    // calculate horizontal position and write text
    iTextPos = 15 + (iLoop * iXSpacePX);
    DrawText(iTextPos, 252, 50, 12, sValue, null, 0, "", StringAlignment.Center, 0);

  }

  // write X axis caption aligned right
  DrawText(40, 264, 355, 15, sXAxisText, null, 0, "", StringAlignment.Far, 0);

  // now ready to draw lines of values for each row in data table
  // set line width in pen to 2 and set start color
  oPen.Width = 2;

  // calculate multiplier for Y values per pixel
  Single fYMultiplier = iYSpacePX / fYSpaceValue;

  // set the index of the current data row
  // used to set colors and "key" positions
  int iRowIndex = 0;

  // iterate through data rows
  foreach (DataRow oRow in oXData.Rows) {

    // set pen color from array of colors
    oPen.Color = aColors[iRowIndex + 1];

    // set starting values for line points for each row
    iLineXStart = 40;
    iLineYEnd = 0;
    if (sCompareIndex == "0") {
      iLineYStart = 250 - (int)(((Single)oRow[1] - iYMinVal) * fYMultiplier);
    }
    else {
      iLineYStart = 250 - (int)(((short)oRow[1] - iYMinVal) * fYMultiplier);
    }

    // iterate through the columns in the row, omitting the
    // first one which contains the vehicle name
    for (int iLoop = 1; iLoop < iXValCount; iLoop++) {

      // set the end X position of the line
      iLineXEnd = 40 + (iLoop * iXSpacePX);

      try {   // in case database value is <NULL>

        // get value from column in this row
        if (sCompareIndex == "0") {
          fValue = (Single)oRow[iLoop + 1];
        }
        else {
          fValue = (short)oRow[iLoop + 1];
        }

        // calculate end Y position of line from value
        iLineYEnd = (int)(250 - ((fValue - iYMinVal) * fYMultiplier));

        // draw the line on the chart
        oGraphics.DrawLine(oPen, iLineXStart, iLineYStart,
                           iLineXEnd, iLineYEnd);

      }
      catch {
      }

      // save current position for start of next line segment
      iLineXStart = iLineXEnd;
      iLineYStart = iLineYEnd;
    }

    // now add the "key" box and vehicle name
    // calculate left and top positions for current row
    iKeyXTop = 284 + ((iRowIndex / 3) * 17);
    int iMod3 = iRowIndex;
    while (iMod3 >= 3) iMod3 -= 3;
    iKeyXLeft = (int)(9 + (iMod3 * 136));

    // set brush color and draw shadow for box
    oBrush.Color = Color.FromArgb(102, 102, 102);
    oGraphics.FillRectangle(oBrush, iKeyXLeft + 1, iKeyXTop + 1, 15, 13);

    // set brush color and draw box and text
    oBrush.Color = aColors[iRowIndex + 1];
    oGraphics.FillRectangle(oBrush, iKeyXLeft, iKeyXTop, 15, 13);
    DrawText(iKeyXLeft + 18, iKeyXTop, 115, 14, oRow[0].ToString(),
             null, 0, "", StringAlignment.Near, 0);

    // increment row index ready for next row
    iRowIndex++;
  }
}

// -------------------------------------------------------------------

void DrawBarChart(int iYInterval, String sXAxisText, DataTable oXData) {

  DataColumn oCol;
  int iTextPos, iKeyXTop, iKeyXLeft;
  int iRectXStart, iRectYStart, iRectWidth, iRectHeight;
  String sText;

  // create arrow-head end point for pen and draw axes lines