数据库每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());

}}

解决方案 »

  1.   

    OFC还有一种方式,只需要图形的数据的变化就可以更新图形,你查查
      

  2.   

    god,搞不定谁来帮帮我::::这是我写的页面代码
    <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>
      

  3.   

    http://miraclestar.googlecode.com/svn/trunk/miraclestar/ofc/我的一个demo
      

  4.   

    OFC xy轴不显示中文 你们有没有遇到过,怎么解决的?