Excel Table to GeoChart HTML

Rossco P

unread,

Jul 14, 2011, 6:17:42 AM7/14/11

to Google Visualization API

Hi All,

I'm not really familiar with HTML but do have a table of data that I
want to visualise in a Geo Chart.

Can anyone give me any pointers or send me anywhere that will help me
convert my table to the correct HTML format (if of course this is the
correct approach).

Thanks,
Ross.

Roni Biran

unread,

Jul 14, 2011, 6:31:41 AM7/14/11

to google-visua...@googlegroups.com

Hi Ross,

HTML is not an issue here, since all the visualization is done via the Google Visualization API which is in JavaScript.

You can see a specific example on this URL: http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Example

Or try yourself in the API Playground here: http://code.google.com/apis/ajax/playground/?type=visualization#geo_chart

Roni

--
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.

Rossco P

unread,

Jul 14, 2011, 6:54:32 AM7/14/11

to Google Visualization API

Hi Roni,

Thanks for your reponse.

I have looked at both of those but still dont understand I would
convert a table of data into that format.

Ross.

On Jul 14, 11:31 am, Roni Biran <roni.bi...@gmail.com> wrote:
> Hi Ross,
>
> HTML is not an issue here, since all the visualization is done via the
> Google Visualization API which is in JavaScript.

> You can see a specific example on this URL:http://code.google.com/apis/chart/interactive/docs/gallery/geochart.h...
> Or try yourself in the API Playground here:http://code.google.com/apis/ajax/playground/?type=visualization#geo_c...

Roni Biran

unread,

Jul 14, 2011, 7:06:42 AM7/14/11

to google-visua...@googlegroups.com

Hi Ross,

In that case what you can do is upload your Excel sheet into Google Docs and use it as a source for your charts.

Here is a sample taken from the Playground and modified for your needs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Google Visualization API Sample</title>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>

  <script type="text/javascript">

    google.load('visualization', '1', {packages: ['geochart']});

        function drawVisualization() {

          var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=tkHNVBktT9jibFskL1RB73g');

          query.send(handleQueryResponse);

        }
        
        function handleQueryResponse(response) {

          if (response.isError()) {

            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

            return;
          }

          var data = response.getDataTable();

          visualization = new google.visualization.GeoChart(document.getElementById('visualization'));

          visualization.draw(data, null);

        }

    google.setOnLoadCallback(drawVisualization);

  </script>

</head>

<body style="font-family: Arial;border: 0 none;">

<div id="visualization"></div>

</body>

</html>

​

You can look at the Google Doc on this URL: https://spreadsheets.google.com/spreadsheet/ccc?key=0AqR0DYOLFMKndGtITlZCa3RUOWppYkZza0wxUkI3M2c&hl=en_US#gid=0

Hope that helped,

Roni

Rossco P

unread,

Jul 14, 2011, 7:39:38 AM7/14/11

to Google Visualization API

I do grasp the basics of this.

Are saying I can copy and paste part of what you have written into the
playground and I should see a map?

Ross.

On Jul 14, 12:06 pm, Roni Biran <roni.bi...@gmail.com> wrote:
> Hi Ross,
>

> You can look at the Google Doc on this URL:https://spreadsheets.google.com/spreadsheet/ccc?key=0AqR0DYOLFMKndGtI...

Roni Biran

unread,

Jul 14, 2011, 9:44:16 AM7/14/11

to google-visua...@googlegroups.com

Hi Ross,

You got that right.

However, since not all sections are using the same package, you must first click on the GeoChart on the left hand side and then you can paste the relevant functions (drawVisualization and handleQueryResponse in the code I posted earlier) and play with it.