There is often a column in the Web site that provides a survey of an item in the Web site and displays statistical data. This example will describe how the company web site achieves online product opinion surveys and displays statistical data and column charts.
Effect description
Users vote to evaluate the company's products, there are "very good", "good", "General", "poor" 4 kinds of views, after the vote submitted, only in the next visit can show their own voting results. Statistical charts and statistical results are the current analysis of voting results, as shown in Figure 90-1.
Creative Ideas
Through the radio button and button events to achieve online survey, through VML to achieve the output of statistical charts.
Operation Steps
Step one basic Page design
(1) Add online survey content. Open index.aspx, add 8 rows to the LEFTTB table, add "asp: Button" to the newly added 3rd line, set the text to "vote", ID "Pollbutton", and other parameter settings as shown in the rounded box in Figure 90-2.
(2) Add "asp: Radio Button List". Add the "ASP: Radio button List" to the newly added line 2nd and set up the list items, as shown in Figure 90-3.
Tip: The 4 list items added in the "ASP: Radio button list" are ① "good" labels, value is "Verygood", ② "good" label, value is "good", ③ "General" label, value is "commandly", ④ "difference" label, value is "mistake". This setting is the same as setting the 4 field names in the POLL table.
(3) Add the DataSet "Polldata". Add the DataSet "Polldata" to get the 4 voting results for "verygood" (good), "good" (good), "commandly" (General), "mistake" (poor), with parameter settings as shown in Figure 90-4.
(4) Bind the dynamic text to the row. Bind the dynamic text in the dataset "Polldata" to the newly added row, as shown in Figure 90-5.
Step two to achieve voting and statistical charts
(1) Add the "Pollbutton_click" procedure in "<script runat=" server > to submit the poll results to the "POLL" table after the "vote" button is clicked, adding "1" to the field value associated with the vote, and the code As described below.
Sub Pollbutton_click (ByVal sender as Object, ByVal e as System.EventArgs)
Dim Cpadapter as New OleDbDataAdapter
Dim Cpcommand as New OleDbCommand
Dim DT as System.Data.DataSet
Dim tystring As String
Conn.Open ()
Cpstring2= "Update POLL SET" +pollradio.selecteditem.value+ "=" +cstr (polldata. Fieldvalue (Pollradio.SelectedItem.Value, nothing) +1)
Cpcommand=new OleDbCommand (Cpstring2,conn)
Cpcommand.executenonquery ()
End Sub
(Reader can open "CD" | "Source file" | "Instance 90" | "90.1.txt" file, copy directly)
Tip: Because the update record server behavior in Dreamweaver does not support event handling, you can only update records in the POLL table with the "DataAdapter" object. Because the option value in the radio button list has been set in the previous operation to be the same as the field name of "POLL," click the option in the radio button list to get the cast field name from "Pollradio.SelectedItem.Value".
(2) Bind the "Pollbutton_click" procedure to the "OnClick" event response process of the voting button.
(3) Locate the "
<style>
V:*{behavior:url (#default #vml);
</style>
(Reader can open "CD" | "Source file" | "Instance 90" | "90.2.txt" file, copy directly)
This is done to connect the namespace "V" to the system-predefined behavior VML. After this definition, you can draw a variety of images in a Web page via "<v:shape> </v:shape>", as shown in the rounded box in Figure 90-6.
(4) Locate and delete the code described below.
<! DOCTYPE HTML Public "-//w 3C//dtd html4.01transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
(5) Add the "Drawpoll" process to the "<script runat=" Server ">" to output a statistical chart, as described in the following code.
Sub drawpoll ()
Dim pollar (3) as integer
Dim totalpoll As integer
Dim I As Integer Dim Mathpoll as single
Pollar (0) =polldata.fieldvalue ("Vergood", Nothing)
Pollar (1) = Polldata.fieldvalue ("good", nothing)
Pollar (2) =polldata.fieldvalue ("commandly", Nothing)
Pollar (3) =polldata.fieldvalue ("mistake", nothing)
Totalpoll=pollar (0) +pollar (1) +pollar (2) +pollar (3) &NBSP
Response.Write ("<table width= ' 80% ' bgcolor= ' #FFFFFF ' ><tr alige= ' center ' style= ' font-size:9pt ') valign= ' Bottom ' > ")
for i=0 to 3
Mathpoll=math.round (Pollar (I)/totalpoll,2) *100
Response.Write ("<td width= ' 25% ' ><v:rect fillcolor= ' #FAB092 ' style= ' width:20;color:navy;height": "+Cstr ( mathpoll*2) + "' ><br> " +cstr (Mathpoll) + "%<v:extrusion backdepth= ' 5pt ' on= ' true '/></v:rect></td> ')
Next
Response. Write ("</tr><tr style= ' font-size:9pT ' ><td > Good </td><td alige= ' center ' > Good </td><td> general </td><td> difference </td> </Table> ")
End Sub
(Reader can open "CD" | "Source file" | "Instance 90" | "90.3.txt" file, copy directly)
Program Description:
The field values of the dataset "Polldata" in the code are stored in the 4 data sets of "Pollar", and the total number of votes is counted by the "totalpoll" variable. First, the "Response.Write" is used to output the table and the first line in the page. A VML column chart is drawn in the first column by looping through the first row to define 4 columns. The FillColor (fill color) of the VML column chart is "#FAB092", the width is "20", and the height is the percentage of the total number of votes per vote "Math.Round (Pollar (I)/totalpoll,2) * 100" multiplied by "2" to do so Increased the percentage of votes to the total number of votes, and finally, by "Response.Write", added 1 rows of 4 columns to the table in the page and defined text for each line.
(6) Add code <% drawpoll ()%> to the row in which you want to display the statistics chart, as shown in the rounded box in Figure 90-7.
(7) Browse the effect in IE after saving the file.
This example introduces the implementation of the statistical analysis chart through VML, which is one of the methods that is becoming popular at present. In practical applications, statistics are often used to show the width or height of statistical graphs by statistics about the proportion of votes, so as to realize the statistical analysis chart. This example completes the operation.
Note : For more wonderful tutorials, please pay attention to the triple web Design Tutorial section,