Suppose you are working in a company and your senior gives you a task to create a page in which you have enter a date into textbox and then based on that date you have to create a chart(graph). From where you start your task?
Step 1. Add a page into your project and you can name that chart.aspx as or anything else for now i give it name chart.aspx
Step 2. Add a Textbox,button on your page (You can use ajaxcalender for enter date into your textbox)
Step 3. Take a chart control on your page
you can find the chart control into the data group of the toolbox
Chart.aspx (Desgin)
After create a page chart.aspx i get this source file into my page
<div>
Enter the date :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Get Stats"
onclick="Button1_Click1" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<br />
.<br />
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Pie" Name="Series1" CustomProperties="DrawingStyle=Pie,
PieDrawingStyle=Concave, MaxPixelPointWidth=50" ShadowOffset="2"
IsValueShownAsLabel="True">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
</div>
YOU HAVE TO NOTE ONE THING HERE I AM USING THE PIE CHART HERE YOU CAN USE ANY ANOTHER CHART FROM CHART TASKS
Now see this source care fully there are some tags into a chart control
These are :
<asp:Series>
Series :
It is a collection that contain data-points.
Now the question is this what is data-points?
So answer is here
data points is that each value which plotted on the chart
Now lets go back to the past and remember something. Whenever your maths teacher asked you to solve a problem and after that you have to draw graph based on that result. The result contained values in which one is for x-axis and another is for y-axis. In simple words that value on the base of which you have to draw your graphs is called data points
So guys fixed this thing in mind
<asp:series> Basically contained data points.. Data points means which is your final result after calculation..
Now comes to chart area tag
<asp:chartarea>
chart area
It is also a collection but it have collection of configuration which control the process of a chart
Note:- there must be chart area other wise your chart will not execute
Chart.aspx.cs(Code)
protected void Button1_Click1(object sender, EventArgs e)
{
SqlCommand cmd = new SqlCommand("ezy_Sale_chart", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@date", SqlDbType.DateTime).Value = Convert.ToDateTime(TextBox1.Text);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
DataView dv = dt.DefaultView;
if (dv.Count == 0)
{
Label1.Text = "No Stats to show";
Label1.Visible = true;
Chart1.Series["Series1"].Points.DataBindXY(dv, "emp_code", dv, "Total_Salary");
Chart1.DataBind();
}
else
{
Label1.Visible = false;
Chart1.Series["Series1"].Points.DataBindXY(dv, "emp_code", dv, "Total_Salary");
Chart1.DataBind();
}
}
Lets Discuss the last and main part of the topic
C# code
As you see there is nothing new in this code just using same Sqlcommand,Sqldataadapter, datatable,dataview etc but see the binding of the chart1
Chart1.Series["Series1"].Points.DataBindXY(dv, "emp_code", dv, "Total_Salary");
Chart1.DataBind();
here as i discussed above there is Points means data each value which ploted on chart and DataBindXY( ); in this you have to pass the values from database i pass two columns that show data on x and y axis
Step 1. Add a page into your project and you can name that chart.aspx as or anything else for now i give it name chart.aspx
Step 2. Add a Textbox,button on your page (You can use ajaxcalender for enter date into your textbox)
Step 3. Take a chart control on your page
you can find the chart control into the data group of the toolbox
Chart.aspx (Desgin)
After create a page chart.aspx i get this source file into my page
<div>
Enter the date :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Get Stats"
onclick="Button1_Click1" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<br />
.<br />
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Pie" Name="Series1" CustomProperties="DrawingStyle=Pie,
PieDrawingStyle=Concave, MaxPixelPointWidth=50" ShadowOffset="2"
IsValueShownAsLabel="True">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
</div>
YOU HAVE TO NOTE ONE THING HERE I AM USING THE PIE CHART HERE YOU CAN USE ANY ANOTHER CHART FROM CHART TASKS
Now see this source care fully there are some tags into a chart control
These are :
<asp:Series>
Series :
It is a collection that contain data-points.
Now the question is this what is data-points?
So answer is here
data points is that each value which plotted on the chart
Now lets go back to the past and remember something. Whenever your maths teacher asked you to solve a problem and after that you have to draw graph based on that result. The result contained values in which one is for x-axis and another is for y-axis. In simple words that value on the base of which you have to draw your graphs is called data points
So guys fixed this thing in mind
<asp:series> Basically contained data points.. Data points means which is your final result after calculation..
Now comes to chart area tag
<asp:chartarea>
chart area
It is also a collection but it have collection of configuration which control the process of a chart
Note:- there must be chart area other wise your chart will not execute
Chart.aspx.cs(Code)
protected void Button1_Click1(object sender, EventArgs e)
{
SqlCommand cmd = new SqlCommand("ezy_Sale_chart", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@date", SqlDbType.DateTime).Value = Convert.ToDateTime(TextBox1.Text);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
DataView dv = dt.DefaultView;
if (dv.Count == 0)
{
Label1.Text = "No Stats to show";
Label1.Visible = true;
Chart1.Series["Series1"].Points.DataBindXY(dv, "emp_code", dv, "Total_Salary");
Chart1.DataBind();
}
else
{
Label1.Visible = false;
Chart1.Series["Series1"].Points.DataBindXY(dv, "emp_code", dv, "Total_Salary");
Chart1.DataBind();
}
}
Lets Discuss the last and main part of the topic
C# code
As you see there is nothing new in this code just using same Sqlcommand,Sqldataadapter, datatable,dataview etc but see the binding of the chart1
Chart1.Series["Series1"].Points.DataBindXY(dv, "emp_code", dv, "Total_Salary");
Chart1.DataBind();
here as i discussed above there is Points means data each value which ploted on chart and DataBindXY( ); in this you have to pass the values from database i pass two columns that show data on x and y axis
Comments
Post a Comment