Programmer: Lifelong Learning: 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>

Now deploy this web application to your web server, and go to http://localhost:8080/amChart/weekly-new-users-chart.jsp in your browser.

Resources:
http://directwebremoting.org/dwr/introduction/getting-started.html
http://www.amcharts.com/docs/v.2/bundle
Export amcharts to PDF in Java
Export amcharts to image in Java

Using DWR and amCharts to Generate Chart

Using DWR and amCharts to Generate Chart

Labels