Dynamic google graph ,Struts2 google graph integration , google graph , google chart

Here we discussed about Google Charts . Google Charts provides a perfect way to visualize complex , Reporting data in a simple and understandable way. Today lots of tool available . Google Chart API is one of such online tool that can be used to generate charts for visual data representation. Google Charts is with simple JavaScript that you embed in your web page.Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility and cross platform portability to iPhones, iPads and Android.

following are the charts provided by Google API.These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions):-

1.Area Chart
2.Bar Chart
3.Line Chart
4.Combo Chart
5.Bubble Chart
6.Pie Chart

and many more to known all Visit Chart Gallery Page.

If you need to implement Google chart requires three libraries:

1.The Google JSAPI API
2.The Google Visualization library
3.The library for the chart itself.

 //The first script tag loads the JSAPI library.

Here I m integrating google graph with struts2 Column Chart visualization

web.xml

 Struts2Graph
  
  struts2
  org.apache.struts2.dispatcher.FilterDispatcher
 
    
        index.jsp
    

struts.xml

  
    
     
    

       
       /graph.jsp
       
    

GraphAction.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.javastoreroom.action;


import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.softwareforge.struts2.breadcrumb.BreadCrumb;

import com.google.gson.Gson;
import com.javastoreroom.dao.MassageDAO;
import com.javastoreroom.dao.impl.MassageDAOImpl;
import com.javastoreroom.modal.ChatMassage;
import com.javastoreroom.modal.Student;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;


public class JsonAction extends ActionSupport implements  ServletRequestAware, ServletResponseAware{
    
 
 private static final long serialVersionUID = 1L;
        List students =new ArrayList();
    
        public String googleGraphChart(){
  students.add(new Student(100, "Arun" ,50 , 360 , 70));
  students.add(new Student(10, "Aryan" , 80 ,970 , 890) );
  students.add(new Student(500, "Jassica" , 820 , 180 , 130));
  students.add(new Student(20, "Jamiee" , 140 , 150 ,16));
  students.add(new Student(800, "Alex" , 170 , 380 , 190));
  students.add(new Student(15, "Palk" , 100 , 20 , 220 ));
  students.add(new Student(80, "Arun" , 20 , 240 , 850));
  return SUCCESS;
 }

 public void setStudents(List students) {
  this.students = students;
 }
 

 public List getStudents() {
  return students;
 }

   
}

graph.jsp

<%@taglib prefix="s" uri="/struts-tags" %>




 

             
Employee Salary Details
    

      
Employee Name
      
Marks
      
Salary
      
PF
      
ESI
     
    
     
                    
      
      
      
      
     
    
   

functions.js

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages' : [ 'corechart' ]});
var options, data, chart;
$(function() {
 google.setOnLoadCallback(drawChart);
 function getData() {
  var values = [];
  $('#customerbusiness tr').each(function(i, v) {
   values[i] = [];
   $(this).children('th,td').each(function(ii, vv) {
    if ($(this).is('td.customer-business')) {
     values[i][ii] = parseInt($(this).html());
    } else {
     values[i][ii] = $(this).html();
    }
   });
  });
  return values;
 }
 
  // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.

 
 function drawChart() {
  var values = getData();
  data = google.visualization.arrayToDataTable(values); // Create the data table.
  var view = new google.visualization.DataView(data);
  view.setColumns([ 0, 1 ]);
  options = {
    is3D : true,'width' : '50%','height' : 350, fontSize : 12, fontName : 'Segoe UI', series : {12 : { type : "line" }},
    curveType : "function", colors : [ '#FF9900' , '#DC3912' , '#3366CC' , '#109618' , '#800080' ,'#FF0000'],
    };
   // Instantiate and draw our chart, passing in some options.
  chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
 }
 
  // Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(drawChart);
});

After executing project following output shown Employee Salary Details table and graph :-





Enjoy :) Graph API