Small Google Visualizations Demo [Archive]

ckr

17 Oct 2008, 3:03 PM

This is based off of Aaron's blog (http://extjs.com/blog/2008/10/13/google-visualization/) on the Google Visualizations. It uses his Ext.ux.GVisualizationPanel (http://extjs.com/playpen/google-visualization/GVisualizationPanel.js). Good stuff Aaron!

His examples were great but I needed to interact with a server. I also needed the Column Graph in stacked mode. Took me a bit of tinkering but got everything to work. I am sure the regular experts could have done something better, plus explain why I had to add my own mask (I think it was because the Google Visualization uses iFrames, but I am not sure).

You can view a demo here (http://clan.homelinux.com:8080/ext-samples/google.charts/test.google.charts.html). When it first pulls up, no data has been loaded, so click the down arrow on the split button.

And here is the code it is using.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="google.chart.js"></script>
<script type="text/javascript" src="test.google.charts.js"></script>

<script type="text/javascript">
Ext.onReady(testLayout.app.init, testLayout.app);
</script>
<title>Test Google Charts</title>
</head>

<body>
<div id="myDiv"/>
</body>

</html>

Javascript

////////////////////////////////////////////////////////////////////////////////
//
// reference local blank image
//
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';

// create namespace
Ext.namespace('testLayout');

// create application
testLayout.app = function() {
// do NOT access DOM from here; elements don't exist yet

// private variables

// private functions

// public space
return {
// public properties, e.g. strings to translate

// public methods
init: function() {

var myNum;

var panChart = new Ext.ux.GVisualizationPanel({
id: 'panChart',
visualizationPkg: 'columnchart',
visualizationCfg:
{
width: 550,
height: 550,
title: 'Google Stacked Column Chart',
isStacked: true,
is3D: true
},
store: new Ext.data.JsonStore({
storeId: 'dsChart',
url: 'gen.column.chart.data.php',
root: 'rows',
fields:
[
{ name: 'name', type: 'string'},
{ name: 'ds1', type: 'int' },
{ name: 'ds2', type: 'int' }
]
}),
columns:
[
{ dataIndex: 'name', label: 'Data Name' },
{ dataIndex: 'ds1', label: 'DataSet One' },
{ dataIndex: 'ds2', label: 'DataSet Two' }
]
,
tbar:
[
new Ext.SplitButton(
{
text: 'Generate Random Data',
handler: function(){ return;},
menu: new Ext.menu.Menu(
{
items:
[
{
text:'Generate 1 Column',
handler: function ()
{
myNum=1;
dataRefresh();
}
},{
text:'Generate 2 Columns',
handler: function ()
{
myNum=2;
dataRefresh();
}
},{
text:'Generate 3 Columns',
handler: function ()
{
myNum=3;
dataRefresh();
}
},{
text:'Generate 4 Columns',
handler: function ()
{
myNum=4;
dataRefresh();
}
},{
text:'Generate 5 Columns',
handler: function ()
{
myNum=5;
dataRefresh();
}
}
]
})
})
]
});

var myWin = new Ext.Window({
title: 'Graph Window',
border: false,
bodyBorder: false,
width: 600,
height: 600,
closable: false,
collabsible: true,
layout: 'fit',
items: [ panChart ]
});

myWin.show();

var panChart = new Ext.LoadMask(
panChart.getEl(),
{
store: panChart.store,
msg: 'Calculating New Graph...'
}
);

function dataRefresh()
{
panChart.store.load(
{
params:
{
ColumnCnt:myNum
},
callback: function()
{
Ext.getCmp('panChart').onLoadCallback();
}
});
}
} // end of init
};
}(); // end of app

// end of file

PHP

//
// Silly Test routine to generate random data for google chart
//
$myCnt = $_POST["ColumnCnt"];
$myCnt = stripcslashes($myCnt);
$myCnt = str_replace("\"", "", $myCnt);

$myReturn = array();

for($i=1; $i<=$myCnt; $i++)
{
$name = "Data-".$i;
$dsOne = rand(1,2500);
$dsTwo = rand(1,2500);

$myReturn[] = array('name' => $name, 'ds1' => $dsOne, 'ds2' => $dsTwo);
}

//
// Make it look like we are really doing something
//
sleep(1);

echo "{'rows':".json_encode($myReturn)."}";
?>