超越昨天的自己系列(8)

morris.js的官网有详细的例子:http://www.oesmith.co.uk/morris.js/

特别注意它的依赖:

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

放个div:

<div class="graph-container">
        20天内用户增长数量
        <div id="examplefirst" class="graph" style="position: relative;">
            <div id="myfirstchart" style="height: 250px;"></div>
        </div>
    </div>

script:

    <script >
    // 后台传来的数据
    var data = '$data';
    data = data.replace(/&quot;/g, '"');
    var array = eval(data);
    new Morris.Line({
        xLabels: "day",
         // ID of the element in which to draw the chart.
          element: 'myfirstchart',
          // Chart data records -- each entry in this array corresponds to a point on
          // the chart.
          data: array,
          // The name of the data record attribute that contains x-values.
          xkey: 'year',
          // A list of names of data record attributes that contain y-values.
          ykeys: ['value'],
          // Labels for the ykeys -- will be displayed when you hover over the
          // chart.
          labels: ['Value']
    });
    </script>

就可以展示啦~ 只要注意插件中参数data是个数组即可。

后台传来的数据类似:

[
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ]

所以后台的查询我做成了循环查询的方式,本人觉得一定是有更优的方式能够一次查出全部需求数据。先看下实现(hibernate):

action处理:注意循环部分的查询,每次只查一天内的量,如果数量过多可能会影响数据库性能

        // y轴末尾时间 时间处理成: 20130201 23:59:59:999
        Date endDate = WXDateUtil.getTodayLastTime();
        // y轴开始时间 默认20天前到现在
        Date beginDate = WXDateUtil.getBeforeDays(endDate, 20);
        // y轴上时间点列表
        List<Date> dateList = new ArrayList<Date>();
        // 先放开始时间
        Date midDate = beginDate;
        while(endDate.after(midDate)){
            dateList.add(midDate);
            // 下一天
            midDate = WXDateUtil.getNextDay(midDate);
        }
        // 再放结束时间
        dateList.add(endDate);
        JSONArray array = new JSONArray();
        if(dateList.size() > 0){
            for (int i = 0; i < dateList.size() - 1; i++) {
                long count = clientService.getCountByTypeAndTime(0, dateList.get(i), dateList.get(i+1));
                JSONObject object = new JSONObject();
                object.put("year", WXDateUtil.dateToStr(dateList.get(i+1), "yyyy-MM-dd" ));
                object.put("value", count);
                array.add(object);
            }
        }
        context.put("data", array.toJSONString());

时间处理 Util的包:

public class WXDateUtil {

    private static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";

    /**
     * 把日期型转换成字符串形式。
     *
     * @param date 日期
     * @param dateFormat 日期格式,例如"yyyy/MM/dd"、"yyyy年MM月dd"
     * @return 日期字符串
     */
    public static String toLocaleString(Date date, String dateFormat) {
        if (date == null) {
            return "";
        }

        if (StringUtil.isBlank(dateFormat)) {
            return new SimpleDateFormat(DEFAULT_DATE_FORMAT).format(date);
        }

        return new SimpleDateFormat(dateFormat).format(date);
    }

    /**
     * 把日期型转换成"yyyy/MM/dd/"字符串形式。
     *
     * @param date
     * @return 日期字符串
     */
    public static String toLocaleString(Date date) {
        return toLocaleString(date, null);
    }

    /**
     * 获得sysdate+hours后的时间
     *
     * @param hours 提前或者推后的时间
     * @return sysdate+hours后的时间
     */
    public static Date getSysDate(int hours) {
        Calendar time = Calendar.getInstance();

        time.add(Calendar.HOUR, hours);

        return time.getTime();
    }

    /**
     * 方法说明:天数差
     *
     * @param firstDate
     * @param lastDate
     */
    public static int getTimeIntervalDays(Date firstDate, Date lastDate) {
        long intervals = lastDate.getTime() - firstDate.getTime() + (60 * 1000);

        if (intervals > 0) {
            long daysd = intervals / (24 * 60 * 60 * 1000);

            return new Long(daysd).intValue();
        }

        return 0;
    }

