实现从数据库中取得数据，再把数据传给画jqplot的jsp界面！jsp界面再进行画图，画出我们所需的图表！

有两个jsp界面，7-12.jsp用来连接数据库，并把数据传给ajaxauto.jsp，ajaxauto.jsp接收数据并画出图表！

7-12.jsp

 <%@ page language="java" pageEncoding="UTF-8"%>

 <%@ page language="java" %>

 <%@ page import="com.mysql.jdbc.Driver" %>

 <%@ page import="java.sql.*" %>

 <%@ taglib prefix="s" uri="/struts-tags"%>

 <%

 //驱动程序名

 String driverName="com.mysql.jdbc.Driver";

 //数据库用户名

 String userName="root";

 //密码

 String userPasswd="root";

 //数据库名

 String dbName="login";

 //表名

 String tableName="meter_param_data";

 //联结字符串

 String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd;

 Class.forName("com.mysql.jdbc.Driver").newInstance();

 Connection connection=DriverManager.getConnection(url);

 Statement statement = connection.createStatement();

 //String sql="SELECT * FROM "+tableName;

 String sqlcount ="select COUNT(*) from Meter_param_Data where Meter_param_Id =1";

 ResultSet rs = statement.executeQuery(sqlcount);

 //设置查询的初始与结束行数

 rs.next();

 int MpDIbegin=rs.getInt("COUNT(*)")-7;

 int MpDIend=rs.getInt("COUNT(*)");

 String sql = "select * from Meter_param_Data where Meter_param_Data_Id between "+MpDIbegin+" and "+MpDIend+"";

 rs = statement.executeQuery(sql); 

 //获得数据结果集合

 ResultSetMetaData rmeta = rs.getMetaData();

 //确定数据集的列数，亦字段数

 int numColumns=rmeta.getColumnCount();

 String dataYear = "[[";

 //String dataYear ="";

 //[['1/1/2008', 42], ['2/14/2008', 56], ['3/7/2008', 39], ['4/22/2008', 81]];

 // 输出每一个数据值

 while (rs.next()) {

         //获取时间

         String s=rs.getString("time");

         //对时间进行以空格分成数组

         String ss[]=s.split(" ");

         //        out.print(ss[0]);

         //对获取的时间行进以-分成数组

         String mdy[]=ss[0].split("-");

         //对月进行判断，如果是以0开头则取第二个数

         if(mdy[1].charAt(0)=='0'){

             mdy[1]=String.valueOf(mdy[1].charAt(1));

         }

         //对日进行判断，如果是以0开头则取第二个数

         if(mdy[2].charAt(0)=='0'){

             mdy[2]=String.valueOf(mdy[2].charAt(1));

         }

         //输出一些资料

 //        out.print("mdy[1]:"+mdy[1]+" ");

 //        out.print("mdy[1].charAt(0):"+mdy[1].charAt(0)+" ");

 //        out.print("mdy[1].charAt(1):"+mdy[1].charAt(1));

 //        out.print("月:"+mdy[1]+" ");

 //        out.print("日:"+mdy[2]+" ");

 //        out.print("年:"+mdy[0]+" ");

         //对获取的数据进行封装成字符串

         dataYear = dataYear +"'"+ mdy[1]+"/"+mdy[2]+"/"+mdy[0]+ "', " + rs.getString("Data") + "],[";

 //        dataYear = dataYear +mdy[1]+"/"+mdy[2]+"/"+mdy[0]+ ","+rs.getString("Data")+",";

 //        out.print(rs.getString("Data")+" ");

 //        out.print("<BR>");

 }

 int dylength = dataYear.length();

 // 减去生成的String后两个字符

 dataYear = dataYear.substring(0, dylength - 2);

 //在结尾加上结束符

 dataYear = dataYear + "]";

 //输出<div class="example-plot" id="chart2"></div>

 //输出生成的字符串

 response.setContentType("text/xml; charset=UTF-8");

 response.setHeader("Cache-Control","no-cache");

 out.println("<response>");

 for(int i=0;i<3;i++){

 //out.print("str为："+ strdiv);

 out.print("<dataYear>"+dataYear+

            "</dataYear>");

 //out.print(dataYear);

 out.println("<name>"+(int)(Math.random()*10)+

            "型笔记本</name>");

 out.println("<count>" +(int)(Math.random()*100)+ "</count>");

 }

 out.println("</response>");

 out.close();

 rs.close();

 statement.close();

 connection.close();

 %>

