Google O Meter > Linked to Google Sheet

69 views
Skip to first unread message

Dave Lalande

unread,
Mar 27, 2012, 12:38:16 PM3/27/12
to google-c...@googlegroups.com
Hello,  I am trying to get a meter to talk to a Google Sheet.  I have
set up a sheet where Directors are reporting metrics and I want to
display a metric's monthly progress in 4 color shades (red=bad,
yellow=under goal, green=goal, blue=exceeding goal).  I just start
this process of learning how to use Google O Meter and I am having
problems with how to get the line/arrow to represent the monthly
number in the sheet (i.e. cell B4)

Ideally, the label above the arrow would represent the progress (bad,
under goal, goal, exceeding goal)

Here is my code.... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" src="http://www.google.com/jsapi"></script>
<title>ED Monthly Metrics</title>
</head>

<body>

<form id="form1" runat="server">

   
<div id="chart"></div>
   <script type="text/javascript">
      var queryString = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(1);

          dataTable.addColumn('number');
          dataTable.setValue();

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart'));
        var options = {
          chxl: '0:|0|40|80|120',
          chxp: '',
          chxr: '0,0,120',
          chxs: '',
          chxtc: '',
          chxt: 'y',
          chs: '320x160',
          cht: 'gm',
          chco: 'FF9900',
          chd: 't:',
          chdl: '',
          chl: 'Metric'
        };
        vis.draw(dataTable, options);
      }

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

      google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback);

    </script>    

</form>

</body>

</html>


Thanks for any help you can lend to move me along.

Dave

Dave Lalande

unread,
Mar 27, 2012, 2:50:47 PM3/27/12
to google-c...@googlegroups.com
I guess I need the query string parameters in:

 var queryString = '';

but I'm not sure how to query for one number?
Reply all
Reply to author
Forward
0 new messages