title="dygraphs Gadget"
description="Interactive, zoomable chart"
author="Dan Vanderkam"
- author_email="danvdk@gmail.com"
+ author_email="dan@dygraphs.com"
+ thumbnail="http://dygraphs.com/thumbnail.png"
+ screenshot="http://dygraphs.com/screenshot.png"
+ author_location="US"
>
- <!-- TODO(danvk): change these -->
- <!--
- screenshot="http://www.google.com/ig/modules/simple-table.png"
- thumbnail="http://www.google.com/ig/modules/simple-table-thm.png">
- -->
<Require feature="idi" />
<Require feature="locked-domain" />
</ModulePrefs>
<EnumValue value="300" display_value="5"/>
<EnumValue value="1800" display_value="30"/>
</UserPref>
- <!--
- This is a sample gadget, that uses the Google Visualization API to read data
- from a data source, and displays it as an html table.
- -->
+ <UserPref name="_dg_rollPeriod" display_name="Roll Period" required="false" default_value="1" />
+ <UserPref name="_dg_showRoller" display_name="Show Roller" required="false" default_value="false" datatype="bool" />
+ <UserPref name="_dg_minY" display_name="Min Y Value" required="false" default_value="" />
+ <UserPref name="_dg_maxY" display_name="Max Y Value" required="false" default_value="" />
+ <UserPref name="_dg_kmb" display_name="KMB labels" required="false" default_value="false" datatype="bool" />
+ <UserPref name="_dg_errorbars" display_name="Error Bars" required="false" default_value="false" datatype="bool" />
+ <UserPref name="_dg_fillGraph" display_name="Fill Chart" required="false" default_value="false" datatype="bool" />
<Content type="html"><![CDATA[
<!-- Load the Google common loader, that is later used to load the Visualization API. -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
- <script src="http://danvk.org/dygraphs/dygraph-combined.js" type="text/javascript"></script>
+ <script src="http://dygraphs.com/dygraph-combined.js" type="text/javascript"></script>
<div id="chartdiv" style="overflow: auto;"><img src="http://www.google.com/ig/images/spinner.gif" /></div>
<script>
var gadgetHelper = null;
- var table = null;
+ var table = null;
+ var kPadding = 5; // pixels of padding on any side of the chart.
_IG_RegisterOnloadHandler(loadVisualizationAPI);
function sendQuery() {
var prefs = new _IG_Prefs(); // User preferences
var chartDiv = _gel('chartdiv');
- chartDiv.style.width = document.body.clientWidth + 'px';
- chartDiv.style.height = document.body.clientHeight + 'px';
+ chartDiv.style.width = (document.body.clientWidth - 2 * kPadding) + 'px';
+ chartDiv.style.height = (document.body.clientHeight - 2 * kPadding) + 'px';
+ chartDiv.style.left = kPadding + 'px';
+ chartDiv.style.top = kPadding + 'px';
+ chartDiv.style.position = 'absolute';
chart = new DateGraph.GVizChart(chartDiv);
gadgetHelper = new google.visualization.GadgetHelper();
// Take the data table from the response, and format it.
// var options = {showRowNumber: true};
var prefs = new _IG_Prefs(); // User preferences
- chart.draw(data, {
- });
+ var showRoller = prefs.getBool("_dg_showRoller");
+ var rollPeriod = prefs.getInt("_dg_rollPeriod");
+ var labelsKMB = prefs.getBool("_dg_kmb");
+ var errorBars = prefs.getBool("_dg_errorbars");
+ var fillGraph = prefs.getBool("_dg_fillGraph");
+ var opts = {
+ showRoller: showRoller,
+ rollPeriod: rollPeriod,
+ labelsKMB: labelsKMB,
+ errorBars: errorBars,
+ fillGraph: fillGraph
+ };
+
+ var minY = prefs.getString("_dg_minY");
+ var maxY = prefs.getString("_dg_maxY");
+ if (minY && maxY) {
+ opts.valueRange = [parseInt(minY), parseInt(maxY)];
+ }
+
+ chart.draw(data, opts);
};
</script>