add very basic support for gviz DataTable input
authorDan Vanderkam <danvdk@gmail.com>
Thu, 27 Aug 2009 18:41:08 +0000 (18:41 +0000)
committerDan Vanderkam <danvdk@gmail.com>
Thu, 27 Aug 2009 18:41:08 +0000 (18:41 +0000)
dygraph.js
tests/data.js
tests/gviz.html [new file with mode: 0644]
tests/hourly.html

index fde3c5a..2ba42c9 100644 (file)
@@ -1059,6 +1059,50 @@ DateGraph.prototype.parseCSV_ = function(data) {
 };
 
 /**
+ * Parses a DataTable object from gviz.
+ * The data is expected to have a first column that is either a date or a
+ * number. All subsequent columns must be numbers. If there is a clear mismatch
+ * between this.xValueParser_ and the type of the first column, it will be
+ * fixed. Returned value is in the same format as return value of parseCSV_.
+ * @param {Array.<Object>} data See above.
+ * @private
+ */
+DateGraph.prototype.parseDataTable_ = function(data) {
+  var cols = data.getNumberOfColumns();
+  var rows = data.getNumberOfRows();
+
+  // Read column labels
+  var labels = [];
+  for (var i = 0; i < cols; i++) {
+    labels.push(data.getColumnLabel(i));
+  }
+  labels.shift();  // a "date" parameter is assumed.
+  this.labels_ = labels;
+  // regenerate automatic colors.
+  this.setColors_(this.attrs_);
+  this.renderOptions_.colorScheme = this.colors_;
+  MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
+  MochiKit.Base.update(this.layoutOptions_, this.attrs_);
+
+  // Assume column 1 is a date type for now.
+  if (data.getColumnType(0) != 'date') {
+    alert("only date type is support for column 1 of DataTable input.");
+    return null;
+  }
+
+  var ret = [];
+  for (var i = 0; i < rows; i++) {
+    var row = [];
+    row.push(data.getValue(i, 0).getTime());
+    for (var j = 1; j < cols; j++) {
+      row.push(data.getValue(i, j));
+    }
+    ret.push(row);
+  }
+  return ret;
+}
+
+/**
  * Get the CSV data. If it's in a function, call that function. If it's in a
  * file, do an XMLHttpRequest to get it.
  * @private
@@ -1067,6 +1111,11 @@ DateGraph.prototype.start_ = function() {
   if (typeof this.file_ == 'function') {
     // Stubbed out to allow this to run off a filesystem
     this.loadedEvent_(this.file_());
+  } else if (typeof this.file_ == 'object' &&
+             typeof this.file_.getColumnRange == 'function') {
+    // must be a DataTable from gviz.
+    this.rawData_ = this.parseDataTable_(this.file_);
+    this.drawGraph_(this.rawData_);
   } else {
     var req = new XMLHttpRequest();
     var caller = this;
index c843d13..68b6187 100644 (file)
@@ -432,14 +432,3 @@ return "" +
 "20061129,1.41093474427,0.495309102312,3.02013422819,0.701020603129";
 }
 
-function HourlyData() {
-return "" +
-"Date,A,B\n" +
-"2009/07/12 00:00:00,3,4\n" +
-"2009/07/12 01:00:00,5,6\n" +
-"2009/07/12 02:00:00,7,6\n" +
-"2009/07/12 03:00:00,6,5\n" +
-"2009/07/12 04:00:00,4,7\n" +
-"2009/07/12 05:00:00,3,6\n" +
-"2009/07/12 06:00:00,4,6"
-}
diff --git a/tests/gviz.html b/tests/gviz.html
new file mode 100644 (file)
index 0000000..812ff3f
--- /dev/null
@@ -0,0 +1,47 @@
+<html>
+  <head>
+    <title>noise</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../dygraph-combined.js"></script>
+    <script type="text/javascript" src="../dygraph.js"></script>
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      google.load('visualization', '1', {packages: ['linechart']});
+
+      function drawVisualization() {
+        data = new google.visualization.DataTable();
+        data.addColumn('date', 'Date');
+        data.addColumn('number', 'Column A');
+        data.addColumn('number', 'Column B');
+        data.addRows(4);
+        data.setCell(0, 0, new Date("2009/07/01"));
+        data.setCell(0, 1, 1);
+        data.setCell(0, 2, 7);
+        data.setCell(1, 0, new Date("2009/07/08"));
+        data.setCell(1, 1, 2);
+        data.setCell(1, 2, 4);
+        data.setCell(2, 0, new Date("2009/07/15"));
+        data.setCell(2, 1, 3);
+        data.setCell(2, 2, 3);
+        data.setCell(3, 0, new Date("2009/07/22"));
+        data.setCell(3, 1, 4);
+        data.setCell(3, 2, 0);
+
+        new google.visualization.LineChart(
+            document.getElementById('gviz')). draw(data, null);  
+
+        new DateGraph(document.getElementById('dygraphs'), data, null, {});
+      }
+      google.setOnLoadCallback(drawVisualization);
+    </script>
+  </head>
+  <body>
+    <p>gviz line chart:</p>
+    <div id="gviz" style="width:600px; height:300px;"></div>
+
+    <p>same data drawn using dygraphs:</p>
+    <div id="dygraphs" style="width:600px; height:300px;"></div>
+  </body>
+</html>
index 31bd15b..7465e51 100644 (file)
     <script type="text/javascript">
       g = new DateGraph(
             document.getElementById("g"),
-            HourlyData, null, {}
+            function HourlyData() {
+              return "" +
+              "Date,A,B\n" +
+              "2009/07/12 00:00:00,3,4\n" +
+              "2009/07/12 01:00:00,5,6\n" +
+              "2009/07/12 02:00:00,7,6\n" +
+              "2009/07/12 03:00:00,6,5\n" +
+              "2009/07/12 04:00:00,4,7\n" +
+              "2009/07/12 05:00:00,3,6\n" +
+              "2009/07/12 06:00:00,4,6"
+            }, null, {}
           );
 
       gm = new DateGraph(