    /**
     * 方法说明:小时差
     *
     * @param firstDate
     * @param lastDate
     */
    public static int getTimeIntervalHours(Date firstDate, Date lastDate) {
        long intervals = lastDate.getTime() - firstDate.getTime() + (60 * 1000);

        if (intervals > 0) {
            long longHours = (intervals / (60 * 60 * 1000)) % 24;

            return new Long(longHours).intValue();
        }

        return 0;
    }

    /**
     * 方法说明:分钟差
     *
     * @param firstDate
     * @param lastDate
     */
    public static int getTimeIntervalMins(Date firstDate, Date lastDate) {
        long intervals = lastDate.getTime() - firstDate.getTime() + (60 * 1000);

        if (intervals > 0) {
            long longMins = (intervals / (60 * 1000)) % 60;

            return new Long(longMins).intValue();
        }

        return 0;
    }

    /**
     * 方法说明:parse date
     *
     * @param date
     * @param dateformat
     */
    public static Date parseDate(String date, String dateformat) {
        SimpleDateFormat sdf = new SimpleDateFormat(dateformat);

        try {
            return sdf.parse(date);
        } catch (ParseException e) {
            return null;
        }
    }

    /**
     * 比较日期是否大于当前日期
     */
    public static boolean afterNow(Date date) {
        if (date == null) {
            return false;
        }

        Calendar nowCar = Calendar.getInstance();
        Calendar car = Calendar.getInstance();

        car.setTime(date);

        return car.after(nowCar);
    }

    /*
     * 查看是否早几天
     */
    public static boolean afterDays(Date date, int day) {
        if (date == null) {
            return false;
        }

        Calendar levelDay = Calendar.getInstance();
        Calendar createDay = Calendar.getInstance();

        createDay.setTime(date);
        createDay.add(Calendar.DATE, day);

        if (createDay.after(levelDay)) {
            return true;
        } else {
            return false;
        }
    }

    public static String getIconPathDay(){
        GregorianCalendar now;
        String year, day, month, hour;
        now = new GregorianCalendar();
        year = String.valueOf(now.get(Calendar.YEAR));
        month = (now.get(Calendar.MONTH) + 1) < 10 ? "0" + String.valueOf(now.get(Calendar.MONTH) + 1) : String.valueOf(now.get(Calendar.MONTH) + 1);
        day = String.valueOf(now.get(Calendar.DAY_OF_MONTH));
        StringBuilder sb = new StringBuilder();
        sb.append(year).append("/");
        sb.append(month).append("/");
        sb.append(day).append("/");
        return sb.toString();
    }

