3D Chart In ASP.Net Programming

Introduction

As we know charts are a very popular and important tool in ASP.Net technology. A chart is nothing but a pictorial or graphical representation of data. There are two coordinates present in a chart, one is the X axis and the other is the Y axis. In the chart we represent the data using the bar lines, bar charts or the slice of the pie charts. Using the chart control we can represent the data and also we can compare the data from the various charts like compare the previous year's revenue and the current year's revenue. There are many types of charts like bar charts, line charts, slice charts, column charts, combo charts and so on.

This article shows how to make charts in ASP.NET and how to represent the data. So first I will show how to make a simple chart in ASP.NET with C#.

Procedure for Simple Chart

Step 1

Open Visual Studio, go to the File menu, go to the new website and add an "ASP.NET Empty Web Site".



Step 2

Now go to the Solution Explorer, right-click on the website and go to the add new item and then add a new form.



Step 3

Now go the toolbar, right-click on the standard, click on choose item in the .Net Framework Component. We will see two chart options; click on them and save.



Step 4

Now in the toolbar go to the data. Here you will see a chart option. You can drag and drop the chart from the toolbar to your page.



Step 5

When you drag and drop a chart control onto your page then there is an entry automatically generated in your web.config file.

<appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
  </appSettings>

Step 6

There is also one more tag generated in the web.config file named httpHandlers in the code like this.

<httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        validate="false" />
    </httpHandlers>

Step 7

Another tag is also added, that tag is known as the control-definition tag.

<controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>

Step 8

In the web.config finally one one more tags are known as the Data Visualization assembly.

<assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>

These four basic tags will be present in your web.config file. Then in your Default.aspx page you will see a normal chart.

Step 9

Right-click on your chart and go to the property. In the property window go to the data source and select a data source and add that data source.



Step 10

After adding the data source successfully, go to the chart properties again and click on the series, explore the series and you will see a window like this.



Step 11

Now in the series, go to the data source and make the Xvalue member as you need to. Here I created a Xvalue member name and Yvalue member age depending on my needs. You can choose as you desire. If we want to provide a name for the X and Y axis in the chart then go again to the property window and click on the chart area; here you will see an Axes property.



In the axes property now click on the axes collection and open the title in the X Axes. I select the title Name and in the Y axes I select the title Age.



Step 12

Now when you run your application you will see the output like this.



As I said there are many types of charts available in ASP.NET, like Bar Chart, Line Chart, Column Chart, Pie Chart and so on. So here I will show you those types.

Types of Charts

If you want to see all the types of charts available in ASP.Net then it is not very tough, it is easy. Just go to your chart and right-click on it. Here you will see a list of all the charts available in ASP.Net.



3D Chart 

Now we will discuss how to make 3D charts in ASP.NET.

First go to Visual Studio, go to the file, website and add a new website, then drag and drop a normal chart onto your aspx page. When you do that there are some tags added to your web.config file as I explained above. Then only in our aspx page we have a chart area tag. In the chart area tag we enable 3D (3D=true). We can also do this using the wizard simply. Right-click on the chart and go to its property, go into the charts area property, then go to 3D chart settings and make the Enable 3D true, by default it is false.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExamChart.aspx.cs" Inherits="ExamChart" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:Chart ID="ScoreChart" Width="600" Height="320" runat="server"
            BackColor="Silver" BackGradientStyle="LeftRight" BorderlineWidth="2"
            TabIndex="2">
      <Titles>
      <asp:Title Text="Runs" />
      </Titles>
        <Series>
          <asp:Series Name="RunSeries" ChartType="Column">

          </asp:Series>
        </Series>
        <ChartAreas>
          <asp:ChartArea Name="ChartArea1">
          <Area3DStyle Enable3D="true"  WallWidth="10" />
              <AxisY Title="Runs">
              </AxisY>
              <AxisX Title="Players Name">
              </AxisX>
<Area3DStyle Enable3D="True" WallWidth="10"></Area3DStyle>
          </asp:ChartArea>
        </ChartAreas>
      </asp:Chart>

    </div>
    </form>
</body>
</html>

We make properties for this form so add a class file and write this code in the class file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class run
{
    public string Name { get; set; }
    public int Point { get; set; }
    public string PictureUrl { get; set; }
}

After this we simply make a Bind method and call it on the page load event. The code for the Bind Method is the following:

sing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;

public partial class ExamChart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {

            BindData();

        }

    }

    private void BindData()
    {

        var runs = new List<run>()
            {
                new run() { Name = "Sachin", Point = 200, PictureUrl="Images/sachin.jpg" },
                new run() { Name = "Dhoni", Point = 32, PictureUrl="Images/dhoni.jpg" },
                new run() { Name = "Yuvraj", Point = 78, PictureUrl="Images/yuvraj.jpg" },
                 new run() { Name = "Kohli", Point = 50, PictureUrl="Images/kohli.jpg" },
                new run() { Name = "Raina", Point = 32, PictureUrl="Images/raina.jpg" },
                new run() { Name = "Dhawan", Point = 155, PictureUrl="Images/dhawan.jpg" },
                new run() { Name = "Rahane", Point = 22, PictureUrl="Images/rahane.jpg" }
            };

        var series = ScoreChart.Series["RunSeries"];

        foreach (var exam in runs)
        {

            var point = new DataPoint();
            point.SetValueXY(exam.Name, exam.Point);

            point.MarkerImage = exam.PictureUrl;

            point.Label = exam.Point.ToString();
            series.Points.Add(point);
        }

        ScoreChart.DataSource = runs;
        ScoreChart.DataBind();
    }
}

Now when you run your application you will see a 3D chart like this.



Properties of 3D Chart 

As you know, enable the 3D and then we can create a 3D chart, it is a Boolean type so it may be true or may be false but by default it always false. The angle is available for the 3D chart. In ASP.NET it is between -90 degrees to 90 degrees, if you choose -90 then it takes you fully below and if you choose 90 then it takes you fully above. There is a property known as the "Is clustered" property that is also a Boolean value that provides the benefits of using the many charts that are the same type and the same nature for making the the chart view more effective. LightStyle is an option for Realistic, Simplistic, or None based on which lighting you wish to have on your chart. If you want to show the percentage as a 3D chart then there will be the three axis X,Y and Z in the x axis we have marks for the axis totals Marks and the Z axis represents the percentage so we can also represent the percentage from the chart.

Summary

Charts play a very good role to represent a report or data. As we know charts are a pictorial representation of data and everyone is familiar with them. A picture is more powerful than a thousand of words. Charts make comprehenssion very easy compared to any other method. 3D charts look very effective and beautiful and they have more clarity and effectiveness compared with simple charts. I hope using this article you can learn both types of charts, simple charts and 3D effect charts.