Q:

Google Charts Table not being displayed (Servlet & JSP)

I'm extracting data from MYSQL Database to beanList and forwarding data using request from servlet.
String test = json.toJson(tableList);
request.setAttribute("tableList",test);
request.getRequestDispatcher("NewFile.jsp").forward(request, response);

& in my JSP I've the following code
    <%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
    <%@page import="com.data.object.MainData"%>
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%>
     <html>
     <head>
     <script type="text/javascript" src="https://www.google.com/jsapi">  </script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawChart);

  function drawChart() {
    //var jsonData = ${tableList};
     var    data = new google.visualization.DataTable(${tableList});

   var table = new google.visualization.Table(document.getElementById('table_div'));

      table.draw(data, {showRowNumber: true});

  }

</script>

  </head>
  <body>
   <div id="table_div"></div>
   </body>
  </html>

I've tested and getting proper json data but unable to get table printed/displayed ...
The output in firebug (net -> all) shows 
HeadersResponseHTMLCacheCookies

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["table"]});
  google.setOnLoadCallback(drawChart);

function drawChart() {
 //         var jsonData = [
{
     "FormCtrlValId": 107,
     "FormCtrlValLabel": "abcc.",
 "FormCtrlValCode": "90",
 "FormCtrlValCityId": 18,
"FormCtrlValofCtrlId": 1226,
"FormCtrlId": 1226,
"FormCtrlLabel": "Location Code",
"FormCtrlType": "EditText",
"FormCtrlIsFixed": false,
"FormCtrlHasCodes": true,
"FormId": 335,
"CtrlOrderNum": 1,
"RecordDetailId": 1233,
"RecordDetailLongitude": 23,
"RecordDetailLatitude": 2234,
"RecordingTimeStamp": "Jan 15, 2015 4:05:22 AM",
"SubmissionTimeStamp": "Jan 15, 2015 4:05:35 AM",
"ServerTimeStamp": "Jan 15, 2015 9:05:36 AM",
"RecordDetailOfFormId": 2,
"RecordDetailOfCityId": 1,
"RecordDetailByUserId": 1,
"FormDetailId": 2,
"FormDetailName": "some form 123",
"FormLastUpdatedOn": "Jan 23, 2015 1:48:20 PM",
"FormDetailLastUpdatedByUserId": 4,
"FormDetailCreatedByUserId": 4,
"FormSubCat": 4,
"FormArchived": false,
"RecordId": 0,
"ControlId": 26,
"ControlValue": "90",
"RegionCityId": 8,
"RegionCityName": "some city",
"RegionId": 2,
"Location": "some location ",
"Status": "some status"
 },

Need some help please.

A:

It looks like you are missing a lot of the required code in your drawChart function. Have a look below. I removed a lot of the data being displayed to keep the example small, but I think you'll get the idea.
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript' src="https://www.google.com/jsapi"></script>
    <script type='text/javascript'>

        google.load("visualization", "1", {packages:["table"]});
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Value 1');
            data.addColumn('string', 'Value 2');
            data.addColumn('string', 'Value 3');

            //Your data, trimmed for this example.
            data.addRows([
                [107,'abcc.','90']    
             ]);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true});    
        }
    </script>
    </head>
    <body>
        <div id="table_div"></div>
    </body>
</html>

