<script type="text/javascript" src="../tests/scientific_notation.js"></script>
<script type="text/javascript" src="../tests/pathological_cases.js"></script>
<script type="text/javascript" src="../tests/date_formats.js"></script>
+ <script type="text/javascript" src="../tests/formats.js"></script>
<script type="text/javascript" src="../tests/update_options.js"></script>
<script type="text/javascript" src="../tests/utils_test.js"></script>
<script type="text/javascript" src="../tests/multiple_axes.js"></script>
--- /dev/null
+/**
+ * @fileoverview Tests for data formats.
+ *
+ * @author konigsberg@google.com (Robert Konigsberg)
+ */
+var FormatsTestCase = TestCase("formats");
+
+FormatsTestCase.prototype.setUp = function() {
+ document.body.innerHTML = "<div id='graph'></div>";
+};
+
+FormatsTestCase.prototype.tearDown = function() {
+};
+
+FormatsTestCase.prototype.dataString =
+ "X,Y\n" +
+ "0,-1\n" +
+ "1,0\n" +
+ "2,1\n" +
+ "3,0\n";
+
+FormatsTestCase.prototype.dataArray =
+ [[0,-1],
+ [1,0],
+ [2,1],
+ [3,0]];
+
+FormatsTestCase.prototype.testCsv = function() {
+ var data = this.dataString;
+ var graph = document.getElementById("graph");
+ var g = new Dygraph(graph, data, {});
+ this.assertData(g);
+};
+
+FormatsTestCase.prototype.testArray = function() {
+ var data = this.dataArray;
+ var graph = document.getElementById("graph");
+ var g = new Dygraph(graph, data, {});
+ this.assertData(g);
+};
+
+FormatsTestCase.prototype.testFunctionReturnsCsv = function() {
+ var string = this.dataString;
+ var data = function() { return string; };
+
+ var graph = document.getElementById("graph");
+ var g = new Dygraph(graph, data, {});
+ // this.assertData(g);
+ console.log("x");
+};
+
+FormatsTestCase.prototype.testFunctionDefinesArray = function() {
+ var array = this.dataArray;
+ var data = function() { return array; }
+
+ var graph = document.getElementById("graph");
+ var g = new Dygraph(graph, data, {});
+ this.assertData(g);
+};
+
+FormatsTestCase.prototype.assertData = function(g) {
+ var expected = this.dataArray;
+
+ assertEquals(4, g.numRows());
+ assertEquals(2, g.numColumns());
+
+ for (var i = 0; i < 4; i++) {
+ for (var j = 0; j < 2; j++) {
+ assertEquals(expected[i][j], g.getValue(i, j));
+ }
+ }
+}
function() { return x; }
</code>
+ Functions can return strings, arrays, data tables, URLs, or any other data type.
+
<a name="datatable"><h3>DataTable</h3>
<p>You can also specify a Google Visualization Library <a
href="http://code.google.com/apis/visualization/documentation/reference.html#DataTable">DataTable</a>
* @private
*/
Dygraph.prototype.start_ = function() {
- if (typeof this.file_ == 'function') {
- // CSV string. Pretend we got it via XHR.
- this.loadedEvent_(this.file_());
- } else if (Dygraph.isArrayLike(this.file_)) {
- this.rawData_ = this.parseArray_(this.file_);
+ var data = this.file_;
+
+ // Functions can return references of all other types.
+ if (typeof data == 'function') {
+ data = data();
+ }
+
+ if (Dygraph.isArrayLike(data)) {
+ this.rawData_ = this.parseArray_(data);
this.predraw_();
- } else if (typeof this.file_ == 'object' &&
- typeof this.file_.getColumnRange == 'function') {
+ } else if (typeof data == 'object' &&
+ typeof data.getColumnRange == 'function') {
// must be a DataTable from gviz.
- this.parseDataTable_(this.file_);
+ this.parseDataTable_(data);
this.predraw_();
- } else if (typeof this.file_ == 'string') {
+ } else if (typeof data == 'string') {
// Heuristic: a newline means it's CSV data. Otherwise it's an URL.
- if (this.file_.indexOf('\n') >= 0) {
- this.loadedEvent_(this.file_);
+ if (data.indexOf('\n') >= 0) {
+ this.loadedEvent_(data);
} else {
var req = new XMLHttpRequest();
var caller = this;
}
};
- req.open("GET", this.file_, true);
+ req.open("GET", data, true);
req.send(null);
}
} else {
- this.error("Unknown data format: " + (typeof this.file_));
+ this.error("Unknown data format: " + (typeof data));
}
};
<script type="text/javascript" src="../../dygraph-dev.js"></script>
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="palette.js"></script>
+ <script type="text/javascript" src="samples.js"></script>
<script type="text/javascript" src="index.js"></script>
- <link rel="stylesheet" type="text/css" href="palette.css" />
+ <link rel="stylesheet" type="text/css" href="index.css" />
<style>
</style>
</head>
<table>
<tr>
<td valign="top">
+ <div id="selector">
+ <select id="dataSelector">
+ <option value="1">Interesting Shapes</option>
+ <option value="2">Many Points</option>
+ <option value="3">Mercedes</option>
+ <option value="4">Audi</option>
+ </select>
+ </div>
<div id="graph"></div>
<div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
Other messages:
</tr>
</table>
</body>
- <script type="text/javascript">start();</script>
+ <script type="text/javascript">Index.start();</script>
</html>
"use strict";
-function draw(element, options) {
- try {
- element.innerHTML = "";
- element.removeAttribute("style");
- var g = new Dygraph(
- element,
- function() {
- var zp = function(x) { if (x < 10) return "0"+x; else return x; };
- var r = "date,parabola,line,another line,sine wave\n";
- for (var i=1; i<=31; i++) {
- r += "201110" + zp(i);
- r += "," + 10*(i*(31-i));
- r += "," + 10*(8*i);
- r += "," + 10*(250 - 8*i);
- r += "," + 10*(125 + 125 * Math.sin(0.3*i));
- r += "\n";
- }
- return r;
- }, options
- );
-
- // These don't work yet.
- g.updateOptions({
- labelsDiv: 'status',
- });
- } catch(err) {
- addMessage(err);
- throw(err);
- } finally {
+var Index = {};
+
+Index.splitVariables = function() { // http://www.idealog.us/2006/06/javascript_to_p.html
+ var query = window.location.search.substring(1);
+ var args = {};
+ var vars = query.split("&");
+ for (var i = 0;i < vars.length; i++) {
+ var pair = vars[i].split("=");
+ args[pair[0]] = pair[1];
}
+ return args;
}
-function addMessage(text) {
+Index.draw = function(element, data, options) {
+ element.innerHTML = "";
+ element.removeAttribute("style");
+ var g = new Dygraph(
+ element,
+ data,
+ options
+ );
+
+ // These don't work yet.
+ g.updateOptions({
+ labelsDiv: 'status',
+ });
+}
+
+Index.addMessage = function(text) {
var messages = document.getElementById("messages");
messages.innerText = messages.innerText + text + "\n";
}
-function start() {
- var options = {
- colors: [
- "rgb(51,204,204)",
- "rgb(255,100,100)",
- "#00DD55",
- "rgba(50,50,200,0.4)"
- ],
- labelsSeparateLines: true,
- labelsKMB: true,
- legend: 'always',
- width: 640,
- height: 480,
- title: 'Interesting Shapes',
- xlabel: 'Date',
- ylabel: 'Count',
- axisLineColor: 'white',
- drawXGrid: false,
- pointClickCallback: function() { alert("p-click!"); },
- };
-
+Index.start = function() {
+ var variables = Index.splitVariables();
+ var sampleIndex = variables["sampleIndex"];
+ if (!(sampleIndex)) {
+ sampleIndex = 0;
+ }
+ var sample = Samples.samples[sampleIndex];
+ var data = sample.data;
var redraw = function() {
- draw(document.getElementById("graph"), palette.read());
+ Index.draw(document.getElementById("graph"), data, palette.read());
}
var palette = new Palette();
palette.create(document, document.getElementById("optionsPalette"));
- palette.write(options);
+ palette.write(sample.options);
palette.onchange = redraw;
palette.filterBar.focus();
redraw();
projects / dygraphs.git / commitdiff