2014/05/23

How to create chart & graph in Asp.Net


-----------.aspx page-------------------------------------------

<div style="width: 900px;">
            <asp:Chart ID="chartDaywiseUtilization" runat="server" Width="900px" Height="250px" BorderlineWidth="2" Palette="None" PaletteCustomColors="192, 64, 0"
                BorderDashStyle="Solid"
                BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2px" BackColor="211, 223, 240"
                BorderColor="#1A3B69">
                <Titles>
                    <asp:Title ShadowOffset="0" Name="Items" Text="Day wise average utilization" Font="Microsoft Sans Serif, 10pt" />
                </Titles>
                <Legends>
                    <asp:Legend Alignment="Near" Docking="Right" IsTextAutoFit="False" Name="Default" LegendStyle="Column" />
                </Legends>
                <Series>
                    <asp:Series Name="Utilization" BorderColor="180, 26, 59, 105"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1">
                        <AxisY LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisY>
                        <AxisX LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>

        </div>
----------------------------------------------------------------------------------------------------------------------------
.Cs Page
----------------------------------------------------------------------------
protected void BindCharts()
    {
      
        DataSet ds = new DataSet();
        string EmpID = "61331245";
        string Sdate = GetFirstDateOfWeek(DateTime.Now).ToString("MM/dd/yyyy");
        string Edate = GetLastDateOfWeek(DateTime.Now).ToString("MM/dd/yyyy");
        ds = GetReport(EmpID,0, Sdate,Edate);
        if (ds != null && ds.Tables.Count > 0)
        {
            if (ds.Tables[0].Rows.Count > 0)
            {
                string[] x = new string[ds.Tables[0].Rows.Count];
                double[] y = new double[ds.Tables[0].Rows.Count];

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    x[i] = ds.Tables[0].Rows[i][1].ToString();
                    y[i] = Convert.ToDouble(ds.Tables[0].Rows[i][0]);
                }
                chartDaywiseUtilization.Series[0].Points.DataBindXY(x, y);
                chartDaywiseUtilization.Series[0].ChartType = SeriesChartType.Line;
                chartDaywiseUtilization.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;

                //chartDaywiseUtilization.Series[1].Points.DataBindXY(x, y);
                //chartDaywiseUtilization.Series[1].ChartType = SeriesChartType.Column;
                chartDaywiseUtilization.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;

                chartDaywiseUtilization.Legends[0].Enabled = true;

            }
        }
    }


-----------------------------------------For multiple Series------------------------------------------------------
 <div style="width: 900px; margin-bottom: 15px;">
            <asp:Chart ID="chartDeployable" runat="server" Width="900px" BorderlineWidth="0" Palette="None" PaletteCustomColors="DodgerBlue; IndianRed; LightGreen"
                BorderDashStyle="Solid"
                BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2px" BackColor="211, 223, 240"
                BorderColor="#1A3B69">
                <Titles>
                    <asp:Title ShadowOffset="0" Name="Items" Text="Availability of deployable resources" Font="Microsoft Sans Serif, 10pt" />
                </Titles>
                <Legends>
                    <asp:Legend Alignment="Near" Docking="Right" IsTextAutoFit="False" Name="Default" LegendStyle="Column" />
                </Legends>
                <Series>
                    <asp:Series Name="30% Deployable" IsVisibleInLegend="true" BorderColor="180, 26, 59, 105"></asp:Series>
                    <asp:Series Name="50% Deployable" IsVisibleInLegend="true" BorderColor="180, 26, 59, 105"></asp:Series>
                    <asp:Series Name="75% Deployable" IsVisibleInLegend="true" BorderColor="180, 26, 59, 105"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea2">
                        <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
                            WallWidth="0" IsClustered="False"></Area3DStyle>
                        <AxisY LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisY>
                        <AxisX LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>

        </div>
-------------------------------------------------------------------------------------------------------------
protected void BindDeployableCharts()
    {

        DataSet ds = new DataSet();
        string EmpID = "61331245";
        string Sdate = GetFirstDateOfWeek(DateTime.Now).ToString("MM/dd/yyyy");
        string Edate = GetLastDateOfWeek(DateTime.Now).ToString("MM/dd/yyyy");
        ds = GetReport(EmpID,1, Sdate, Edate);
        if (ds != null && ds.Tables.Count > 0)
        {
            if (ds.Tables[0].Rows.Count > 0)
            {
                string[] x = new string[ds.Tables[0].Rows.Count];
                double[] y = new double[ds.Tables[0].Rows.Count];

                string[] x1 = new string[ds.Tables[0].Rows.Count];
                double[] y1 = new double[ds.Tables[0].Rows.Count];

                string[] x2 = new string[ds.Tables[0].Rows.Count];
                double[] y2= new double[ds.Tables[0].Rows.Count];

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    x[i] = ds.Tables[0].Rows[i][0].ToString();
                    y[i] = Convert.ToDouble(ds.Tables[0].Rows[i][1]);
                }
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    x1[i] = ds.Tables[0].Rows[i][0].ToString();
                    y1[i] = Convert.ToDouble(ds.Tables[0].Rows[i][2]);
                }
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    x2[i] = ds.Tables[0].Rows[i][0].ToString();
                    y2[i] = Convert.ToDouble(ds.Tables[0].Rows[i][3]);
                }

                chartDeployable.Series[0].Points.DataBindXY(x, y);
                chartDeployable.Series[0].ChartType = SeriesChartType.Column;
                chartDeployable.Series[0].IsValueShownAsLabel = true;
                chartDeployable.ChartAreas["ChartArea2"].AxisX.MajorGrid.Enabled = false;

                chartDeployable.Series[1].Points.DataBindXY(x1, y1);
                chartDeployable.Series[1].ChartType = SeriesChartType.Column;
                chartDeployable.Series[1].IsValueShownAsLabel = true;
                chartDeployable.ChartAreas["ChartArea2"].Area3DStyle.Enable3D = false;

                chartDeployable.Series[2].Points.DataBindXY(x2, y2);
                chartDeployable.Series[2].ChartType = SeriesChartType.Column;
                chartDeployable.Series[2].IsValueShownAsLabel = true;
                chartDeployable.ChartAreas["ChartArea2"].Area3DStyle.Enable3D = false;

                chartDeployable.Legends[0].Enabled = true;

            }
        }
    }