ajaxauto.jsp

 <%@include file="jqplotinclude.txt"%>

 <%@ page language="java" pageEncoding="UTF-8"%>

 <%@ taglib prefix="s" uri="/struts-tags"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <title>My JSP 'autoRefresh.jsp' starting page</title>

     <meta http-equiv="pragma" content="no-cache">

     <meta http-equiv="cache-control" content="no-cache">

     <meta http-equiv="expires" content="0">

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="This is my page">

     <!-- Additional plugins go here -->

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.logAxisRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.barRenderer.min.js"></script>

     <!--

     <link rel="stylesheet" type="text/css" href="styles.css">

     -->

   </head>

   <script language="javascript">

   function createjqplot(){

       //   var line2 = <s:property value="type"/>;

        var line2=<%=session.getAttribute("dataYear") %>;

 //         var line2 =XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;

          var plot2 = $.jqplot('chart2', [line2], {

            axes: {

              xaxis: {

                renderer: $.jqplot.DateAxisRenderer,

                label: 'Incliment Occurrance',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                tickRenderer: $.jqplot.CanvasAxisTickRenderer,

                tickOptions: {

                    // labelPosition: 'middle',

                    angle: 15

                }

              },

              yaxis: {

                label: 'Incliment Factor',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer

              }

            }

          });

      }

 var XMLHttpReq;

      //创建XMLHttpRequest对象

     function createXMLHttpRequest() {

         if(window.XMLHttpRequest) { //Mozilla 浏览器

             XMLHttpReq = new XMLHttpRequest();

         }

         else if (window.ActiveXObject) { // IE浏览器

             try {

                 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

             } catch (e) {

                 try {

                     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

                 } catch (e) {}

             }

         }

     }

     //发送请求函数

     function sendRequest() {

         createXMLHttpRequest();

         var url = "7-12.jsp";

         XMLHttpReq.open("GET", url, true);

         XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

         XMLHttpReq.send(null);  // 发送请求

     }

     // 处理返回信息函数

     function processResponse() {

         if (XMLHttpReq.readyState == 4) { // 判断对象状态

             if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

                 DisplayHot();

             //一定时间后重新加载sendRequest()方法

                 setTimeout("sendRequest()", 3000);

             } else { //页面不正常

                 window.alert("您所请求的页面有异常。");

             }

         }

     }

     function DisplayHot() {

         var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;

         var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

         document.getElementById("product").innerHTML = name;

         document.getElementById("count").innerHTML = count;

         var dataYear = XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;

     //    document.getElementById("data").innerHTML =dataYear;

 //alert(<%=session.getAttribute("dataYear") %>);

 //alert(dataYear);

         var data =eval(dataYear);

 //alert(data);

         var line2 =data;

 // alert(line2);

 //         var line2 =XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;

         document.getElementById("chart2").innerHTML = "";

          var plot2 = $.jqplot('chart2', [line2], {

            axes: {

              xaxis: {

                renderer: $.jqplot.DateAxisRenderer,

                label: 'Incliment Occurrance',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                tickRenderer: $.jqplot.CanvasAxisTickRenderer,

                tickOptions: {

                    // labelPosition: 'middle',

                    angle: 15

                }

              },

              yaxis: {

                label: 'Incliment Factor',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer

              }

            }

          });

     }

 </script>

 <body onload =sendRequest()>

 <table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200    bgColor=#f5efe7 border=0>

 <TR>

    <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>正在热卖的笔记本</B> </TD>

 </TR>

 <tr>

    <td height="20"> 型号：</td>

    <td height="20" id="product"> </td>

 </tr>

 <tr>

    <td height="20"> 销售数量：</td>

    <td height="20" id="count"> </td>

 </tr>

 </table>

 <div class="example-plot" id="chart2"></div>

 <input type="button" value="画图" onclick="createjqplot()"/>

 </body>

 </html>

一开始是使用

<%=session.setAttribute("dataYear",dataYear) %>
<%=session.getAttribute("dataYear") %>

来传与接收数据的！但这种办法只能接收第一次传过来的数据！就是数据库有新的数据了，图表虽然有刷新，但并不能刷出新的数据！后来不用这个了！

在使用新的办法传与接收时出现了数据值属性不合理的问题！弄了我好久，也有记录下来，为：http://www.cnblogs.com/CccccYj/p/3279394.html

jqplot利用ajax传值画图表（利用jsp连接数据库）的更多相关文章

  1. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  2. 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)

    利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表  实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...

  3. javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断

    和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...

  4. 利用ajax异步校验验证码（转）

    利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...

  5. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  6. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  7. [前端引用] 利用ajax实现类似php include require 等命令的功能

    利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...

  8. 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上

    1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...

  9. Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)

    原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...

随机推荐

  1. 数组初始化 memset fill

    #include <cstdio> #include <cstdlib> #include <cmath> #include <cstring> #in ...

  2. App爬虫神器mitmproxy和mitmdump的使用

    原文 mitmproxy是一个支持HTTP和HTTPS的抓包程序,有类似Fiddler.Charles的功能,只不过它是一个控制台的形式操作. mitmproxy还有两个关联组件.一个是mitmdum ...

  3. FFmpeg编码扩展之————编码库的扩展（libfdk-aac）

    ffmpeg windows版没有libfdk-acc 请求该地址下载:http://tmod.nmm-hd.org/FFmpeg/

  4. ASP.NET生成二维码

    下面使用ThoughtWorks.QRCode.dll这个类库,实现生成二维码 使用时需要增加:下面三个命名空间 using ThoughtWorks.QRCode.Codec; using Thou ...

  5. [游戏数据分析]WAU模型简介及WAU预测

    声明:本博客中所采用的数据并非真实数据,会对真实数据加以变换,重在讨论游戏数据分析的思路. 这里是参考友盟的WAU模型[文章网址,  演示网址],利用某款游戏(以下称为游戏A)数据进行的分析. 作用: ...

  6. 第11月第20天 sqlite3_open xcode mysql connector

    1. sqlite3_open 死锁 * thread #1, queue = 'com.apple.main-thread', stop reason = signal SIGSTOP frame ...

  7. 第10月第10天 git

    1. 已经用 git commit  提交了代码. 此命令可以用来回退到任意版本:git reset --hard  commitid https://www.cnblogs.com/qufanblo ...

  8. Ubuntu下ibus在firefox浏览器中选中即删除的解决办法

    Ubuntu上的firefox更新到36版后,ibus在浏览器中输入中文时选中的文字就会被删除.这个问题在很多贴吧.论坛上也有讨论,不过很多方法都无效.最简单有效的办法就是在命令行输入 ibus-se ...

  9. 用python socket模块实现简单的文件下载

    server端: # ftp server端 import socket, os, time server = socket.socket() server.bind(("localhost ...

  10. Linux入侵问题排查

    1.深入分析,查找入侵原因 1.1 检查隐藏账户及弱口令 1.1.1.检查服务器系统及应用账户是否存在弱口令 检查说明:检查管理员账户.数据库账户.MySQL账户.tomcat账户.网站后台管理员账户 ...