Implementing Google charts on JSF Primefaces with dynamic data

Sample Code :


public class MapVO {
           public MapVO(String country, String count) {
           super();
           this.country = country;
           this.count = count;
      }
      private String country;
      private String count;
      public String getCountry() {
           return country;
      }
      public void setCountry(String country) {
           this.country = country;
      }
      public String getCount() {
           return count;
      }
      public void setCount(String count) {
           this.count = count;
      }
 }

 import java.io.Serializable;
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import javax.annotation.PostConstruct;
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.SessionScoped;
 @ManagedBean(name="mapBean")
 @SessionScoped
 public class MapBean implements Serializable{
      /**
       *
       */
      private static final long serialVersionUID = 89459996582054769L;
      private List<MapVO> mapList;
      @PostConstruct
      public void init() {
            /* var data = google.visualization.arrayToDataTable([
     ['Country', 'Nos'],
     ['Germany', 200],
     ['United States', 300],
     ['Brazil', 400],
     ['Canada', 500],
     ['Japan', 600],
     ['China', 700]
    ]); */
 // Instead of hardcoding data like below code, read data from database and create ArrayList like below.
           mapList = new ArrayList<MapVO>();
           mapList.add(new MapVO("JAPAN","200"));
           mapList.add(new MapVO("China","100"));
           mapList.add(new MapVO("Canada","1020"));
           mapList.add(new MapVO("United States","1000"));
           mapList.add(new MapVO("Germany","100"));
           setMapList(mapList);
 }
      private HashMap<String, String> mapData;
      public HashMap<String, String> getMapData() {
           System.out.println("getMapData -- "+mapData.size());
           return mapData;
      }
      public void setMapData(HashMap<String, String> mapData) {
           System.out.println("setMapData -- "+mapData.size());
           this.mapData = mapData;
      }
      public List<MapVO> getMapList() {
           return mapList;
      }
      public void setMapList(List<MapVO> mapList) {
           this.mapList = mapList;
      }
 }




Below is the sample xhtml file.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
 <h:head><title>PrimeFaces Test</title>
 <script type='text/javascript' src='https://www.google.com/jsapi'></script>
   <script type='text/javascript'>
    google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawRegionsMap);
    function drawRegionsMap() {
       var data = google.visualization.arrayToDataTable([
                ['Country', 'Nos'],
              <c:forEach var="resultAnalysis" items="${mapBean.mapList}" >
                 ['${resultAnalysis.country}',${resultAnalysis.count}],
                  </c:forEach>
                     ]);
     var options = {};
      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
     chart.draw(data, options);
   };
   </script>
 </h:head>
 <h:body>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
 </h:body>
 </html>

Output preview