Click here to Skip to main content
13,345,254 members (46,838 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


36 bookmarked
Posted 8 Apr 2010

3D Pie Chart Web Control

, 8 Apr 2010
Rate this:
Please Sign up or sign in to vote.
3D Pie Chart ASP.NET Server Control using Julijan Sribar's modal


Although Microsoft Chart Controls are much superior and popular, they only work with Microsoft .NET Framework 3.5 or greater. But thanks to Julijan Sribar for his wonderful 3D pie chart control for Windows Form. I have converted his Windows Form control ASP.NET server controls without many changes to his core architecture. As a result, we now have a useful 3D pie chart for ASP.NET 2.0 developers. I believe there are more Framework 2.0 developers than any other .NET Frameworks and I thought it's worth writing a nice 3D pie chart control for these majority .NET developers.


The Origin

As mentioned above, this project is a slight modification of Julijan Sribar's 3D Pie Chart control. For a deeper understanding of how this 3D Pie Chart is implemented, refer the original post '3D Pie Chart' by Julijan Sribar.

So What's Changed?

Nothing drastic! Added 2 new classes and modified the main PieChartControl.cs.


  1. Removed inheritance from Windows Form Panel
  2. Removed mouse functions, as they are not relevant in a web environment
  3. Made the DoDraw() function to draw on a Bitmap instead of the Panel Canvas
  4. Removed Tooltip property and implemented it in Pie3DWebControl.cs
  5. Added a new property to return PieSlices in order to create Image Map Anchors
  6. Added Font and ForeColor property to set text attributes


  1. Made PieSlices visible to external members, in order to create Image Map Anchors


  1. Has a new property which gives the Arc area - this enables creating precise Image Maps
    public GraphicsPath ArcPath
        get {
            GraphicsPath arcPath = new GraphicsPath();
            arcPath.AddPie(m_boundingRectangle.X, m_boundingRectangle.Y,
                m_boundingRectangle.Width, m_boundingRectangle.Height,
                (float)m_startAngle, (float)m_sweepAngle);
            return arcPath;


  1. ASP.NET Server Control Wrapper
  2. Converts comma separated strings to arrays:
    public string Values
        get {return string.Join(",", Array.ConvertAll<decimal,>(
            m_Values, new Converter<decimal,>(Convert.ToString)));}
        set {m_Values = Array.ConvertAll<string,>(
            new Converter<string,>(Convert.ToDecimal));}
  3. Easy to use ASP.NET control:
        Texts="Firefox,Internet Explorer,Google Chrome,Safari,Opera" 


In order to reduce the number of call backs to server and to avoid temporary storages, I have used the data URI scheme technique to store the images within the HTML itself. But Internet Explorer 7 and earlier versions don't support this and, Internet Explorer 8 does support but limits the image size to be not more than 32K. In order to tackle this incompatibility, I have used the old fashioned Temporary Storage mechanism if the user agent is Internet Explorer.

//NOTE: This code is in Pie3DWebControl.cs
if (Page.Request.Browser.IsBrowser("IE"))
    Context.Session[m_ChartImg.ClientID] = oMem.ToArray();
    m_ChartImg.Src = "_getchart.aspx?imgId=" + m_ChartImg.ClientID;
    m_ChartImg.Src = "data:image/png;base64," + 

As you can see above, if the client browser is Internet Explorer, the PNG image is stored in a Session with an Unique ID and Internet Explorer gets it in a separate request. In order to handle this request, an httpHandler is implemented to process the requests that come for the '_getchart.aspx' without having a physical file. Processing the request for _getchart.aspx is the functionality of this class and it implements System.Web.IHttpHandler and System.Web.SessionState.IRequiresSessionState interfaces.

  • System.Web.IHttpHandler: Defines the contract that ASP.NET implements to synchronously process HTTP Web requests using custom HTTP handlers.
  • System.Web.SessionState.IRequiresSessionState: Specifies that the target HTTP handler requires read and write access to session-state values. This is a marker interface and has no methods.
public void ProcessRequest(System.Web.HttpContext context)
    context.Response.Cache.AppendCacheExtension("post-check=900, pre-check=3600");
    context.Response.ContentType = "image/png";

How to Use this Control?

Once you download and compile the PieChart3DWebcontrol project...

  1. Create a Web Project / Or open your existing web project
  2. Add reference to PieChart3DWebcontrol.dll
  3. Open the web.config and add the following line under the <system.web>:
        <add verb="*" path="_getchart.aspx" 
          type="WebControl.IeImgHandler,PieChart3DWebcontrol" />

    This line is to process the requests that come to '_getchart.aspx' by the IeImgHandler - as explained earlier in this article.

  4. Open the aspx page where you want to insert the control and register the control on top.
    <%@ Register Namespace="System.Drawing.PieChart.WebControl" 
        TagPrefix="cnt" %>
  5. Finally insert the control:
        id="chart1" <!-- control id -->
        Width="500" <!-- (int) Width of the chart Default:400 -->
        Heght="300" <!-- (int) Height of the chart Default:200 -->
        Values="10,11.5,23.23,30.567" <!-- (float array) Comma separated values to 
                                         plot chart-->
        Texts="aaaaa,bbbbbb,cccccc,ddddd" <!-- (string array) 
    				Comma separated strings to 
                                         label each segment-->
        Links="," <!-- (string array) Comma 
                                         separated string - links for each segment-->
        Colors="blue,red,#3388FA..." <!-- (string array) Comma separated string - 
                                        colours for each segment -->
        SliceDisplacments="0.05, 0.1, 0.05..." <!-- (float array) 
    					comma separated length 
                                                  of displacement for each segment-->
        Opacity="150" <!-- (int) Transparency level of all segments, Default: 160-->
        ShadowStyle="GradualShadow" <!-- NoShadow/UniformShadow/GradualShadow - 
                                        Default:GradualShadow  -->
        EdgeColorType="DarkerThanSurface" <!-- NoEdge/SystemColor/SurfaceColor/
                           - Default:DarkerThanSurface -->
        FontFamily="Arial" <!-- (string) Font name Default:Verdana-->
        FontSize="12" <!-- (int) Font size Default: 10 -->
        FontStyle="Bold" <!-- Regular/Bold/Italic/Underline/Strikeout -->
        ForeColor="#cceedd" <!-- (string) Label color, Default: Black -->


  • V 1.00 - 08/Apr/2010 15:00 - First submission


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Thulasee Shan
Software Developer (Senior) eHips Ltd
United Kingdom United Kingdom
Having more than 10 years experience in software development and currently working for eHips Ltd in Oxford, UK. Expert in C# and VB.NET. Also Expert in technologies such as GDI+, ADO.NET, XML, XSD etc. Started the career as a VB6.0 developer and moved on to .NET with its beta release. Experience includes real-time system development, distributed systems, Work flow systems, control system development and web 2.0 systems.

You may also be interested in...


Comments and Discussions

GeneralMessage Closed Pin
24-Aug-10 20:07
memberrlejason24-Aug-10 20:07 
Generalbetter UI Pin
winchnet20058-Jun-10 16:53
memberwinchnet20058-Jun-10 16:53 
GeneralGood Work Pin
Gaurav Dudeja India8-Apr-10 21:21
memberGaurav Dudeja India8-Apr-10 21:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 8 Apr 2010
Article Copyright 2010 by Thulasee Shan
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid