Merge branch 'master' into plotter
[dygraphs.git] / gadget.xml
CommitLineData
36615faf
DV
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, {
36615faf
DV
89 });
90 };
91
92 </script>
93
94 ]]>
95 </Content>
96</Module>