    /*
     * 查看是否早几小时
     */
    public static boolean afterHours(Date date, int hours) {
        if (date == null) {
            return false;
        }

        Calendar levelDay = Calendar.getInstance();
        Calendar createDay = Calendar.getInstance();

        createDay.setTime(date);
        createDay.add(Calendar.HOUR, hours);

        if (createDay.after(levelDay)) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 取得系统当前日期
     */
    public static Date getCurrentTime() {
        return new Date();
    }

    /**
     * 返回多少时间的前的时间, seconds 可以是负的
     *
     * @param when
     * @param seconds
     */
    public static Date addTime(Date when, int seconds) {
        Calendar c = Calendar.getInstance();

        c.setTime(when);
        c.add(Calendar.SECOND, seconds);

        return c.getTime();
    }

    /**
     * @param date
     * @param pattern "yyyy-MM-dd HH:mm:ss.SSS"
     * @return
     */
    public static String dateToStr(Date date, String pattern) {
        if (pattern == null) {
            pattern = "yyyy-MM-dd HH:mm:ss.SSS";
        }
        DateFormat ymdhmsFormat = new SimpleDateFormat(pattern);

        return ymdhmsFormat.format(date);
    }

    /**
     * @param str
     * @param pattern "yyyy-MM-dd HH:mm:ss.SSS"
     * @return
     * @throws ParseException
     */
    public static Date strToDate(String str, String pattern) {
        if (pattern == null) {
            pattern = "yyyy-MM-dd HH:mm:ss.SSS";
        }
        DateFormat ymdhmsFormat = new SimpleDateFormat(pattern);
        try {
            return ymdhmsFormat.parse(str);
        } catch (ParseException e) {
            return null;
        }
    }

    /**
     * 获得当天日期
     *
     * @date 2009-2-20
     */
    public static Date getToday() {
        Calendar ca = Calendar.getInstance();
        return ca.getTime();
    }

    /**
     * @date 2009-2-20
     */
    public static Date mkDate(int year, int month, int date) {
        Calendar ca = Calendar.getInstance();
        ca.set(year, month - 1, date);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        sdf.format(ca.getTime());
        return ca.getTime();
    }

    /**
     * <li></li>
     *
     * @param date1
     * @param date2 <li></li>
     */
    public static boolean compareTwoDate(Date date1, Date date2) {
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd HH:mm");
        return simpleDateFormat.format(date1).equals(simpleDateFormat.format(date2));
    }

    /**
     * <li></li>
     *
     * @param date1
     * @param date2 <li></li>
     */
    public static boolean compareTwoDateDay(Date date1, Date date2) {
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
        return simpleDateFormat.format(date1).equals(simpleDateFormat.format(date2));
    }

    /**
     * 通过文件路径获取文件名,类似Linux下basename命令
     * @param path
     * @return
     */
    public static String getFileName(String path){
        String str[] = path.split("/");
        return str[str.length-1];

    }

    /**
     * 取得今天最后时间的Date
     * @return 23:59:59
     */
    public static Date getTodayLastTime(){
        Calendar cal = Calendar.getInstance(); // represents right now, i.e. today's date
        cal.set(Calendar.HOUR_OF_DAY, 23);
        cal.set(Calendar.MINUTE, 59);
        cal.set(Calendar.SECOND, 59);
        cal.set(Calendar.MILLISECOND, 999); // credit to f1sh
        return cal.getTime();
    }

    /**
     * 指定日期向后推几天的日期
     * @param date
     * @param n 天数
     * @return
     */
    public static Date getBeforeDays(Date date, int n){
        Long dateTime = date.getTime() - n*24*60*60*1000;
        return new Date(dateTime);
    }

    /**
     * 指定日期向后推1天的日期
     * @param date
     * @return
     */
    public static Date getNextDay(Date date){
        Long dateTime = date.getTime() + 24*60*60*1000;
        return new Date(dateTime);
    }

    /**
     *
     * @param args
     */
    public static void main(String[] args) {
        System.out.println(getToday());

    }
}

然后了解下hibernate查询count的方式:

参考了:http://stackoverflow.com/questions/1372317/how-do-we-count-rows-using-hibernate

例子:

    public long getCountByTypeAndTime(int type, Date beginTime, Date endTime) {

        Criteria criterion = this.getSession().createCriteria(ClientDO.class);
        if(type!= 0){
            criterion.add(Restrictions.eq("type", type));
        }
        if (beginTime != null) {
            criterion.add(Restrictions.ge("createTime", beginTime));
        }
        if (endTime != null) {
            criterion.add(Restrictions.le("createTime", endTime));
        }

        return (Long)criterion.setProjection(Projections.rowCount()).uniqueResult();

    }

时间作为横轴的图表(morris.js)超越昨天的自己系列(8)的更多相关文章

  1. spring和redis的整合-超越昨天的自己系列(7)

    超越昨天的自己系列(7) 扯淡:  最近一直在慢慢多学习各个组件,自己搭建出一些想法.是一个涉猎的过程,慢慢意识到知识是可以融汇贯通,举一反三的,不过前提好像是研究的比较深,有了自己的见解.自认为学习 ...

