Hi guys,
First of all I am newbie .I need some help with integrating Ext js 3.4
and google chart api.
I am trying to add google pie chart to an Ext.FormPanel
I created a panel with the following code
var grid = new Ext.FormPanel({
id:'test',
renderTo: 'panel',
title:'Sign up',
bodyStyle: 'padding: 10px;',
frame: true,
width:500,
height:500
});
The following code tries to add pie chart to the above panel.
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
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]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
var chart = new
google.visualization.PieChart(document.getElementById('test'));
chart.draw(data, options);
}
And my html is this,
<html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi";></
script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-
all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js">
</script><script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="scripts/m.js"></script>
<script type="text/javascript" src="scripts/googleApi.js"></script
><script type="text/javascript" src="scripts/GVisualizationPanel.js"></script>
<title>Sample</title></head>
<body> <div id="panel"></div></body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
