数据库每5秒就更新一次,现在我用不断刷新图表来达到这种效果,有没有更好的方法?我想做成数据不断往前走,就像股票一样,不断地更新,open-flash-chart用了一个开源的包java4openflashchart0.1.jar
这是我的页面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
setInterval(fls,5000); $(document).ready(fls);
function fls(){
swfobject.embedSWF(
"open-flash-chart.swf",
"my_chart",
"40%",
"40%",
"9.0.0",
"expressInstall.swf",
{"data-file":"<%=request.getContextPath()%>/ShowChart"},
{wmode:"transparent"});
}
</script>
</head>
<body>
<p>
Hello OFC
</p>
<div id="my_chart"></div>
</body>
</html>
我写的servletpackage com.miracle.chart;import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.openflashchart.chart.Chart;
import org.openflashchart.component.Labels;
import org.openflashchart.component.Title;
import org.openflashchart.component.X_Axis;
import org.openflashchart.component.Y_Axis;
import org.openflashchart.elements.Line;
import org.openflashchart.elements.Line_Dot;
public class ShowChart extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { this.doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Chart chart = new Chart();
Title title = new Title();
title.setText("Online User Count");
title.setStyle("{color: #736AFF;font-size: 30px;}"); X_Axis x_axis = new X_Axis();
x_axis.setColour("#FF0000");
List x_axisLabels = new ArrayList();
Labels labels = new Labels(); Y_Axis y_axis = new Y_Axis();
y_axis.setColour("#00FF00");
y_axis.setMax(100);
y_axis.setSteps(10); Line line = new Line("My name is Line");
line.setColour("#CCDDEE");
line.setDot__size(10);
line.setFont__size(12);
line.setWidth(4);
//DB connection
String Driver = "com.mysql.jdbc.Driver";
String URL = "jdbc:mysql://10.5.16.40/tdlive?useUnicode=true&autoReconnect=true&characterEncoding=UTF-8";
String USERNAME = "liuhy";
String PASSWORD = "liuhy";
Connection conn = null;
ResultSet rs = null;
String sql = "SELECT dataTime,currentUserCount,totalConnection,channelId,sceneId FROM userCount ORDER BY dataTime DESC LIMIT 10";
try {
Class.forName(Driver);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
PreparedStatement pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
int i = 0;
SimpleDateFormat df = new SimpleDateFormat("HH:mm:ss");
Object [] value = new Object[10];
while(rs.next()){
x_axisLabels.add(df.format(rs.getTimestamp("dataTime")));
value[i] = rs.getInt("currentUserCount");
i++;
}
line.setValues(value);
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e2) {
e2.printStackTrace();
}
labels.setLabels(x_axisLabels);
x_axis.setLabels(labels);
chart.setTitle(title);
chart.setLine(line);
chart.setX_Axis(x_axis);
chart.setY_Axis(y_axis);
response.getWriter().write(chart.createChart());
}}
这是我的页面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
setInterval(fls,5000); $(document).ready(fls);
function fls(){
swfobject.embedSWF(
"open-flash-chart.swf",
"my_chart",
"40%",
"40%",
"9.0.0",
"expressInstall.swf",
{"data-file":"<%=request.getContextPath()%>/ShowChart"},
{wmode:"transparent"});
}
</script>
</head>
<body>
<p>
Hello OFC
</p>
<div id="my_chart"></div>
</body>
</html>
我写的servletpackage com.miracle.chart;import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.openflashchart.chart.Chart;
import org.openflashchart.component.Labels;
import org.openflashchart.component.Title;
import org.openflashchart.component.X_Axis;
import org.openflashchart.component.Y_Axis;
import org.openflashchart.elements.Line;
import org.openflashchart.elements.Line_Dot;
public class ShowChart extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { this.doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Chart chart = new Chart();
Title title = new Title();
title.setText("Online User Count");
title.setStyle("{color: #736AFF;font-size: 30px;}"); X_Axis x_axis = new X_Axis();
x_axis.setColour("#FF0000");
List x_axisLabels = new ArrayList();
Labels labels = new Labels(); Y_Axis y_axis = new Y_Axis();
y_axis.setColour("#00FF00");
y_axis.setMax(100);
y_axis.setSteps(10); Line line = new Line("My name is Line");
line.setColour("#CCDDEE");
line.setDot__size(10);
line.setFont__size(12);
line.setWidth(4);
//DB connection
String Driver = "com.mysql.jdbc.Driver";
String URL = "jdbc:mysql://10.5.16.40/tdlive?useUnicode=true&autoReconnect=true&characterEncoding=UTF-8";
String USERNAME = "liuhy";
String PASSWORD = "liuhy";
Connection conn = null;
ResultSet rs = null;
String sql = "SELECT dataTime,currentUserCount,totalConnection,channelId,sceneId FROM userCount ORDER BY dataTime DESC LIMIT 10";
try {
Class.forName(Driver);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
PreparedStatement pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
int i = 0;
SimpleDateFormat df = new SimpleDateFormat("HH:mm:ss");
Object [] value = new Object[10];
while(rs.next()){
x_axisLabels.add(df.format(rs.getTimestamp("dataTime")));
value[i] = rs.getInt("currentUserCount");
i++;
}
line.setValues(value);
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e2) {
e2.printStackTrace();
}
labels.setLabels(x_axisLabels);
x_axis.setLabels(labels);
chart.setTitle(title);
chart.setLine(line);
chart.setX_Axis(x_axis);
chart.setY_Axis(y_axis);
response.getWriter().write(chart.createChart());
}}
<script type="text/javascript">
function ofc_ready()
{
alert('ofc_ready');
setInterval(load_1,2000);
}
function open_flash_chart_data()
{
alert( 'reading data' );
$.ajax({
type: "POST",
url: "<%=request.getContextPath()%>/ShowChart",
success: function(msg){
alert( "1111Data Saved: " + msg );
return JSON.stringify(msg);
},
async: false
});
alert("end of reading");
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function load_1()
{
tmp = findSWF("my_chart");
$.ajax({
type: "POST",
url: "<%=request.getContextPath()%>/ShowChart",
success: function(msg){
alert( "2222Data Saved: " + msg );
x = tmp.load( JSON.stringify(msg) );
},
async: false
});
}
</script>