  2. maven为不同环境打包(hibernate)-超越昨天的自己系列(6)

    超越昨天的自己系列(6) 使用ibatis开发中,耗在dao层的开发时间,调试时间,差错时间,以及适应修改需求的时间太长,导致项目看起来就添删改查,却特别费力.   在项目性能要求不高的情况下,开始寻 ...

  3. HashMap归档-超越昨天的自己系列

    java HashMap 读一下源码,一个数组存储数据: transient Entry[] table; 内部存key和value的内部类: static class Entry<K,V> ...

  4. Collections.reverse 代码思考-超越昨天的自己系列(13)

    点进Collections.reverse的代码瞄了眼,然后就开始了一些基础知识的收集. 现在发现知道的越多,知道不知道的越多. 列几个记录下: reverse方法源码: /** * Reverses ...

  5. crontab 移动日志-超越昨天的自己系列(12)

    linux上定时执行某些脚本是管理服务器的时候比较常用的场景,比如定时检查进程是否存在,定时启动或关闭进程,定时检查日志删除日志等. 当我打开google百度crontab时长篇大论的一大堆,详细解释 ...

  6. java进程性能分析步骤-超越昨天的自己系列(11)

    java进程load过高分析步骤: top 查看java进程情况     top -Hp 查看某个进程的具体线程情况   printf 0x%x 确认哪一个线程占用cpu比较多,拿出来转成16进制   ...

  7. 快速用springmvc搭建web应用-超越昨天的自己系列(10)

    Demo地址:http://pan.baidu.com/s/1sjttKWd 创建命令: mvn archetype:generate -DgroupId=com.witown.open.demo - ...

  8. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  9. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

随机推荐

  1. 动画系统(Mecanim补充)

      设置状态机部分等在实践中总结. 状态机基础: 动画层 Animation Layers Unity 使用"动画层"来管理身体不同部分的复杂状态机. 动画状态机  Animati ...

  2. 我的Android笔记--我对安卓系统的一些了解

    敲了这么长时间代码,记录一下我对Android的一些概念,下面大部分内容来源自网络资料和官方给的文档.     1,Android操作系统的核心属于Linux的一个分支,具有典型的Linux调度和功能 ...

  3. datanode启动不了

    报如下异常:*org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.protocol.DisallowedDatano ...

  4. POJ 2418 Hardwood Species

                                                     Hardwood Species Time Limit: 10000MS   Memory Limit ...

  5. express4.x中路由中间件和挂载路径的关系

    express4.x 中一个路由中间件可以挂载到多个路由上,一个路由也可以绑定多个路由中间件,如: //多个路由匹配一个路由中间件 app.use(['/gre+t', '/hel{2}o'], gr ...

  6. 【JAVASCRIPT】React入门学习-文本渲染

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...

  7. 横截面数据分类——基于R

    参考资料: <复杂数据统计方法>&网络&帮助文件 适用情况:在因变量为分类变量而自变量含有多个分类变量或分类变量水平较多的情况. 一. (一)概论和例子 数据来源:http ...

  8. 在Intellij里使用Erlang依赖库

    这里以protobuffs为例,记录一下环境的配置,发现这种东西中文的资料真的不多,无论是分享还是记录都是很好的 1.创建一个文件夹名use_proto, 配置rebar.config文件如下: {d ...

  9. [sersync+rsync] centos6.5 远程文件同步部署记录

    针对本地文件的修改,自动同步到远程文件夹,远程备份很方面.研究了下大家的主流同步方案一般是 rsync+inotify和rsync+sersync, 我这里使用sersync的方案,当然大部分都是参照 ...

  10. 【Matlab编程】哈夫曼编码的Matlab实现

    在前年暑假的时候,用C实现了哈夫曼编译码的功能,见文章<哈夫曼树及编译码>.不过在通信仿真中,经常要使用到Matlab编程,所以为了方便起见,这里用Matlab实现的哈夫曼编码的功能.至于 ...