画图jsp-CSDN博客

本文链接：https://blog.csdn.net/lauphai/article/details/83883929


<%@ 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 by  date_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" onSubmit="return check();">
		<tr>
			<td height="30" valign="middle" bgcolor="#367DC9" class="txt3"> <font face="微软雅黑">数据图形</font>：<span class="txt1">
			<span class="txt1"> 从 <input size="8" type="text" name="bt" style="border:1px solid #999;" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" class="text ui-widget-content ui-corner-all" value="<%=bt==null?yesteday:bt%>"/>
				到 <input size="8" type="text" name="et" style="border:1px solid #999;" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" class="text ui-widget-content ui-corner-all" value="<%=et==null?yesteday:et%>"/>
				 <input type="submit" value="查 询" /> <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>  
			<img src="images/jiao2.gif" width="6" height="5" /><a href="javascript:changechart(7);" >2222</a>  
			<img src="images/jiao2.gif" width="6" height="5" /><a href="javascript:changechart(8);" >3333</a>  
			</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>