Posting this problem again, in a clearer fashion. Hopefully someone
can shed some light.

Here is some background information:
1. My RDBMS is MySQL
2. Communication between web and database is using CGI/PERL.
3. Do not want to use PHP.
4. DO want to use Google Maps API/Google Visualization API

Essentially it is a user-defined query which is selected then sent to
the DB. The query is run and results are printed out to an XML
spreadsheet using a Perl module called XML::Handler::YAWriter and
XML::Generator::DBI.

Then comes the Javascript which parses the XML spreadsheet using
GDownloadURL (More info here: 
http://code.google.com/apis/maps/documentation/services.html#XML_Request).

It reads in the data and I have some parsing going on and then adding
it to the data table.

Here is my code thus far, feel free to use it.

<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=..." type="text/javascript"></script>
                <script type="text/javascript" src="http://
www.google.com/jsapi"></script>
                <script type="text/javascript">
                google.load("visualization", "1", {packages:
["table"]});
                google.setOnLoadCallback(drawTable);
                var data;
                //Setting up the table
                function drawTable() {
                    data = new google.visualization.DataTable();
                    data.addColumn('string', 'Id');
                    data.addColumn('string', 'PI');
                    data.addColumn('string', 'Cruise Info');
                    data.addColumn('string', 'Date and Time');
                    data.addColumn('string', 'Latitude');
                    data.addColumn('string', 'Longitude');
                    data.addColumn('string', 'Depth');
                    data.addColumn('string', 'Name');
                    data.addColumn('string', 'Value');
                    data.addRows(23);
                    GDownloadUrl("...",
function(dataXML, responseCode) {
                        if(responseCode == 200) {
                            var xml = GXml.parse(dataXML);
                            var idD =
xml.documentElement.getElementsByTagName("data_id");
                            var piD =
xml.documentElement.getElementsByTagName("pi");
                            var ciD =
xml.documentElement.getElementsByTagName("cruise");
                            var dtD =
xml.documentElement.getElementsByTagName("date_time");
                            var latD =
xml.documentElement.getElementsByTagName("latitude");
                            var lonD =
xml.documentElement.getElementsByTagName("longitude");
                            var depD =
xml.documentElement.getElementsByTagName("depth");
                            var nameD =
xml.documentElement.getElementsByTagName("name");
                            var valD =
xml.documentElement.getElementsByTagName("value");
                            for (var i = 0; i < idD.length; i++) {
                                id = idD[i].childNodes[0].nodeValue;
                                pi = piD[i].childNodes[0].nodeValue;
                                ci = ciD[i].childNodes[0].nodeValue;
                                dt = dtD[i].childNodes[0].nodeValue;
                                lat = latD[i].childNodes
[0].nodeValue;
                                lon = lonD[i].childNodes
[0].nodeValue;
                                dep = depD[i].childNodes
[0].nodeValue;
                                name = nameD[i].childNodes
[0].nodeValue;
                                val = valD[i].childNodes
[0].nodeValue;
                                data.setCell(i, 0, String(id));
                                data.setCell(i, 1, String(pi));
                                data.setCell(i, 2, String(ci));
                                data.setCell(i, 3, String(dt));
                                data.setCell(i, 4, String(lat));
                                data.setCell(i, 5, String(lon));
                                data.setCell(i, 6, String(dep));
                                data.setCell(i, 7, String(name));
                                data.setCell(i, 8, String(val));
                          }
                        } else if (responseCode == -1) {
                            alert("Data request timed out. Please try
later.");
                        } else {
                            alert("Request resulted in error. Check
XML file is retrievable.");
                        }
                    });
                    var table = new google.visualization.Table
(document.getElementById('table_div'));
                    table.draw(data, {showRowNumber: true});
                }
                </script>
                <div id="table_div"></div>

It works, albeit some problems.
1. The table prints out, however, all I get is a blank table (but the
values are there). I need to be able to see it when the page loads. I
can see the populated table by clicking on one of the column names
but
obviously that's not what I would like to have.
   Problem: Page Load -> Empty Table
   Temporary Solution: Page Load -> Empty Table-> Click on Column
Name
-> Can see all the table values
   Need Solution: Page Load -> Populated Table
2. Dynamic rows. Would like to be able to set the row size based on
size of returned results. Cannot do so right now. For example: doing
data.addRows(idD.length) is not possible.
   Problem: No dynamic row count
   Temporary Solution: Hard code row count
   Need Solution: Dynamic Rows.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to