Vizualyse: Google Docs

Showing posts with label Google Docs. Show all posts

Wednesday, 23 April 2014

15. Motion Charts

Watch this video

Then make your own motion charts by either writing code, or better still simply using Google Docs.

was created with data on Tata Group stock prices from Quandl and residing on this Google Docs sheet

Wednesday, 18 December 2013

5 State Data in Google GeoChart

In this map, we use data from States ( see the spreadsheet ) and this too can be mapped into a map of India. However state level maps are not available and the data for a particular state is mapped into a point ( or marker) in the state.

Once again we observe the limitations of not being able to show more than two data points for each state.


<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMapTR);
    
    function drawMarkersMapTR() {
            var query = new google.visualization.Query(
      'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=xxxxxxxxxxxxxx&sheet=MilkProduction&range=B2:H37&headers=1');
      query.setQuery('select B,C,D'); 
      query.send(handleQueryResponseTR);
    };
    
    function handleQueryResponseTR(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  
  var options = {
        region: 'IN',
        displayMode: 'markers', 
        width : 600,
        height : 400
      };

  var data = response.getDataTable();
  var chart = new google.visualization.GeoChart(document.getElementById('chart_divTR'));
  chart.draw(data, options );
}

    </script>
  </head>
  <body>
    <div id="chart_divTR"></div>
  </body>

Tuesday, 17 December 2013

4 Plotting Cities on a Map along with Data

In this example, we have data about certain of India -- data about number of registered vehicles in different years -- in a Google Docs spreadsheet. We use this data to draw a Google GeoChart.

In the code please observe the following points

The spreadsheet doc is identified as https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedE5mUHN4QVRLNzdldEpwZnAyNy1abUE
The sheets as identified by sheet=CityWise2
The range is identified by range=B2:M23
The columns being selected are identified by query.setQuery('select B,D,E');
The region in the map is 'IN' that is India
The displayMode is "markers" .. which means towns and cities, had this been region we would have got full states


<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=myAPIkeyhere&callback=initMap"
  type="text/javascript"></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap02);
    
    function drawMarkersMap02() {
            var query = new google.visualization.Query(
      'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=xxxxxxxxxxxxxxx&sheet=CityWise2&range=B2:M23&headers=1');
      query.setQuery('select B,D,E'); 
      query.send(handleQueryResponse02);
    };
    
    function handleQueryResponse02(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  
  var options = {
        datalessRegionColor : 'FFFF99',
        region: 'IN',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

  var data = response.getDataTable();
  var chart = new google.visualization.GeoChart(document.getElementById('pm_div4'));
  chart.draw(data, options );
}

    </script>
  </head>
  <body>
    <div id="pm_div4" style="width: 600px; height: 500px;"></div>
  </body>

In creating this chart in this blog, we faced an unusual error. When viewed as an independent post, the chart was visible but when seen as a part of the blog, the chart was not drawn ?

What can be the reason ? The reason was that we had the same function name in two different posts and so when two posts were visible together on the same page, the codes were interefering with each other. So we simply placed an arbitrary suffix values to the function names and it worked.

The same code can be embedded in a non-blog web post like this.

A similar map can be created using (a) public website data and (b) R statistical tool.

Google Map API
Subsequent to the creation of these posts, Google has made it mandatory for all new domains ( or new websites, new blogs) to incorporate a Google Maps API into the HTML code :

<script async defer src="https://maps.googleapis.com/maps/api/js?key=myAPIkeyhere&callback=initMap"
  type="text/javascript"></script>

this API key can be obtained from this Google page.

Wednesday, 11 December 2013

3 Specifying Range of Data and Selecting Columns : Google Charts with Google Docs data

In the previous post, we had described how to create a basic Google Chart from data stored in a Google Doc spreadsheet. In that example, the data was picked up from the default first sheet of the spreadsheet and the data was located in the top left corner. In reality, the data could be stored in any of the other sheets and could be located in any portion of the sheet.

In this example, the Google Docs spreadsheet, has four sheets. For the purpose of drawing our chart we would like to specify that

Data to be picked up from sheet named "Demo3"
Within this sheet, from the range C3:I23
Within this range from the columns C, D, G, H
Given the nature of the data we would like to multiply column G by 1000 before it is plotted

If you look at the spreadsheet in a browser, the URL will show up as

https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodDNvMXdPX1NqanlyLVdtbEE1dlJ3LUE&usp=drive_web#gid=3

For our purpose the URL will be truncated as follows and used in the program

https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodDNvMXdPX1NqanlyLVdtbEE1dlJ3LUE

This URL can also be obtained by going to the option File=>Publish to the Web

The chart will look as follows

Sheet 2 Chart - Sheet, Range, Cols

this chart has been generated by embedding the following code in this blog. It can also be embedded in any other HTML page.


<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});

google.setOnLoadCallback(drawChart01);


function drawChart01() {


 var query = new google.visualization.Query(
      'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodDNvMXdPX1NqanlyLVdtbEE1dlJ3LUE&sheet=Demo3&range=C3:I12&headers=1');
      query.setQuery('select C,D,1000*G,H'); 
  query.send(handleQueryResponse01);
}

function handleQueryResponse01(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  
  var options = {
          title: 'Industrial Production Index',
          vAxis: {title: 'Sector',  titleTextStyle: {color: 'red'}},
          width: 400,
          height : 600
        };


  var data = response.getDataTable();
  var chart = new google.visualization.BarChart(document.getElementById('ChartSpan4'));
  chart.draw(data, options );
}



</script>

<title>Sheet 2 Chart - Sheet, Range, Cols</title>
</head>

<body>

<span id='ChartSpan4'></span>
</body>

Sunday, 8 December 2013

2 Creating a Google Chart using data pulled from Google Docs

I have data lying in this Google Docs spreadsheet. that I want to display in this blog post or in any other html page using Google Charts.

The first task is to publish this data on the web and make it visible to anyone who has the URL.

Next take the following piece of code and insert it into your website.


<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var query = new google.visualization.Query(
      'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodGJBQkRpX0Rrdjc2OXZMZmZmNzk3WGc&usp=drive_web#gid=0');

  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var options = {'title':'How Much PIZZA I Ate Last Night',
                       'width':400,
                       'height':600};
  var chart = new google.visualization.PieChart(document.getElementById('columnchart'));
  chart.draw(data, options);
}
</script>

<title>Data from a Spreadsheet</title>
</head>

<body>
<span id='columnchart'></span>
</body>

Note the URL of the spreadsheet : https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodGJBQkRpX0Rrdjc2OXZMZmZmNzk3WGc&usp=drive_web#gid=0 and use this in the function drawChart()

and this what you get :
....................................

Data from a Spreadsheet
....................
the same code can be embedded in a no-blog HTML page and loaded into a webserver as seen here.

Pages