JSON, list, 前台显示
前台
$(function(){
$.getJSON("/portal/visitor/getVisitorCount?rn="+Math.random(),function(jsondata){
document.getElementById("todaytotal").innerText=jsondata[0].total[29];
var data = [
{
name : 'SW Group',
value:jsondata[0].swCount,
color:'#cbab4f',
line_width:2
},
{
name : 'System S/W R&D 1Part',
value:jsondata[0].sw1Count,
color:'#a5c2d5',
line_width:2
}, {
name : 'System S/W R&D 2Part',
value:jsondata[0].sw2Count,
color:'#76a871',
line_width:2
},
{
name : 'Mon(S)开发Part',
value:jsondata[0].monCount,
color:'#9f7961',
line_width:2
},
{
name : 'SE',
value:jsondata[0].seCount,
color:'#a56f8f',
line_width:2
},{
name : 'SQA&Other',
value:jsondata[0].sqaCount,
color:'#6f83a5',
line_width:2
},{
name : 'Total',
value:jsondata[0].total,
color:'#CC0000',
line_width:2
}
]; var labels = ["",""+(time(-28).getMonth()+1)+"/"+time(-28).getDate()+"","",""+(time(-26).getMonth()+1)+"/"+time(-26).getDate()+"","",""+(time(-24).getMonth()+1)+"/"+time(-24).getDate()+"","",""+(time(-22).getMonth()+1)+"/"+time(-22).getDate()+"","",""+(time(-20).getMonth()+1)+"/"+time(-20).getDate()+"","",""+(time(-18).getMonth()+1)+"/"+time(-18).getDate()+"","",""+(time(-16).getMonth()+1)+"/"+time(-16).getDate()+"","",""+(time(-14).getMonth()+1)+"/"+time(-14).getDate()+"","",""+(time(-12).getMonth()+1)+"/"+time(-12).getDate()+"","",""+(time(-10).getMonth()+1)+"/"+time(-10).getDate()+"","",""+(time(-8).getMonth()+1)+"/"+time(-8).getDate()+"","",""+(time(-6).getMonth()+1)+"/"+time(-6).getDate()+"","",""+(time(-4).getMonth()+1)+"/"+time(-4).getDate()+"","",""+(time(-2).getMonth()+1)+"/"+time(-2).getDate()+"","",""+(time(0).getMonth()+1)+"/"+time(0).getDate()+""];
var line = new iChart.LineBasic2D({
render : 'canvasDiv',
data: data,
align:'center',
//title : 'SW Portal Recent 30D Flow Analysis',
title : {
text:'Access Record',
fontsize:11,
color:'#000000'
}, width : 1500,
height : 320,
background_color : '#FFFFFF',
tip:{
enable :true,
shadow:true,
listeners:{
//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
parseText:function(tip,name,value,text,i){
return name+" : "+value;
}
}
},
legend : {
enable : true,
row:1,//设置在一行上显示,与column配合使用
column : 'max',
valign:'top',
sign:'round',
fontsize:10,
background_color:null,//设置透明背景
offsetx:-220,//设置x轴偏移,满足位置需要
offsety:-5,//设置x轴偏移,满足位置需要
border : true
},
crosshair:{
enable:true,
line_color:'#62bce9'
},
sub_option : {
border:{
enable:false
}, label:false,
point_hollow : false
},
border:{
color:'#ffffff'
}, //去掉外边框
coordinate:{
width:1050,
height:200,
axis:{
color:'#9f9f9f',
width:[0,0,1,1]
},
grids:{ },
scale:[{
position:'left',
scale_enable : true,
start_scale:0,
scale_space:5,
end_scale:10,
label : {color:'#000000',fontsize:11} //竖轴文字样式
},{
position:'bottom',
label : {color:'#000000',fontsize:11},//横轴文字样式
labels:labels,
}]
}
}); //开始画图
line.draw();
});
});
后台controller
@RequestMapping("/getVisitorCount")
@ResponseBody
public void getVisitorCount(HttpServletRequest request,HttpServletResponse response){
Date date=new Date();//取时间
Calendar calendar = new GregorianCalendar();
calendar.setTime(date);
calendar.add(calendar.DATE,-29);//把日期往后增加一天.整数往后推,负数往前移动
date=calendar.getTime(); //这个时间就是日期往后推一天的结果
SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd");
String[] curdate = new String[30];
curdate[0]=formatter.format(calendar.getTime());
for(int i = 1 ;i<30;i++){
calendar.add(calendar.DATE,+1);//把日期往后增加一天.整数往后推,负数往前移动
curdate[i] =formatter.format(calendar.getTime());
} List<Long> sw1Count = new ArrayList<Long>();
List<Long> sw2Count = new ArrayList<Long>();
List<Long> swCount = new ArrayList<Long>();
List<Long> seCount = new ArrayList<Long>();
List<Long> monCount = new ArrayList<Long>();
List<Long> sqaCount = new ArrayList<Long>();
List<Long> total = new ArrayList<Long>(); for(int i=0;i<30;i++){
sw1Count.add(visitorService.getSW1Count(curdate[i]));
sw2Count.add(visitorService.getSW2Count(curdate[i]));
swCount.add(visitorService.getSWCount(curdate[i]));
seCount.add(visitorService.getSECount(curdate[i]));
monCount.add(visitorService.getMONCount(curdate[i]));
sqaCount.add(visitorService.getSQACount(curdate[i]));
total.add(visitorService.getSW1Count(curdate[i])+visitorService.getSW2Count(curdate[i])+visitorService.getSWCount(curdate[i])+visitorService.getSECount(curdate[i])+visitorService.getMONCount(curdate[i])+visitorService.getSQACount(curdate[i]));
} //request.getSession().setAttribute("eduTotal", categoryTotal);
response.reset();
response.setCharacterEncoding("UTF-8");
//response.setContentType("application/json;charset=utf-8");
response.setContentType("text/html"); JSONArray members = new JSONArray();
PrintWriter out= null;
try {
out= response.getWriter();
JSONObject member = new JSONObject();
member.put("sw1Count", sw1Count);
member.put("sw2Count", sw2Count);
member.put("swCount", swCount);
member.put("seCount", seCount);
member.put("monCount", monCount);
member.put("sqaCount", sqaCount);
member.put("total", total);
members.add(member);
out.write(members.toString()); } catch (Exception e) {
System.out.println(e.getMessage());
out.flush();
out.close();
} out.flush();
out.close();
}
数据库获取数据
@Override
public Long getSW2Count(String curdate) {
List<Visitor> list = getSession().createQuery("FROM Visitor v WHERE v.part like '%System S/W R&D 2Part%' AND v.visitDate like '%"+curdate+"%'").list();
Long sw2Count = Long.valueOf(list.size());
return sw2Count;
}
JSON, list, 前台显示的更多相关文章
- MVC Core 网站开发(Ninesky) 2.1、栏目的前台显示
上次创建了栏目模型,这次主要做栏目的前台显示.涉及到数据存储层.业务逻辑层和Web层.用到了迁移,更新数据库和注入的一些内容. 一.添加数据存储层 1.添加Ninesky.DataLibrary(与上 ...
- 关于JSON日期格式显示及My97日期控件
1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...
- MVC Core 网站开发(Ninesky) 2.1、栏目的前台显示(补充)
在2.1.栏目的前台显示中因右键没有添加视图把微软给鄙视了一下,后来有仔细研究了一下发现应该鄙视自己,其实这个功能是有的,是自己没搞清楚乱吐糟. 其实只要在NuGet中安装两个包(Microsoft. ...
- jsp+oracle实现数据库内容以表格形式在前台显示(包含分页)
jsp+oracle实现数据库内容以表格形式在前台显示(包含分页) 在文件夹内新增list_emp.jsp 代码如下: <%@ page contentType="text/html& ...
- webpages框架中使用Html.TextArea()在前台显示多行信息时,如何进行大小、样式的设置
环境:vs2015 webpages框架+razor语法: 目的:服务器进行数据更新操作后,在前台显示更新的相关信息: 后台代码:将更新条数等相关信息存储在一个变量中: @{ var serverIn ...
- 基于Jquery+Ajax+Json实现分页显示
1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, ...
- mysql insert和前台显示乱码
近期在搞服务端.遇到问题例如以下, 在mysql中插入中文乱码.或mysql中中文正常显示,但jsp在前台显示mysql中的中文时乱码. 解决方法,进入mysql控制台,运行 SET characte ...
- Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
- controller分支实现前台显示弹框同时转发
controller分支实现前台显示弹框,前台不需要进行什么操作, 前台请求后台的分支即可. controller层(标红的地方是(alert('账号或密码错误!请重新输入!!!!') ...
- JFinal Web开发学习(九)后台添加前台显示博客
效果: 发博客: 显示博客: 后台:使用hui-admin,文章编辑器是百度开源的ueditor 前台:使用layui前端框架 1.写控制器BlogController controller包中 pa ...
随机推荐
- 关于设置CFileDialog的默认路径
CFileDialog d_File(FRUE, NULL,NULL,NULL,szFilter,FromHandle(m_hWnd)); // 如果写了下面这句那么每次打开都是这个设置的默认路径 ...
- java泛型操作复习,以及讲解在android中使用的场景
android使用泛型的地方很多,比如集成自BaseAdapter实现封装的Adapter,对常用操作进行封装,但是需要对传进来的数据进行处理,此时就使用到泛型,示例如下: public abstra ...
- Linux服务器操作系统
Linux服务器操作系统 今日大纲 ● 服务器操作系统的系列.Linux的主流产品.虚拟机软件 ● 安装linux ● linux基本命令 ● 用户管理及权限(多用户) ● ...
- 23个mysql查询语句
一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...
- 0. Java开发中的23种设计模式详解(转)
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- PHP中try{}catch{}的具体用法详解
PHP中try{}catch{}是异常处理,将要执行的代码放入TRY块中,如果这些代码执行过程中某一条语句发生异常,则程序直接跳转到CATCH块中,由$e收集错误信息和显示.任何调用 可能抛出异常的方 ...
- 解决yum命令时出现Error: xz compression not available
由于CentOS6的系统安装了epel-release-latest-7.noarch.rpm 导致在使用yum命令时出现Error: xz compression not available问题. ...
- 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 大数据阶乘(The factorial of large data)
题目描述 Description 阶乘是计算中的基础运算,虽然规则简单,但是位数太多了,也难免会出错.现在的问题是:给定任意位数(long long类型)的一个数,求它的阶乘,请给出正确结果.为提高速 ...
- mvc路由参数注解
routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //过滤掉禁止访问的路由 routes.MapRoute( name: &quo ...