Click here to Skip to main content
Click here to Skip to main content

3D Pie Chart Web Control

By , 8 Apr 2010
Rate this:
Please Sign up or sign in to vote.

Introduction

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.

Screen.gif

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.

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

PieChart.cs

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

PieSlice.cs

  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;
        }
    }

Pie3DWebControl.cs

  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,>(
            value.Split(",".ToCharArray(),
            StringSplitOptions.RemoveEmptyEntries),
            new Converter<string,>(Convert.ToDecimal));}
    } 
  3. Easy to use ASP.NET control:
    <cnt:PieChart3D 
        runat="server" 
        id="ChartControl1" 
        Links="http://www.mozi...,http://www.microsoft..,http://www.google...,
                http://www.apple...,http://www.opera..."
        Colors="orange,blue,yellow,purple,red"
        Values="46.5,35.3,11.6,3.8,2.1"
        Texts="Firefox,Internet Explorer,Google Chrome,Safari,Opera" 
        SliceDisplacments="0.05,0.05,0.4,0.05,0.05"
    />

IeImgHandler.cs

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;
}
else
    m_ChartImg.Src = "data:image/png;base64," + 
                    Convert.ToBase64String(oMem.ToArray(),
                    Base64FormattingOptions.None);

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.Clear();
    context.Response.Cache.SetExpires(DateTime.Now.AddDays(1));
    context.Response.Cache.SetValidUntilExpires(true);
    context.Response.Cache.SetCacheability(System.Web.HttpCacheability.Public);
    context.Response.Cache.AppendCacheExtension("post-check=900, pre-check=3600");
    context.Response.ContentType = "image/png";
    context.Response.BinaryWrite((byte[])System.Web.HttpContext.Current.Session[
                                    context.Request["imgId"]]);
} 

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>:
    <httpHandlers>
        <add verb="*" path="_getchart.aspx" 
          type="WebControl.IeImgHandler,PieChart3DWebcontrol" />
    </httpHandlers>

    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" 
        Assembly="PieChart3DWebcontrol" 
        TagPrefix="cnt" %>
  5. Finally insert the control:
    <cnt:PieChart3D 
        runat="server" 
        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="http://www.aaa.com,http://www.bbb.com..." <!-- (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/
                 DarkerThanSurface/DarkerDarkerThanSurface/LighterThanSurface/
                 LighterLighterThanSurface/Contrast/EnhancedContrast/FullContrast 
                           - 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 -->
    />

History

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

License

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.

Comments and Discussions

 
QuestionMy vote 5 PinmemberYahya Mohammed Ammouri2-Jul-13 3:29 
GeneralMy vote of 5 PinmemberAlexyBsb2-Apr-13 8:00 
he is great!!!
GeneralMy vote of 5 Pinmemberyasminmulla27-Sep-11 22:22 
Generalhelp PinmemberMember 251320024-Nov-10 22:17 
GeneralPossible to use Angle property in web dll Pinmembersundaramoorthyp3-Nov-10 16:50 
GeneralVery handy PinmemberBecky Sturt27-Sep-10 6:34 
GeneralRe: Very handy PinmemberThulasee Shan27-Sep-10 10:13 
GeneralRe: Very handy PinmemberBecky Sturt27-Sep-10 22:01 
GeneralRe: Very handy Pinmembersundaramoorthyp3-Nov-10 17:30 
GeneralRe: Very handy PinmemberMember 84328769-Dec-11 3:08 
Generalnice articles Pinmemberrlejason24-Aug-10 19:07 
Generalbetter UI Pinmemberwinchnet20058-Jun-10 15:53 
GeneralGood Work PinmemberGaurav Dudeja India8-Apr-10 20:21 

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

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

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