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;
}
}
Comments
Post a Comment