实时显示例task manager.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionWidgets XT - Task Manager Simulation Demo</title>
<script LANGUAGE="Javascript" src=\'#\'" /FusionCharts.js"></script>
<script type="text/javascript">
var chartRendered = 0;
var refreshIntervalCreated = false
function startAutoRefresh(){
setInterval("sayHello('s')",1000);
setInterval("sayHello('s')",1000);
}
function sayHello(name){
Demo.getHello(name,dwrHandler);
}
//这是dwr的一个回调函数，data参数即java方法getHello(String name)的返回值
function dwrHandler(data){
var aaa=data;
cpuUsage.feedData("&value="+aaa);
cpuUsageHistory.feedData("&value="+aaa);
pfUsage.feedData("&value="+aaa);
pfUsageHistory.feedData("&value="+aaa);
}
function updateCPUCharts(){
var rndVal = Demo.getHello(name,dwrHandler);
cpuUsage.feedData("&value="+rndVal);
cpuUsageHistory.feedData("&value="+rndVal);
}
function updatePFCharts(){
//var rndVal = Math.random()*2048;
pfUsage.feedData("&value="+rndVal);
pfUsageHistory.feedData("&value="+rndVal);
}
function onRender(){
chartRendered++
if(chartRendered == 4 && !refreshIntervalCreated){
refreshIntervalCreated = true;
setTimeout(startAutoRefresh, 1000);
}
}
</script>
<script type="text/javascript" src=\'#\'" /dwr/engine.js"></script>
<script type="text/javascript" src=\'#\'" /dwr/interface/Demo.js"></script>
<script type="text/javascript" src=\'#\'" /dwr/util.js"></script>
<script type="text/javascript">
//此函数中可以调用java类的方法，除了java方法本身的参数外，还要将回调函数名作为参数传给java方法
//这是dwr的一个回调函数，data参数即java方法getHello(String name)的返回值
</script>
</head>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.footer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; padding: 10px;
}
.footer a {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #333;
}
.footer a:hover {
color: #000;
border-bottom: 1px dotted #000;
}
#chartContainer{
background-image:url(mainDiv_bg.JPG);
background-repeat:no-repeat;
text-align:center;
width: 588px;
height: 432px;
margin: 0 auto;
}
.chartDivs{
float: left;
margin-left: 10px;
margin-right: 8px;
margin-top: 10px;
margin-bottom: 10px;
}
#mainDiv{
text-align: center;
}
-->
</style></head>
<body bgcolor="#d4d0c8">
<table width="600" border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td><a href="http://www.fusioncharts.com/" title="FusionCharts - Data to delight... in minutes"></a></td>
<td><p align="right" class="style2">Task Manager Simulation</p>
</td>
</tr>
</table>
<div id="maindiv">
<!--<img src=\'#\'" /> -->
<div id="chartContainer">
<div id="chart_cpu_usage" class="chartDivs" style="padding-left: 18px; padding-top: 47px; display:none;"></div>
<div id="chart_cpu_usage_history" class="chartDivs" style="padding-top: 47px;align:center;"></div>
<div id="chart_pf_usage" class="chartDivs" style="padding-left: 18px; padding-top: 7px;display:none;"></div>
<div id="chart_pf_usage_history" class="chartDivs" style="padding-top: 7px;;display:none;"></div>
</div>
</div>
<script type="text/javascript">
var cpuUsage = new FusionCharts({'swfUrl': 'VLED.swf', 'id': 'cpu_usage_chart', 'width': '95', 'height': '165', 'renderer': 'javascript', 'renderAt': 'chart_cpu_usage'});
cpuUsage.setXMLData("<Chart bgColor='000000' bgAlpha='100' upperLimit='100' lowerLimit='0' showLimits='0' numberSuffix='%' baseFont='Verdana' baseFontColor='00dd00' showTickMarks='0' decimalPrecision='0' ledGap='2' ledSize='3' ledBoxBorderColor='000000' ledBoxBorderThickness='0'><colorRange><color minValue='0' maxValue='100' code='00dd00' /></colorRange><value>45</value><customObjects><objectGroup xPos='48' yPos='15' showBelowChart='0'><object type='line' thickness='1' color='000000' xPos='0' yPos='0' toXPos='0' toYPos='120' /></objectGroup></customObjects></Chart>");
cpuUsage.addEventListener('rendered', onRender);
cpuUsage.render();
var cpuUsageHistory = new FusionCharts({'swfUrl': 'RealTimeLine.swf', 'id': 'cpu_usage_history', 'width': '425', 'height': '165', 'renderer': 'javascript', 'renderAt': 'chart_cpu_usage_history'});
cpuUsageHistory.setXMLData("<Chart bgColor='000000' bgAlpha='100' canvasBorderThickness='1' canvasBorderColor='008040' canvasBgColor='000000' showLimits='0' showDivLineValue='0' yAxisMaxValue='100' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='1' decimalPrecision='2' showvalues='0' numdivlines='10' numVDivLines='30' numDisplaySets='100' showNames='0' showLegend='0' divLineColor='008040' vDivLineColor='008040' chartLeftMargin='10' baseFontColor='00dd00' showRealTimeValue='0' showAlternateHGridColor='0' showLabels='0' showtooltip='0'>><categories><category name='1' /></categories><dataset color='00dd00' showValues='0' alpha='100' showAnchors='0' lineThickness='2'><set value='0' /></dataset></Chart>");
cpuUsageHistory.addEventListener('rendered', onRender);
cpuUsageHistory.render();
var pfUsage = new FusionCharts({'swfUrl': 'VLED.swf', 'id': 'pf_usage_chart', 'width': '95', 'height': '165', 'renderer': 'javascript', 'renderAt': 'chart_pf_usage'});
pfUsage.setXMLData("<Chart bgColor='000000' bgAlpha='100' upperLimit='2048' lowerLimit='0' showLimits='0' baseFont='Verdana' baseFontColor='00dd00' showTickMarks='0' decimalPrecision='1' ledGap='2' ledSize='3' ledBoxBorderColor='000000' ledBoxBorderThickness='0' defaultNumberScale='MB' numberScaleValue='1024' numberScaleUnit='GB' formatNumberScale='1'><colorRange><color minValue='0' maxValue='100' code='00dd00' /></colorRange><value>545</value><customObjects><objectGroup xPos='48' yPos='15' showBelowChart='0'><object type='line' thickness='1' color='000000' xPos='0' yPos='0' toXPos='0' toYPos='120' /></objectGroup></customObjects></Chart>");
pfUsage.addEventListener('rendered', onRender);
pfUsage.render();
var pfUsageHistory = new FusionCharts({'swfUrl': 'RealTimeLine.swf', 'id': 'pf_usage_history', 'width': '425', 'height': '165', 'renderer': 'javascript', 'renderAt': 'chart_pf_usage_history'});
pfUsageHistory.setXMLData("<Chart bgColor='000000' bgAlpha='100' canvasBorderThickness='1' canvasBorderColor='008040' canvasBgColor='000000' showLimits='0' showDivLineValue='0' yAxisMaxValue='100' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='1' decimalPrecision='2' divLineDecimalPrecision='0' showvalues='0' numdivlines='10' numVDivLines='30' numDisplaySets='100' showNames='0' showLegend='0' divLineColor='008040' vDivLineColor='008040' chartLeftMargin='10' showRealTimeValue='0' showAlternateHGridColor='0' showLabels='0' showtooltip='0'><categories><category name='1' /></categories><dataset color='00dd00' showValues='0' alpha='100' showAnchors='0' lineThickness='2'><set value='23' /></dataset></Chart>");
pfUsageHistory.addEventListener('rendered', onRender);
pfUsageHistory.render();
//
</script>
<!--<script type="text/javascript">
var so = new SWFObject("TaskManager.swf", "taskmanager", "600", "450", "8", "#D4D0C8");
so.write("maindiv");
</script>-->
<!-- Google Analytics Tracker Code Starts -->
<script type="text/javascript">
// analytics
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src=\'#\'" /> + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
if (typeof(_gat) == "object") {
var pageTracker = _gat._getTracker("UA-215295-3"); pageTracker._initData(); pageTracker._trackPageview();
}
</script>
<!-- Google Analytics Tracker Code Ends --></body>
</html>