Creating 3D (Three Dimensional) charts in ASP.NET

By | September 5, 2013
0 Comment

Introduction
In this article I will explain how to 3D (Three Dimensional) maps in ASP.NET

Description
Chart control in ASP.NET 4.0 displays charts in 2D (Two-Dimensional) by default. ASP.NET provides some properties with the ChartArea inside the Chart control that we can use to render charts in 3D.

You can refer to my previous article on how to create charts in ASP.NET using the Chart control to get started with the Chart control

Example:

<asp:Chart ID="chartProducts" runat="server" Width="800" Height="500" CssClass="auto">
    <Series>
        <asp:Series ChartArea="ProductChartArea" Name="ProductSeries">
            <Points>
                <asp:DataPoint AxisLabel="Rhönbräu Klosterbier" YValues="360" />
                <asp:DataPoint AxisLabel="Boston Crab Meat" YValues="220" />
                <asp:DataPoint AxisLabel="Boysenberry Spread" YValues="240" />
                <asp:DataPoint AxisLabel="Pâté chinois" YValues="350" />
                <asp:DataPoint AxisLabel="Röd Kaviar" YValues="150" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ProductChartArea"
            Area3DStyle-Enable3D="true"
            Area3DStyle-Inclination="30"
            Area3DStyle-LightStyle="Realistic"
            Area3DStyle-WallWidth="10">
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

To enable 3D charts we just need to set Area3DStyle-Enable3D property of the ChartArea to true. We also have some additional Area3DStyle properties like Inclination, Rotation, LightStyle, WallWidth, Perspective etc. that we can use to change the style of 3D chart.

In code behind we can use following code to enable 3D in the chart

C#:

ChartArea productChartArea = chartProducts.ChartAreas["ProductChartArea"];
productChartArea.Area3DStyle.Enable3D = true;
productChartArea.Area3DStyle.Inclination = 30;  //-90 to 90 degrees
productChartArea.Area3DStyle.LightStyle = LightStyle.Realistic; // None/Realistic/Simplistic
productChartArea.Area3DStyle.WallWidth = 10;    //0 to 30 pixels

VB.NET:

Dim productChartArea As ChartArea = chartProducts.ChartAreas("ProductChartArea")
productChartArea.Area3DStyle.Enable3D = True
productChartArea.Area3DStyle.Inclination = 30
productChartArea.Area3DStyle.LightStyle = LightStyle.Realistic
productChartArea.Area3DStyle.WallWidth = 10

Note: You need to add reference to System.Web.DataVisualization and import System.Web.UI.DataVisualization.Charting class to access charting classes

Output:

3D Column Chart ASP.NET

 

Pyramid Chart ASP.NET

0 thoughts on “Creating 3D (Three Dimensional) charts in ASP.NET”

Leave a Reply

Your email address will not be published. Required fields are marked *