chart|js|web| Statistics | Graph JSP (Java Server Pages) [1] is a new technology launched by Sun Microsystems in June 1999 and is based on Javaservlet and the entire Java system Web development Technology, This technology can be used to build advanced, secure and Cross-platform Dynamic Web sites. JSP is very similar to Microsoft's ASP (Active Server Pages) technology. Both provide the ability to mix some kind of program code in HTML code, and the language engine to interpret the execution code. In an ASP or JSP environment, HTML code is primarily responsible for describing the display style of information, while program code is used to describe the processing logic. ASP's programming language is VB Script and so on scripting language, and JSP uses Java.
Microsoft? Office Web component [2] first included with Microsoft? Office 2000. Are they ActiveX for adding spreadsheets, charts, and data-processing functionality to a Web page? The collection of controls. Are you using Microsoft? Internet Explorer when browsing Web pages that contain Office Web components, you can work with the displayed data directly in Internet Explorer, such as sorting and filtering data, entering new values, expanding and collapsing detail data, Rotate the rows to see different summaries of the source data, and so on. Microsoft? Office Web controls provide all of these capabilities, and there are three Office Web Components: Spreadsheet components, Chart components, and PivotTable? Component. This article will use the Chart component.
1, JSP technology and chart components
JSP technology is a server-side compilation of the implementation of the Web design language, its scripting language in Java, fully inherits all the Java benefits. It can effectively separate the dynamic part of the Web page from the static part, you just use any kind of familiar web making tools, write the rules of HTML, and then through the JSP tag (tag) [3] will be included in the dynamic part of it, the majority of the tag is "<%" began to "%>" end.
The Chart component is a data-bound ActiveX control used by Microsoft Office to add charting functionality to a Web page. When we install Microsoft Office 2000, we install a component by default the Office Web Components,chart component is included in this component, and the corresponding file is Msowc.dll.
2. Implementation example
The operating environment of this article is: jbuilder7+oracle8i, at the same time using the JavaBean technology to achieve the connection with the Oracle database [4].
The following program graph.jsp realizes the values of diesel locomotives and electric locomotives that are read from the database for a period of time, and then uses a statistical chart to show that the user can choose the graphic mode. (The following Italic section is JSP code)
<% @page contenttype= "text/html;charset=gb2312"%>
<%@ page import= "Java.sql.*,java.io.*,java.util.*,java.util.date"%>
<jsp:usebean id= "Zzjwbean" scope= "page" class= "JSP.ZZJW"/>
<!--with JavaBean implementation and database connection (this code slightly)-->
<%
/* Variable definition slightly * *
/* Get query year, month, start date, namely: Year,month,f_gk_startdate and the date f_gk_enddate, this code slightly * *
%>
<title>
</title>
<form name=fm action= "" method= "POST" >
</form>
<body bgcolor= "#DAFAFC" >
<script language= "VB Script" >
Sub Window_onload ()
Dim categories (34) ' assigns the value of the horizontal axis to the array in the VB Script environment categories
Dim values (34) ' assigns the ordinate value to the array values in the VB Script environment
<%
i = 0;
rs = Zzjwbean.executequery ("SELECT * from T_zzj_dw"); /* Obtain the name of the unit * *
while (Rs.next ())
{
%>
Categories (<%=i%>) =<%= "\" "+rs.getstring (" F_FJMC ") +" \ "%>
<%
i++;
}
%>
ChartSpace1.Charts.Add ' Add a chart to the chart workspace
' Set variable C to the object returned by the Constants property because named constants cannot be used in VB Script
Set C = chartspace1.constants
Chartspace1.charts (0). Hastitle=true ' Chart has title
Chartspace1.charts (0). Title.Font.Name = "Imitation _gb231280" ' title font
Chartspace1.charts (0). Title.font.size=11 ' Title font size
Chartspace1.charts (0). Title.font.color= "Blue" title font color
Chartspace1.charts (0). Title.caption= "<%=year%> Year <%=month%> monthly locomotive Survey Monthly Report chart" ' title content
Chartspace1.charts (0). HasLegend = True ' Specifies that the chart has a legend
' Specify how the chart is graphically shaped as a column chart
Chartspace1.charts (0). type=c.chcharttypecolumnclustered
' Assign the value of the horizontal axis to the chart
Chartspace1.charts (0). SetData c.chDimCategories, C.chdataliteral,categories
' Series 0 corresponds to the statistic value of diesel locomotive
Chartspace1.charts (0). SeriesCollection (0). Caption= the legend of "Diesel locomotive statistics" series 0
' To assign the value of diesel locomotive statistics to the array values in VB Script environment
<%
i = 0;
Rs1 = null;
F_FJBM = "";
rs = Zzjwbean.executequery ("SELECT * from T_zzj_dw");
while (Rs.next ())
{
F_FJBM = rs.getstring ("F_FJBM");
Rs1 = Zzjwbean.executequery ("Select sum (F_JC_NRHJ) from t_jccwygk where f_jccwy_fj= '" +f_fjbm+ "' and f_date>= '" +f_gk_ Startdate+ "' and f_date<= '" +f_gk_enddate+ "");/* Statistic Data * *
if (Rs1.next ())
{
%>
VALUES (<%=i%>) =<%=rs1.getint (1)%>
<%
i++;
}
}
%>
' Assign the value of diesel locomotive statistics to the chart series 0
Chartspace1.charts (0). SeriesCollection (0). SetData c.chDimValues, C.chdataliteral, values
Chartspace1.charts (0). SeriesCollection.Add ' Add series 1 to the chart
Chartspace1.charts (0). SeriesCollection (1). Caption= "Electric Locomotive Statistics" ' Series 1 legend
' To assign the value of electric locomotive statistics to the array values in VB Script environment
<%
i = 0;
Rs1 = null;
F_FJBM = "";
rs = Zzjwbean.executequery ("SELECT * from T_zzj_dw");
while (Rs.next ())
{
F_FJBM = rs.getstring ("F_FJBM");
Rs1 = Zzjwbean.executequery ("Select sum (F_JC_DLHJ) from t_jccwygk where f_jccwy_fj= '" +f_fjbm+ "' and f_date>= '" +f_gk_ Startdate+ "' and f_date<= '" +f_gk_enddate+ "");
if (Rs1.next ())
{
%>
VALUES (<%=i%>) =<%=rs1.getint (1)%>
<%
i++;
}
}
%>
' Assign the value of the electric locomotive statistics to the chart series 1
Chartspace1.charts (0). SeriesCollection (1). SetData c.chDimValues, C.chdataliteral, values
' Specifies that the vertical axis has a caption, assigns a value, and then specifies the display format of the data
Chartspace1.charts (0). Axes (c.chaxispositionleft). hastitle=true
Chartspace1.charts (0). Axes (c.chaxispositionleft). Title. Font.Name = "Blackbody"
Chartspace1.charts (0). Axes (c.chaxispositionleft). Title. Font.Size = 11
Chartspace1.charts (0). Axes (c.chaxispositionleft). title.caption= "Total number of locomotives (units)"
Chartspace1.charts (0). Axes (C.chaxispositionleft). NumberFormat = "0.##"
' Specifies that the horizontal axis has a caption and assigns a value
Chartspace1.charts (0). Axes (c.chaxispositionbottom). hastitle=true
Chartspace1.charts (0). Axes (c.chaxispositionbottom). Title. Font.Name = "Blackbody"
Chartspace1.charts (0). Axes (c.chaxispositionbottom). Title. Font.Size = 12
Chartspace1.charts (0). Axes (c.chaxispositionbottom). title.caption= "Zhengzhou Bureau locomotive Survey Monthly Report"
End Sub
' Change the shape of the chart according to the user's chosen graphic mode
Sub Dd_onchange ()
Chartspace1.charts (0). TYPE=DD (Dd.selectedindex). Value
End Sub
</script>
<body>
<select name= "DD" size= "1" >
<option value= "0" selected> chart </option>
<option value= "3" > bar chart </option>
<option value= "6" > Smoothing graphs </option>
<option value= > Pie chart </option>
<option value= > Area Map </option>
</select>
<!--Create a chart Workspace object named "ChartSpace1"-->
<p>
<object Id=chartspace1 classid=clsid:0002e500-0000-0000-c000-000000000046 codebase= "Msowc.dll" style= %;height:350 ">
</object>
</p>
</body>
