Using DWR and amCharts to Generate Chart



Using DWR and amCharts to Generate Chart

This article would introduce how to use DWR and amCharts to generate java script charts.

We will develop a demo application to display a histogram to show how many users are registered in this week.

Server side implementation
1.       Download DWR and copy the jar to lib directory.
2.       Export business service using DWR annotations
At server side, we use DWR annotations to export business service so that they can be remote-called by javascript.


package org.codeexample.amChart;
@RemoteProxy
public class ReportServieImpl {
    @RemoteMethod
    public static Map getWeeklyNewUsers(Date date) { Calendar weekStartCalendar = Calendar.getInstance();
    weekStartCalendar.setTime(getWeekStartDay(date));
    LinkedHashMap dateUsers = new LinkedHashMap();
    for (int i = 0; i < 7; i++) {
        dateUsers.put(weekStartCalendar.getTime(), random(100, 1000));
        System.err.println(weekStartCalendar.getTime() + ":"
           + dateUsers.get(weekStartCalendar.getTime()));
        weekStartCalendar.add(Calendar.DAY_OF_YEAR, 1);
    }
    return dateUsers;
    }
    private static Date getWeekStartDay(Date date) {
    Calendar weekStartCalendar = Calendar.getInstance();
    weekStartCalendar.setTime(date);
    int day_of_week = weekStartCalendar.get(Calendar.DAY_OF_WEEK);
    weekStartCalendar.add(Calendar.DAY_OF_YEAR, Calendar.MONDAY
       - day_of_week);
    weekStartCalendar.set(Calendar.HOUR, 0);
    weekStartCalendar.set(Calendar.MINUTE, 0);
    weekStartCalendar.set(Calendar.SECOND, 0);

    return weekStartCalendar.getTime();
    }
    private static int random(int start, int range) {
    Random random = new Random();
    double result = start + range * random.nextDouble();
    return (int) result;
    }
}
3.       Add the DWR servlet definition and mapping to web.xml
 <!DOCTYPE web-app PUBLIC  
  "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"  
  "http://java.sun.com/dtd/web-app_2_3.dtd" >  
 <web-app>  
  <display-name>amCharts Demo Application</display-name>  
      <servlet>  
       <description>DWR controller servlet</description>  
       <servlet-name>dwr-invoker</servlet-name>  
       <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  
       <init-param>  
        <param-name>classes</param-name>  
        <param-value>  
         org.codeexample.amChart.ReportServieImpl  
        </param-value>  
        </init-param>  
           <init-param>  
             <param-name>debug</param-name>  
             <param-value>true</param-value>  
           </init-param>   
      </servlet>  
      <servlet-mapping>  
       <servlet-name>dwr-invoker</servlet-name>  
       <url-pattern>/dwr/*</url-pattern>  
      </servlet-mapping>  
 </web-app>  
Client side implementation
1. Download amCharts from http://www.amcharts.com/
2. Unzip it and copy files under amcharts directory to web application root directory.
 <html>  
 <head>  
  <title>New Users Chart in This week</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <script type="text/javascript"  
   src="dwr/interface/ReportServieImpl.js"> </script>   
  <script type='text/javascript' src='dwr/engine.js'> </script>  
  <script type='text/javascript' src='dwr/util.js'> </script>  
  <script src="amcharts/javascript/amcharts.js" type="text/javascript"></script>  
  <script src="amcharts/javascript/raphael.js" type="text/javascript"></script>   
  <script language="JavaScript">  
  function loadReport()  
  {  
   var now = new Date();  
   ReportServieImpl.getWeeklyNewUsers(now, {  
       callback:function(str) {   
       var chartData = [];  
       for (var key in str) {  
    var entry = {};  
    var date = new Date(key);  
    entry["date"] = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();  
    entry["number"] = str[key];  
    chartData.push(entry);  
    }        
   var chart = new AmCharts.AmSerialChart();  
        chart.pathToImages = "amcharts/javascript/images/";  
   chart.dataProvider = chartData;  
      chart.marginTop = 15;  
      chart.marginRight = 20;  
      chart.categoryField = "date";  
      chart.angle = 30;  
      chart.depth3D = 30;  
      var legend = new AmCharts.AmLegend();  
      chart.addLegend(legend);  
      var graph1 = new AmCharts.AmGraph();  
      graph1.title = "Register User";  
      graph1.valueField = "number";  
      graph1.type = "column";  
      graph1.lineAlpha = 0;  
      graph1.fillAlphas = 1;  
      chart.addGraph(graph1);     
   chart.write("chartdiv");  
       }  
      });  
  }  
  loadReport();  
  </script>  
 </head>   
 <body>  
 <h2>New Users Chart in this Week</h2>  
 <div id="chartdiv" style="width:800px; height:600px;"></div>  
 <button onClick="loadReport();">Reload</button>  
 </body>  

Labels

adsense (5) Algorithm (69) Algorithm Series (35) Android (7) ANT (6) bat (8) Big Data (7) Blogger (14) Bugs (6) Cache (5) Chrome (19) Code Example (29) Code Quality (7) Coding Skills (5) Database (7) Debug (16) Design (5) Dev Tips (63) Eclipse (32) Git (5) Google (33) Guava (7) How to (9) Http Client (8) IDE (7) Interview (88) J2EE (13) J2SE (49) Java (186) JavaScript (27) JSON (7) Learning code (9) Lesson Learned (6) Linux (26) Lucene-Solr (112) Mac (10) Maven (8) Network (9) Nutch2 (18) Performance (9) PowerShell (11) Problem Solving (11) Programmer Skills (6) regex (5) Scala (6) Security (9) Soft Skills (38) Spring (22) System Design (11) Testing (7) Text Mining (14) Tips (17) Tools (24) Troubleshooting (29) UIMA (9) Web Development (19) Windows (21) xml (5)