Thursday, February 9, 2012

Pie Chart in asp.net

1.Download the Chart control framework with SP1
http://archive.msdn.microsoft.com/mschart
and run exec for available of chart control in Visual studio
2. In aspx page add chart control

<asp:Chart ID="Chart1" runat="server" Height="336px" Width="580px">
                 <Titles>
      <asp:Title Name="Title1" Text="Whole Pie"
         Alignment="TopCenter" Font="Verdana, 12pt, style=Bold" ForeColor="Purple">
      </asp:Title>
   </Titles>
                <Series>
                <asp:Series Name="Series1" ChartType="Pie"
                       
                        CustomProperties="PieLabelStyle=Disabled, PieDrawingStyle=SoftEdge, CollectedThresholdUsePercent=False, PieLineColor=Purple"
                        Legend="Legend1">
                </asp:Series>
             
                </Series>
                <Legends >
                    <asp:Legend Name="Legend1">
                    </asp:Legend>
                 
                    </Legends>
                <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
                </ChartAreas>
                </asp:Chart>



3. In Code behind page include the namespace


using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Web.UI.DataVisualization.Charting;

4. Now bind data in chart control,
I have use class and here i develope method as PieChart()


  public DataSet PieChart()
        {
            SqlConnection _con = new SqlConnection(ConString);
            SqlCommand _cmd = new SqlCommand("GeneratePieChart", _con);
            _cmd.CommandType = CommandType.StoredProcedure;
            _cmd.Parameters.Add("@ClientId", SqlDbType.VarChar, 50).Value = ClientId;
            _cmd.Parameters.Add("@FromDate", SqlDbType.VarChar, 50).Value = fromdate;
            _cmd.Parameters.Add("@Todate", SqlDbType.VarChar, 50).Value = ToDate;
            DataSet dsClients = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter();
            da.SelectCommand = _cmd;
            da.Fill(dsClients);
            return dsClients;

        }


5. Now create the object of class and use method which return dataset to bind with Pie Chart

 Client ObjCls = new Client();

     Dataset  DsClient = new DataSet();
        DsClient = ObjCls.PieChart;

        DataView dv = DsClient.Tables[0].DefaultView;

        Chart1.Series["Series1"].Points.DataBindXY(dv, "status_code", dv, "Cnt");
        this.Chart1.Series[0]["PieLabelStyle"] = "Outside";

      //Set border width so that labels are shown on the outside

        this.Chart1.Series[0].BorderWidth = 1;

        this.Chart1.Series[0].BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

        // Add a legend to the chart and dock it to the bottom-center

        //  this.Chart2.Legends.Add("Legend1");

        this.Chart1.Legends[0].Enabled = true;

        this.Chart1.Legends[0].Docking = Docking.Bottom;

        this.Chart1.Legends[0].Alignment = System.Drawing.StringAlignment.Center;

        // Set the legend to display pie chart values as percentages
        // Again, the P2 indicates a precision of 2 decimals

        this.Chart1.Series[0].LegendText = "#PERCENT{P2}";
        // By sorting the data points, they show up in proper ascending order in the legend

        this.Chart1.DataManipulator.Sort(PointSortOrder.Descending, Chart1.Series[0]);

6. Now run the page and you will get output




No comments:

Post a Comment