Google Image Charts , Google Chart API , Dynamically generate charts

Google Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. But still working on now . Google Image Chart lets you dynamically generate chart with URL String. You can embed these charts on your web page, web site or download the image for local system or offline use. Google Chart API returns a chart image in response to a URL. You can generate many kind of chart like bar chart , pie chart , Map Chart etc with different color size label effect as your need.

if you create a image chart you need to specify chart type , size , data and other formatting parameter in HTTP request.

Here is list Chart Type :-

1.Line Charts
2.Bar Charts
3.Pie Charts
4.Map Charts
5.Scatter Charts
6.Venn Charts
7.Radar Charts
8.QR Codes
9.Google-O-Meter Charts



Line Charts :-

Bar Charts:-
Horizontal bar chart

Vertical bar chart

Stacked bars

Grouped bars.

Pie Charts
2D pie charts.

3D pie charts.

Concentric pie charts.

Map Charts

Scatter Charts

Venn Charts

Radar Charts

QR Codes

Google-O-Meter Charts

DONE :))

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