画图jsp
<%@ page import="java.text.DateFormat,java.text.ParseException,java.text.SimpleDateFormat,tools.*"%><%@page import="java.sql.Connection,java.sql.DriverManager,java.sql.PreparedStatement,java.sql.ResultSet,java.sql.SQLException,java.util.ArrayList,java.util.Date"%><%@ page import="java.util.Calendar"%><%@ page contentType="text/html; charset=gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><% request.setCharacterEncoding("gb2312");String bt = request.getParameter("bt");String et = request.getParameter("et");long ltoday = System.currentTimeMillis();long lyesday = ltoday-24*60*60*1000l;long l7day = ltoday-7*24*60*60*1000l;java.sql.Timestamp todaytimes = new java.sql.Timestamp(ltoday);java.sql.Timestamp yesdaytimes = new java.sql.Timestamp(lyesday);java.sql.Timestamp day7times = new java.sql.Timestamp(l7day);String day7 = day7times.toString().substring(0,10).replace("-","");//昨天日期String yesteday = yesdaytimes.toString().substring(0,10).replace("-","");//今天日期//String today = todaytimes.toString().substring(0,10).replace("-","");if(bt==null) bt=day7;if(et==null) et=yesteday;//画图String sql_chart = "select date_format(logday,'%Y-%m-%d') as logday,sum(u_1) as u_1,sum(u_2) as u_2,pt,p_type,pubid from T_CLIENT_STAT_DAY where (p_type=6 or p_type=1 or p_type=8) and date_format(logday,'%Y%m%d')='"+todaytimes.toString().substring(0,10)+"' group by date_format(logday,'%Y%m%d'),p_type order by p_type,date_format(logday,'%Y%m%d')";// 时间轴StringBuffer dlist = new StringBuffer();// 时间if(bt!=null && et!=null){// 画图sql_chart = "select date_format(logday,'%Y-%m-%d') as logday,sum(u_1) as u_1,sum(u_2) as u_2,pt,p_type,pubid from T_CLIENT_STAT_DAY where (p_type=6 or p_type=1 or p_type=8) and date_format(logday,'%Y%m%d')<='"+et+"' and date_format(logday,'%Y%m%d')>='"+bt+"' group bydate_format(logday,'%Y%m%d'),p_type order by p_type,date_format(logday,'%Y%m%d') ";}Connection conn_tv = null;PreparedStatement stmt_chart = null;ResultSet rs_chart = null; try {conn_tv = getConnection();// 画图stmt_chart = conn_tv.prepareStatement(sql_chart);rs_chart = stmt_chart.executeQuery();ArrayList<String> l_ydt_u_1 = new ArrayList<String>();StringBuffer bf_ydt_u_1 = new StringBuffer();ArrayList<String> timelist = new ArrayList<String>();while (rs_chart.next()){ if(!timelist.contains(rs_chart.getString("logday"))){timelist.add(rs_chart.getString("logday"));}switch(Integer.parseInt(rs_chart.getString("p_type"))){case 6:l_ydt_u_1.add(rs_chart.getString("u_1"));l_ydt_u_2.add(rs_chart.getString("u_2"));break;case 1:l_zk_u_1.add(rs_chart.getString("u_1"));l_zk_u_2.add(rs_chart.getString("u_2"));break;case 8:l_news_u_1.add(rs_chart.getString("u_1"));l_mews_u_2.add(rs_chart.getString("u_2"));break;}}dlist.append("[");//out.print(timelist.size());for (int i = 0; i < timelist.size(); i++){dlist.append(timelist.get(i).toString().substring(8,10));if (i < (timelist.size()-1)) {dlist.append(",");}}dlist.append("]");//out.print(dlist+"<br/>");bf_ydt_u_1.append("[");for (int i = 0; i < l_ydt_u_1.size(); i++) {bf_ydt_u_1.append(l_ydt_u_1.get(i));if (i < (l_ydt_u_1.size()-1)) {bf_ydt_u_1.append(",");}}bf_ydt_u_1.append("]");%></title> <link href="style/style.css" rel="stylesheet" type="text/css" /><!-- 1. Add these JavaScript inclusions in the head of your page <script type="text/javascript" src="js/modules/jquery.min.js"></script> --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/highcharts.js"></script><script type="text/javascript" src="js/modules/exporting.js"></script><script type="text/javascript">var chart;var date_d = <%=dlist%>;var v_name_new = '用户数';var v_name_act = '活跃数';var u_1 = <%=bf_ydt_u_1%>;function changechart(i){ switch(i){ case 1: v_name_new = '111'; u_1 = <%=bf_ydt_u_1%>;u_2 = <%=bf_ydt_u_2%>;chart = new Highcharts.Chart({chart: {renderTo: 'container_new',defaultSeriesType: 'line'},title: {text: v_name_new},xAxis: {categories: date_d,title: {text: "日期/天"}},yAxis: {title: {text: ''}},tooltip: {formatter: function() {return '<b>'+ this.series.name +'</b><br/>'+this.x +'号: '+ this.y ;}},legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},series: [{name: '新增用户数',data: u_1}]}); break; case 2: v_name_new = '222'; u_1 = <%=bf_zk_u_1%>;u_2 = <%=bf_zk_u_2%>;chart = new Highcharts.Chart({chart: {renderTo: 'container_new',defaultSeriesType: 'line'},title: {text: v_name_new},xAxis: {categories: date_d,title: {text: "日期/天"}},yAxis: {title: {text: ''}},tooltip: {formatter: function() {return '<b>'+ this.series.name +'</b><br/>'+this.x +'号: '+ this.y ;}},legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},series: [{name: '新增用户数',data: u_1}]}); break; case 3: v_name_new = '333'; u_1 = <%=bf_news_u_1%>;u_2 = <%=bf_news_u_2%>;chart = new Highcharts.Chart({chart: {renderTo: 'container_new',defaultSeriesType: 'line'},title: {text: v_name_new},xAxis: {categories: date_d,title: {text: "日期/天"}},yAxis: {title: {text: ''}},tooltip: {formatter: function() {return '<b>'+ this.series.name +'</b><br/>'+this.x +'号: '+ this.y ;}},legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},series: [{name: '新增用户数',data: u_1}]}); break; } } </script><script type="text/javascript" src="js/highslide-full.min.js"></script><script type="text/javascript" src="js/highslide.config.js" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/highslide.css" /><script type="text/javascript"> var example = 'line-ajax',theme = 'grid';</script></head><body><!-- 框架:最外层DIV start--><div style="width:100%;"><!-- 第1层 查询1 DIV start --><div><table width="100%" border="0" class="xian" ><form id="fm_ver" name="fm_ver" method="get"action="chart.jsp" ><tr><td height="30" valign="middle" bgcolor="#367DC9" class="txt3">&nbsp;<font face="微软雅黑">数据图形</font>：<span class="txt1"><span class="txt1">&nbsp;从&nbsp;<input size="8" type="text" name="bt" style="border:1px solid #999;" readonly="readonly" class="text ui-widget-content ui-corner-all" value="<%=bt==null?yesteday:bt%>"/>到&nbsp;<input size="8" type="text" name="et" style="border:1px solid #999;" readonly="readonly" class="text ui-widget-content ui-corner-all" value="<%=et==null?yesteday:et%>"/>&nbsp;<input type="submit" value="查 询" />&nbsp;<a href="/client/chart.jsp"><font style="font-size:15px;" face="微软雅黑"><b/>复位</b></font></a></span></td></tr></tr> </form></table><div><!-- 第1层 查询1 DIV end --><!-- 空行 --><table><tr height="2"><td></td></tr></table><!-- 第3层 DIV start --><div><!-- 画图 --><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td align="left" width="60%"><img src="images/chart2.gif" width="117" height="19" /></td><td align="right" style="font-size:12px;"><font color="#367DC9">按平台:</font><img src="images/jiao2.gif" width="6" height="5" /><a href="javascript:changechart(6);" >1111</a>&nbsp;&nbsp;<img src="images/jiao2.gif" width="6" height="5" /><a href="javascript:changechart(7);" >2222</a>&nbsp;&nbsp;<img src="images/jiao2.gif" width="6" height="5" /><a href="javascript:changechart(8);" >3333</a>&nbsp;&nbsp;</td><td align="right" style="font-size:12px;"><font color="#367DC9">按用户数:</font><img src="images/jiao2.gif" width="6" height="5" /><a href="javascript:changechart(5);" >活跃用户数</a></td></tr></table><table border="1" cellpadding="0" cellspacing="0" width="100%"><tr><td><!-- 3. Add the container_act --><div id="container_act" style="width: 100%; height: 250px; margin: 0 auto"></div></td></tr></table><div><!-- 第3层DIV end --></div><%} catch (Exception e) {e.printStackTrace();}finally{// 画图if (rs_chart != null) {try {rs_chart.close();rs_chart = null;} catch (SQLException e) {rs_chart = null;}}if (stmt_chart != null) {try {stmt_chart.close();stmt_chart = null;} catch (SQLException e) {e.printStackTrace();stmt_chart = null;}}if (conn_tv != null) {try {conn_tv.close();conn_tv = null;} catch (SQLException e) {e.printStackTrace();conn_tv = null;}}}%></body></html>
页:
[1]