Create Pie Chart in ASP.Net

Creating a Pie Chart image in ASP.Net is a pretty easy task using GDI+.  Briefly, you define an image canvas, and layer shapes and text.

In this example, we'll chart the survey results of the best IT companies to work for.  Because we're building the image in memory and streaming the content to the client, we'll contain this code in a user control. Note: Assume the datareader (dr) has already been populated.

Step 1: Define the ContentType as jpeg

Response.ContentType = "image/jpeg";

Step 2: Define image size

int width = 180;
int chartheight = 180;
int height = 380;

Step 3: Create Bitmap and Graphics objects to build graph and legend

using (Bitmap objBitmap = new Bitmap(width, height))
{
    using (Graphics objGraphics = Graphics.FromImage(objBitmap))
    {
        //Create the canvas for the graph and legend
        objGraphics.FillRectangle(
              new SolidBrush(ColorTranslator.FromHtml("#675C52")),
              0, 0, width, height);

        //define pieChart start position (running degree position) to start at top
        float currentDegree = -90.0F;

        //Create an array of 10 colors  //(10 is the max # of pie pieces in our chart)
        Color[] color = { Color.Green, Color.Blue, Color.Red, Color.Navy,
                          Color.Yellow, Color.Brown, Color.Orange, Color.Purple,
                          Color.GreenYellow, Color.Black };

        //Create rectangle space reserved for pie chart
        Rectangle pieRect = new Rectangle(0, 0, width, chartheight);

        Font fontLegend = new Font("Verdana", 9);

        float otherPct = 0.0F;
        int i = 0;
        float legendPosition = chartheight + 10.0F;
        while (dr.Read())
        {
            //calculate percent of current company's votes
            float companyPct = Convert.ToSingle(dr["companyVotes"])
                 / Convert.ToSingle(dr["totalVotes"]);

            //only add to pie chart if percent is greater than 5%  //or less than 80% of chart is populated
            if (companyPct > 0.05F || (currentDegree < (.80 * 360) && i < 9))
            {
                //calculate degree space of pie chart by multiplying by 360
                companyPct = companyPct * 360;
                //draw new pie piece
                objGraphics.FillPie(new SolidBrush(color[i]), pieRect,
                      currentDegree, companyPct);
                //add color block to legend
                objGraphics.FillRectangle(new SolidBrush(color[i]), 5,
                      legendPosition, 10, 10);
                //add company name next to legend color block
                objGraphics.DrawString(dr["Company"].ToString(), fontLegend,
                     new SolidBrush(Color.White), 20.0F, legendPosition);
                //update running degree position of pie chart
                currentDegree += companyPct;
                //move legend running position down 12 pixels
                legendPosition += 12;
                i += 1;
            }
            else
            {
                //update "Other" pie chart percentage
                otherPct += companyPct;
            }
        }
        if (otherPct > 0)
        {
           //draw "Other" pie chart piece and legend block
            otherPct = otherPct * 360;
            objGraphics.FillPie(new SolidBrush(color[i]),
                  pieRect, currentDegree, otherPct);
            objGraphics.FillRectangle(new SolidBrush(color[i]),
                  5, legendPosition, 10, 10);
            objGraphics.DrawString("Other", fontLegend,
                  new SolidBrush(Color.White), 20.0F, legendPosition);
        }
        dr.Close();

        // Save the image to the OutputStream
        objBitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
    }
}