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>  
Post a Comment

Labels

Java (159) Lucene-Solr (110) All (60) Interview (59) J2SE (53) Algorithm (37) Eclipse (35) Soft Skills (35) Code Example (31) Linux (26) JavaScript (23) Spring (22) Windows (22) Web Development (20) Tools (19) Nutch2 (18) Bugs (17) Debug (15) Defects (14) Text Mining (14) J2EE (13) Network (13) PowerShell (11) Chrome (9) Continuous Integration (9) How to (9) Learning code (9) Performance (9) UIMA (9) html (9) Design (8) Dynamic Languages (8) Http Client (8) Maven (8) Security (8) Trouble Shooting (8) bat (8) blogger (8) Big Data (7) Google (7) Guava (7) JSON (7) Problem Solving (7) ANT (6) Coding Skills (6) Database (6) Scala (6) Shell (6) css (6) Algorithm Series (5) Cache (5) IDE (5) Lesson Learned (5) Miscs (5) Programmer Skills (5) System Design (5) Tips (5) adsense (5) xml (5) AIX (4) Code Quality (4) GAE (4) Git (4) Good Programming Practices (4) Jackson (4) Memory Usage (4) OpenNLP (4) Project Managment (4) Python (4) Spark (4) Testing (4) ads (4) regular-expression (4) Android (3) Apache Spark (3) Become a Better You (3) Concurrency (3) Eclipse RCP (3) English (3) Firefox (3) Happy Hacking (3) IBM (3) J2SE Knowledge Series (3) JAX-RS (3) Jetty (3) Restful Web Service (3) Script (3) regex (3) seo (3) .Net (2) Android Studio (2) Apache (2) Apache Procrun (2) Architecture (2) Batch (2) Build (2) Building Scalable Web Sites (2) C# (2) C/C++ (2) CSV (2) Career (2) Cassandra (2) Distributed (2) Fiddler (2) Google Drive (2) Gson (2) Html Parser (2) Http (2) Image Tools (2) JQuery (2) Jersey (2) LDAP (2) Life (2) Logging (2) Software Issues (2) Storage (2) Text Search (2) xml parser (2) AOP (1) Application Design (1) AspectJ (1) Bit Operation (1) Chrome DevTools (1) Cloud (1) Codility (1) Data Mining (1) Data Structure (1) ExceptionUtils (1) Exif (1) Feature Request (1) FindBugs (1) Greasemonkey (1) HTML5 (1) Httpd (1) I18N (1) IBM Java Thread Dump Analyzer (1) JDK Source Code (1) JDK8 (1) JMX (1) Lazy Developer (1) Mac (1) Machine Learning (1) Mobile (1) My Plan for 2010 (1) Netbeans (1) Notes (1) Operating System (1) Perl (1) Problems (1) Product Architecture (1) Programming Life (1) Quality (1) Redhat (1) Redis (1) Review (1) RxJava (1) Solutions logs (1) Team Management (1) Thread Dump Analyzer (1) Troubleshooting (1) Visualization (1) boilerpipe (1) htm (1) ongoing (1) procrun (1) rss (1)

Popular Posts