Alternative pie diagram of ASP. NET drawing series (pie chart)

Source: Internet
Author: User

The Pie graph to be implemented today is not actually the "painting" in the true sense, but with us. using Graphics and Bitmap in NET to implement a graph is completely different. It is implemented using Js according to certain rules, but its implementation effect is much better than the previous one, gfreesky personally thinks that this is the true "Pie Chart". The previous one cannot see the "Pie Chart". At best, it is just a circle chart, and this effect is indeed great, the most important thing is that it is super simple to implement. we will share it with you, and then you can extend it. if you have any better ideas or comments, please leave me a message or Email at: gfreesky@gmail.com.

Well, let's get into today's theme. Let's show you the effect and see if I'm correct!

How is the effect good!

Now let's see how "she" came out.

First, see the page section

 <form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Height="164px"
      Width="508px">
</asp:GridView>
<br />
<br />
<iframe src="Pie.htm" width="100%" height="400px" scrolling="no"
       id="pie" ></iframe>
</div>
</form>

There is a GridView and iframe in it. The GridView here is not required. If you just want to see the effect of this graph, you can skip this GridView.

What is this pie.htm? Leave it alone. Let's look at the background code.

 

 Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
{
BindGrid ();
}

}
Private void BindGrid ()
{
DataSet ds = GetDS ();
This. GridView1.DataSource = ds;
This. GridView1.DataBind ();
If (ds. Tables [0]. Rows. Count! = 0)
{
Pie (ds );
}
}
Private DataSet GetDS ()
{
// Here, you can solve it by yourself. You only need to note that your SQL statement, the first field is key, and the second field is value.
}

// Write the values in ds to array_name and array_Money
Private void pie (DataSet ds)
{
StringBuilder sb = new StringBuilder ();
Sb. Append ("<script> ");
Sb. Append ("var array_name = new Array ();");
Sb. Append ("var array_Money = new Array ();");
DataRowCollection drc = ds. Tables [0]. Rows;
DataRow dr;
String saleName = "";
String saleNum = "";
For (int I = 0; I <drc. Count; I ++)
{
Dr = drc [I];
Salename = Dr [0]. tostring ();
Salenum = Dr [1]. tostring ();
SB. append ("array_name [" + I + "] = \" "+ salename + "\";");
SB. append ("array_money [" + I + "] = {\" "+ salename + "\":"
      + saleNum + "};");
}
sb.Append("</script>");
Response.Write(sb);
}
 

 

This code is not complex. I believe you can understand it at a Glance. If you really don't understand it, you can leave a message and I will give you an answer.

Discussion:

I would like to remind you that the above is just my practice. You do not need to transmit a DS, such as a dictionary or other data set, as long as you can

Array_name and array_money can be written. In addition, it can be expanded into one page to display multiple such graphs. For example, you can display

A Total Graph and a mean graph are displayed on the same page. If two textbox and buttons are added to the page, they can be displayed by time.

In fact, gfreesky has achieved this effect. The reason why we didn't elaborate on it is that we hope you can extend it in your own way. After all, everyone's

There may be different ideas and practices. The last thing I want to mention is that it involves two pages, and the code in it is very long and inconvenient to post out. If you are interested, please leave a message. I can

Send it to you separately.

You are welcome to join us in the study and discussion!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.