gadget.xml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <Module>
   3
   4   <ModulePrefs
   5       title="dygraphs Gadget"
   6       description="Interactive, zoomable chart"
   7       author="Dan Vanderkam"
   8       author_email="danvdk@gmail.com"
   9       >
  10       <!-- TODO(danvk): change these -->
  11       <!--
  12       screenshot="http://www.google.com/ig/modules/simple-table.png"
  13       thumbnail="http://www.google.com/ig/modules/simple-table-thm.png">
  14       -->
  15     <Require feature="idi" />
  16     <Require feature="locked-domain" />
  17   </ModulePrefs>
  18
  19   <UserPref name="_table_query_url" display_name="Data source url" required="true"/>
  20   <UserPref name="_table_query_refresh_interval" display_name="Data refresh interval (minutes)" default_value="300" datatype="enum" required="false">
  21     <EnumValue value="0" display_value="Do not refresh"/>
  22     <EnumValue value="60" display_value="1"/>
  23     <EnumValue value="300" display_value="5"/>
  24     <EnumValue value="1800" display_value="30"/>
  25   </UserPref>
  26   <!--
  27   This is a sample gadget, that uses the Google Visualization API to read data
  28   from a data source, and displays it as an html table.
  29   -->
  30
  31   <Content type="html"><![CDATA[
  32
  33   <!-- Load the Google common loader, that is later used to load the Visualization API. -->
  34   <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  35   <script src="http://danvk.org/dygraphs/dygraph-combined.js" type="text/javascript"></script>
  36
  37   <div id="chartdiv" style="overflow: auto;"><img src="http://www.google.com/ig/images/spinner.gif" /></div>
  38
  39   <script>
  40     var gadgetHelper = null;
  41     var table = null;
  42
  43     _IG_RegisterOnloadHandler(loadVisualizationAPI);
  44
  45     /**
  46      * Load the Google Visualization API
  47      */
  48     function loadVisualizationAPI() {
  49       google.load("visualization", "1");
  50       google.setOnLoadCallback(sendQuery);
  51     }
  52
  53     /**
  54      * Create a query from the user prefs, and then send it to the data source.
  55      * This method is called once the visualization API is fully loaded.
  56      * Note that in the last line, a callback function is specified to be
  57      * called once the response is received from the data source.
  58      */
  59     function sendQuery() {
  60       var prefs = new _IG_Prefs(); // User preferences
  61       var chartDiv = _gel('chartdiv');
  62       chartDiv.style.width = document.body.clientWidth + 'px';
  63       chartDiv.style.height = document.body.clientHeight + 'px';
  64       chart = new DateGraph.GVizChart(chartDiv);
  65
  66       gadgetHelper = new google.visualization.GadgetHelper();
  67       var query = gadgetHelper.createQueryFromPrefs(prefs);
  68       query.send(handleQueryResponse);
  69     }
  70
  71     /**
  72      * Query response handler function.
  73      * Called by the Google Visualization API once the response is received.
  74      * Takes the query response and formats it as a table.
  75      */
  76     function handleQueryResponse(response) {
  77       // Use the visualization GadgetHelper class to validate the data, and
  78       // for error handling.
  79       if (!gadgetHelper.validateResponse(response)) {
  80         // Default error handling was done, just leave.
  81         return;
  82       };
  83       var data = response.getDataTable();
  84
  85       // Take the data table from the response, and format it.
  86       // var options = {showRowNumber: true};
  87       var prefs = new _IG_Prefs(); // User preferences
  88       chart.draw(data, {
  89         xValueParser: function(x) { return parseFloat(x); },
  90         xValueFormatter: function(x) { return x; },
  91         xTicker: DateGraph.prototype.numericTicks
  92       });
  93     };
  94
  95   </script>
  96
  97   ]]>
  98   </Content>
  99 </Module>