1.实现jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任务列表</title>
<script type="text/javascript">
var path = '<%=path%>';
</script>
<script type="text/javascript"
src="<%=path%>/js/logoperate/jquery.min.js"></script>
<script type="text/javascript"
src="<%=path%>/js/logoperate/jquery.easyui.min.js"></script>
<style type="text/css">
#container, #sliders {
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
#container {
height: 400px;
}
</style>
</head>
<body style="margin:0px;">
hello.world!
<input type="button" value="mybutton" id="content" />
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
$(function () {
// Set up the chart
//var myresult = 10;
var myresult;
var sum;
var running;
var failed;
var done;
var pending;
$.post("handledashboard.htm",
{
}, function(result) {
//alert(result);
document.getElementById("content").value = result;
myresult = result.split(",");
sum = Number(myresult[0]);
running = Number(myresult[1]);
failed = Number(myresult[2]);
done = Number(myresult[3]);
pending = Number(myresult[4]);
alert(myresult);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 0,
beta: 0,
depth: 50,
viewDistance: 25
}
},
title: {
text: '任务统计'
},
subtitle: {
text: '以下是各种任务的数量'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: [{
name: 'Sum',
color: '#00FF00',
y: sum
}, {
name: 'Running',
color: '#FF00FF',
y: running
},{
name: 'Failed',
color: '#FFFF00',
y: failed
},{
name: 'Done',
color: '#00FFFF',
y: done
},{
name: 'Pending',
color: '#000000',
y: pending
}
]
}]
});
});
});
</script>
</body>
</html>@RequestMapping("/dashboard")
public String dashboard(HttpServletRequest request,HttpServletResponse response) {
logger.info("dashboard");
return "dashboard";
}
@RequestMapping("/handledashboard")
public String handledashboard(HttpServletRequest request,HttpServletResponse response) {
logger.info("handledashboard");
StringBuffer sb = new StringBuffer();
int sum = etlJobService.getAllJobsCount();
sb.append("Sum:" + sum + ",");
int running = etlJobService.getJobsCountByStatus("Running");
sb.append("Running:" + running + ",");
int failed = etlJobService.getJobsCountByStatus("Failed");
sb.append("Failed:" + failed + ",");
int done = etlJobService.getJobsCountByStatus("Done");
sb.append("Done:" + done + ",");
int pending = etlJobService.getJobsCountByStatus("Pending");
sb.append("Pending:" + pending + "\n");
logger.info("sb is " + sb.toString());
try {
//response.getWriter().write(sb.toString());
response.getWriter().write(""+sum+","+running+","+failed+","+done+","+pending);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}3.运行结果
