The php generates this page:
<html>
<head>
<script type="text/javascript" src="externalScript.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["annotatedtimeline"]});
google.setOnLoadCallback(chartRequest);
</script>
</head>
<body>
<div id="chart_div" style="width: 1280px; height: 480px;"></
div><br />
</body>
</html>
The externalScript basically does this:
var ITEMS = new Array();
var data;
function getXmlHttpRequestObject()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if(window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else
alert("Your Browser Sucks!\nIt's about time to upgrade don't
you think?");
}
var chartReq = getXmlHttpRequestObject();
function chartRequest()
{
chartReq.onreadystatechange = handleChartRequest;
chartReq.open("GET", "http://your_DB->PHP_Layer_File.php", true);
chartReq.send(null);
}
function handleChartRequest()
{
var outStatus = "";
try
{
outStatus = chartReq.status;
}
catch(e)
{
outStatus = " ";
}
if (chartReq.readyState == 4)
{
if (outStatus == 200)
{
try
{
var returnedXML = chartReq.responseXML;
initChart();
parseXML(returnedXML);
}
catch (e)
{
alert("error handleChartRequest: " +e)
}
}
}
}
function initChart()
{
data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'MY_Category1');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'MY_Category2');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
// ...
// ...
// ...
// etc
data.addColumn('number', 'MY_CategoryN');
data.addColumn('string', 'titleN');
data.addColumn('string', 'textN');
}
function parseXML(inXML)
{
var dataitems = inXML.getElementsByTagName("dataitem");
var currenArray = new Array();
var currentTag = "";
var len = dataitems.length;
while (len--)
{
var curDataItem = dataitems[len];
if (curDataItem.getElementsByTagName("validInfo")
[0].getAttribute("value") != currentTag && currentTag != "")
{
ITEMS.push(curDataItem );
}
printArray();
}
function printArray()
{
data.addRows(ITEMS.length);
for(var i=0; i<ITEMS.length; i++)
{
printRow(ITEMS[i], i);
}
var chart = new google.visualization.AnnotatedTimeLine
(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true, allValuesSuffix: "pt",
scaleType: "maximize", allowHtml: true});
reformatTags(); //only neccesary for dhtml manipulation of
annotation tags.
}
function printRow(ITEM, iterator)
{
// at this point each ITEM should be the same as curBuildArray
// Therefore each ITEM should be an array of thisDataItem Objects.
try
{
// get date
var theDate = ITEM[0].builddate;
/*
* FIX THE STUPID DATE HERE!!!!!!!
*/
//data.setValue(iterator, 0, new Date("October 7, 2008
13:15:00"));
data.setValue(iterator, 0, new Date(parseDate(theDate)));
var AVERAGE = 0;
var len = ITEM.length
for(var j=0; j<len; j++)
{
var curData = ITEM[j];
data.setValue(iterator, platformSwitch(curData.platform),
(curData.pass-0));
}
}
catch(err)
{
alert("error in printRow[" +iterator +"] " +err);
}
}
I've left out helper functions, abbreviated some other functions, and
removed some functionality entirely (this is an internal work page).
You'll note the php file used in the xmlRequest isn't even here at
all.
I'm using the chart to chart BVT results over time as opposed to
financial values.
Let me know if there's any part of the logic flow that doesn't make
sense, doesn't flow well, or simply got hacked apart too much to
understand.
NOTE: this code WILL NOT WORK if you copy it. It's merely a guideline
to what I did.
On Nov 17, 7:57 am, Pragan <[EMAIL PROTECTED]> wrote:
> Hey,
>
> Can you please explain what is that exactly you did? Do you have any
> finance chart showing up like finance.google.com?It would be great if
> you can show us an example of what you did.
>
> thanks
> pragan.
>
> On Nov 14, 11:53 am, pfhat <[EMAIL PROTECTED]> wrote:
>
> > I did this with php pretty easily....I used ajax to make a request on
> > page load for all the data. php returned it as xml. javascript parsed
> > it and constructed the chart object.
> > -dave
>
> > On Nov 13, 6:37 am, p00kie <[EMAIL PROTECTED]> wrote:
>
> > > Hi there,
>
> > > Trying to perform this task and wondering if anyone has been
> > > successful thus far or can offer any pointers.
>
> > > I have a MySQL database back-end and currently the web interface is
> > > using perl/cgi to create queries to the database and spitting out
> > > results via http. I want to incorporate the google visualizations in
> > > the data set for this.
>
> > > My solution so far is to spit out the data queried via perl to an XML
> > > spreadsheet. Then using XMLHttpRequest, to use javascript to parse the
> > > data, store it in variables and then populate the data table/other
> > > google visualization gadgets that can be further possible.
>
> > > 1. Would this work?
> > > 2. Any sample code on defining XML read-in functions as well as
> > > parsing it?
>
> > > Thanks
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
