Google Chart API with JSP
akshays...@gmail.com
Chart. in the html that is generated through a JSP.
But when I embed the code in the JSP of the Google Chart.
I get the Object Expected Message instead of the PIE CHART.
---------------------------------------------------------------------------------------------
<%@ include file="/common/taglibs.jsp"%>
<head>
<title><fmt:message key="suiteResultDetail.title"/></title>
<meta name="heading" content="<fmt:message
key='suiteResultDetail.heading'/>"/>#
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<b>Suite Id =</b> ${suiteStats.suiteId}<br/>
<b>Time of Start =</b> ${suiteStats.timeStamp}<br/>
<b>Total =</b> ${suiteStats.totalTests}<br/>
<b>Pass =</b> ${suiteStats.passTests}<br/>
<b>Fail =</b> ${suiteStats.failTests}<br/>
<b>TBE =</b> ${suiteStats.toBeExecuted}<br/>
<display:table name="suiteResultList" class="table" requestURI=""
id="suiteResultList" export="true" pagesize="25">
<display:column property="testId" media="csv excel xml pdf"
titleKey="test.id" />
<display:column property="testName" sortable="true"
titleKey="test.name" />
<display:column property="engineName" sortable="true"
titleKey="result.engineName" />
<display:column property="moduleName" sortable="true"
titleKey="test.moduleName" />
<display:column property="status" sortable="true"
titleKey="engine.result.status" />
<display:column property="condition" sortable="true"
titleKey="test.condition"/>
<display:column property="outputResult" sortable="true"
titleKey="suiteResultDetail.outputResult" style="white-space: pre;" />
<display:setProperty name="paging.banner.item_name" value="result"/
>
<display:setProperty name="paging.banner.items_name"
value="results"/>
<display:setProperty name="export.excel.filename" value="Suite
List.xls"/>
<display:setProperty name="export.csv.filename" value="Suite
List.csv"/>
<display:setProperty name="export.pdf.filename" value="Suite
List.pdf"/>
</display:table>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
Roni Biran
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
akshays...@gmail.com
Below is the rendered HTML
<!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" xml:lang="en">
<head>
<!-- HTTP 1.1 -->
<meta http-equiv="Cache-Control" content="no-store"/>
<!-- HTTP 1.0 -->
<meta http-equiv="Pragma" content="no-cache"/>
<!-- Prevents caching at the Proxy Server -->
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<meta name="generator" content="AppFuse 2.0" /> <!-- leave
this for stats please -->
<link rel="icon" href="/images/favicon.ico"/>
<title>Suite Execution Result | Test Grid</title>
<link rel="stylesheet" type="text/css" media="all" href="/
styles/andreas01/theme.css" />
<link rel="stylesheet" type="text/css" media="print" href="/
styles/andreas01/print.css" />
<script type="text/javascript" src="/scripts/prototype.js"></
script>
<script type="text/javascript" src="/scripts/
scriptaculous.js"></script>
<script type="text/javascript" src="/scripts/global.js"></
script>
<meta name="heading" content="Suite Execution Result
Information"/>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily
Activities'});
}
</script>
</head>
<body>
<!-- style='position:absolute; width:100%; height=100%; overflow :
auto;' -->
<div id="page">
<div id="header" class="clearfix">
<div id="branding">
<h1><a href="/">Test Grid</a></h1>
<p>local environment</p>
</div>
<hr />
</div>
<div id="content" class="clearfix">
<table>
<tr>
<td>
<div id="main">
<h1>Suite Execution Result Information</h1>
<b>Suite Id =</b> 1<br/>
<b>Time of Start =</b> 2011-12-02 15:51:36.0<br/>
<b>Total =</b> 6<br/>
<b>Pass =</b> 0<br/>
<b>Fail =</b> 0<br/>
<b>TBE =</b> 6<br/>
<span class="pagebanner">6 results found, displaying all results.</
span>
<table class="table" id="suiteResultList">
<thead>
<tr>
<th class="sortable">
<a href="?d-3418585-o=2&d-3418585-s=0&id=1">Test Name</a></th>
<th class="sortable">
<a href="?d-3418585-o=2&d-3418585-s=1&id=1">Engine Name</a></
th>
<th class="sortable">
<a href="?d-3418585-o=2&d-3418585-s=2&id=1">Module Name</a></
th>
<th class="sortable">
<a href="?d-3418585-o=2&d-3418585-s=3&id=1">Status</a></th>
<th class="sortable">
<a href="?d-3418585-o=2&d-3418585-s=4&id=1">Time in Minutes</
a></th>
<th class="sortable">
<a href="?d-3418585-o=2&d-3418585-s=5&id=1">Output Result</a></
th></tr></thead>
<tbody>
<tr class="odd">
<td>TEST1</td>
<td></td>
<td>Trade Booking</td>
<td>TBE</td>
<td></td>
<td style="white-space: pre;"></td></tr>
<tr class="even">
<td>TEST2</td>
<td></td>
<td>Inflation</td>
<td>TBE</td>
<td></td>
<td style="white-space: pre;"></td></tr>
<tr class="odd">
<td>TEST3</td>
<td></td>
<td>Trade Pad</td>
<td>TBE</td>
<td></td>
<td style="white-space: pre;"></td></tr>
<tr class="even">
<td>TEST4</td>
<td></td>
<td>Inflation</td>
<td>TBE</td>
<td></td>
<td style="white-space: pre;"></td></tr>
<tr class="odd">
<td>TEST5</td>
<td></td>
<td>Trade Pad</td>
<td>TBE</td>
<td></td>
<td style="white-space: pre;"></td></tr>
<tr class="even">
<td>TEST6</td>
<td></td>
<td>Inflation</td>
<td>TBE</td>
<td></td>
<td style="white-space: pre;"></td></tr></tbody></table><div
class="exportlinks">Export options:
<a href="?d-3418585-e=1&6578706f7274=1&id=1"><span
class="export csv">CSV </span></a>|
<a href="?d-3418585-e=2&6578706f7274=1&id=1"><span
class="export excel">Excel </span></a>|
<a href="?d-3418585-e=3&6578706f7274=1&id=1"><span
class="export xml">XML </span></a>|
<a href="?d-3418585-e=5&6578706f7274=1&id=1"><span
class="export pdf">PDF </span></a></div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div id="nav">
<div class="wrapper">
<h2 class="accessibility">Navigation</h2>
<ul id="primary-nav" class="menuList">
<li class="pad"> </li>
<li>
<a href="/mainMenu.html" title="Main Menu"
>Main Menu</a>
</li>
<li>
<a href="/userform.html" title="Edit
Profile" >Edit Profile</a>
</li>
<li class="menubar">
<a href="/users.html" title="Administration" style="width:
120px">Administration</a>
<ul>
<li>
<a href="/users.html" title="View Users"
>View Users</a>
</li>
<li>
<a href="/activeUsers.html" title="Current
Users" >Current Users</a>
</li>
<li>
<a href="/reload.html" title="Reload
Options" >Reload Options</a>
</li>
<li>
<a href="/flushCache.html" title="Flush
Cache" >Flush Cache</a>
</li>
<li class="last">
<a href="/clickstreams.jsp"
title="Clickstream" >Clickstream</a>
</li>
</ul>
</li>
<li>
<a href="/logout.jsp" title="Logout"
>Logout</a>
</li>
<li class="menubar">
<a href="/users.html" title="Execution View" style="width:
120px">Execution View</a>
<ul>
<li>
<a href="/engines.html" title="Engine View"
>Engine View</a>
</li>
<li>
<a href="/suites.html" title="Result View"
>Result View</a>
</li>
<li>
<a href="/testStatss.html" title="Execution
Metrics" >Execution Metrics</a>
</li>
<li class="last">
<a href="/results.html" title="Events"
>Events</a>
</li>
</ul>
</li>
<li class="menubar">
<a href="/users.html" title="Execution Setup" style="width:
120px">Execution Setup</a>
<ul>
<li>
<a href="/fileupload.html" title="Upload
Plan" >Upload Plan</a>
</li>
<li>
<a href="/plans.html" title="Plan List"
>Plan List</a>
</li>
<li>
<a href="/users.html" title="Validate Plan"
>Validate Plan</a>
</li>
<li class="last">
<a href="/execution.html" title="Control
Panel" >Control Panel</a>
</li>
</ul>
</li>
</ul>
</div>
<hr/>
</div><!-- end nav -->
</td>
</tr>
</table>
</div>
<div id="footer" class="clearfix">
<div id="divider"><div></div></div>
<span class="left">Version 1.0-local |
<span id="validators">
<a href="http://validator.w3.org/check?uri=referer">XHTML
Valid</a> |
<a href="http://jigsaw.w3.org/css-validator/validator-
uri.html">CSS Valid</a>
</span>
| Logged in as: J######
</span>
<span class="right">
© 2007 <a href="http://www.###.com">#####</a>
<br/><br/>
<a href="rss.html"><img src="images/rss-icon.jpg"/></a>
</span>
</div>
</div>
</body>
</html>
On Nov 30, 5:44 pm, Roni Biran <roni.bi...@gmail.com> wrote:
> I know it sounds kinda corcky but why your JSP suit table outside of the
> body?
>
> can you send the output HTML (after the JavaServer renders it)?
>
> On Wed, Nov 30, 2011 at 1:25 PM, akshaysaxen...@gmail.com <
Roni Biran
asgallant
On Monday, December 17, 2012 4:47:37 AM UTC-5, lakshman...@gmail.com wrote:
Hi All
I am facing Google visualization Issues , on IE 9 , in my jsp page i used , <script type="text/javascript" src="http://www.google.com/jsapi"></script>
its working in all browsers except IE 9 , even I installed google chrome frame features, but same Issues happening
when i try to see view source from the page , source code also not able see from IE9
but this is happening with all bowers
here is my code
<head>
<link rel="stylesheet" href=","myscree.css.path")%>/myscreen.css" media="screen" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>
<div id="stats">
<div class="right"><a href="http://www.mysite.com/"><img src="(img.path")%>/myhclogo.gif" width="202" height="35" alt="Mysites.com" border="0"/></a></div>
<h1>My site page </h1>
<%
%>
<div class="right clear"><a href="<%=graphUrl%>&graphType=bar">Bar chart</a> | <a href="<%=graphUrl%>&graphType=line">Line chart</a></div>
<input type="hidden" name="keyDisplayName" value="<%=keyDisplayName%>" />
<logic:notEmpty name="dataList" scope="request">
<div class="graph" id="graph" style="margin-top:50px !important;">
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['<%=graphPkgType%>']});
//google.load('visualization', '1', {packages: ['corechart']});
var data;
function drawVisualization()
{
// Create and populate the data table.
data = new google.visualization.DataTable();
<logic:notEmpty name="displayHeader" scope="request">
<logic:iterate id="bean" name="displayHeader" scope="request" indexId="index">
<bean:define id="dispName" name="bean" property="displayName" />
<%if (!request.getParameter("repoId").equals("1") && "Total".equals(dispName) && "ColumnChart".equals(graphClass)){
totalIndexVal = index.intValue();
}else{%>
data.addColumn('<%=index.intValue()==0?"string":"number"%>', '<bean:write name="bean" property="disName" filter="false" />');
<%}%>
</logic:iterate>
</logic:notEmpty>
<logic:iterate id="bean" name="dataList" scope="request" indexId="topIndex">
data.addRows(1);
<logic:notEmpty name="bean" property="columnsData">
<logic:iterate id="data" name="bean" property="columnsData" indexId="index">
<%if (totalIndexVal!=index.intValue()){%>
data.setCell(<%=topIndex%>, <%=index%>, <%=index.intValue()==0?"'"+data+"'":data%>);
<%}%>
</logic:iterate>
</logic:notEmpty>
</logic:iterate>
// Create and draw the visualization.
chart=new google.visualization.<%=graphClass%>(document.getElementById('graph'));
var options = {
//width: 1500,
height: 700,
fontSize: 20,
legend: 'bottom',
isStacked: true,
chartArea: {left: 80, top: 50},
titleX: 'Date', titleY: 'Page views',
title: '<%=keyDisplayName%>'
};
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</div>
</logic:notEmpty>
<logic:empty name="dataLi" scope="request">
<p><bean:message key="ts.search.result" /></p>
</logic:empty>
</div>
</body>
</html>
please can you any body , give a solution for this
Thanks
Lakshman