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: