dygraphs JavaScript charting library
Copyright (c) 2006-, Dan Vanderkam.
+Documentation: http://dygraphs.com/
Support: http://groups.google.com/group/dygraphs-users
Source: http://github.com/danvk/dygraphs
Issues: http://code.google.com/p/dygraphs/
- Compatible with the Google Visualization API
Demo
-For a gallery and documentation, see http://danvk.org/dygraphs/
+For a gallery and documentation, see http://dygraphs.com/
Minimal Example
<html>
</tr>
<tr>
<td><strong>zoomCallback</strong></td>
- <td><code>function(minDate,<br/>maxDate,<br/>minValue,<br/>maxValue){}</code></td>
+ <td><code>function(minDate,<br/>maxDate,<br/>yRanges){}</code></td>
<td><code>null</code></td>
- <td>A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. minValue and maxValue are y-axis range values.
+ <td>A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each y-axis.
<div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/zoom.html">zoom</a></div>
</td>
</tr>
This is not the file you are looking for.
-A reasonably up-to-date version can be found at http://danvk.org/dygraphs/dygraph-combined.js
+A reasonably up-to-date version can be found at http://dygraphs.com/dygraph-combined.js
dygraph-combined.js is a "packed" version of the larger dygraphs JS files. It is
smaller and loads more quickly, but is harder to debug.
And error bars will be calculated automatically using a binomial distribution.
- For further documentation and examples, see http://www.danvk.org/dygraphs
+ For further documentation and examples, see http://dygraphs.com/
*/
this.zoomed_x_ = true;
this.drawGraph_();
if (this.attr_("zoomCallback")) {
- var yRange = this.yAxisRange();
- this.attr_("zoomCallback")(minDate, maxDate, yRange[0], yRange[1]);
+ this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
}
};
// Parse the x as a float or return null if it's not a number.
var parseFloatOrNull = function(x) {
var val = parseFloat(x);
- return isNaN(val) ? null : val;
+ // isFinite() returns false for NaN and +/-Infinity.
+ return isFinite(val) ? val : null;
};
var xParser;
if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
outOfOrder = true;
}
+
+ // Strip out infinities, which give dygraphs problems later on.
+ for (var j = 0; j < row.length; j++) {
+ if (!isFinite(row[j])) row[j] = null;
+ }
ret.push(row);
}
description="Interactive, zoomable chart"
author="Dan Vanderkam"
author_email="danvdk@gmail.com"
- thumbnail="http://danvk.org/dygraphs/thumbnail.png"
+ thumbnail="http://dygraphs.com/thumbnail.png"
>
<!-- TODO(danvk): change these -->
<!--
<!-- 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>
s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
},
- zoomCallback: function(minX, maxX) {
- s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + "]<br/>";
+ zoomCallback: function(minX, maxX, yRanges) {
+ s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
},
drawCallback: function(g) {
--- /dev/null
+<html>
+ <head>
+ <title>gviz</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="../excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+ <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.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 createDataTable(dateType) {
+ data = new google.visualization.DataTable();
+ data.addColumn(dateType, '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, Infinity);
+ data.setCell(3, 0, new Date("2009/07/22"));
+ data.setCell(3, 1, 4);
+ data.setCell(3, 2, 0);
+ return data;
+ }
+
+ function drawVisualization() {
+ data = createDataTable('date');
+ new google.visualization.LineChart(
+ document.getElementById('gviz')).draw(data, null);
+
+ new Dygraph.GVizChart(document.getElementById('dygraphs'))
+ .draw(data, { });
+
+ data = createDataTable('datetime');
+ new Dygraph.GVizChart(
+ document.getElementById('dygraphs_datetime')).draw(data, {
+ });
+ }
+
+ google.setOnLoadCallback(drawVisualization);
+ </script>
+ </head>
+ <body>
+ <p>This tests that infinite values don't break dygraphs.</p>
+ <p>gviz line chart:</p>
+ <div id="gviz" style="width:600px; height:300px;"></div>
+
+ <p>same data drawn using dygraphs:</p>
+ date column:
+ <div id="dygraphs" style="width:600px; height:300px;"></div>
+ </body>
+</html>
document.getElementById("div_g"),
NoisyData, {
errorBars: true,
- zoomCallback : function(a,b,c,d) {
- showDimensions(a,b,c,d);
+ zoomCallback : function(minDate, maxDate, yRange) {
+ showDimensions(minDate, maxDate, yRange);
},
drawCallback: function(me, initial) {
document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
// Pull an initial value for logging.
var minDate = g.xAxisRange()[0];
var maxDate = g.xAxisRange()[1];
- var minValue = g.yAxisRange()[0];
- var maxValue = g.yAxisRange()[1];
- showDimensions(minDate, maxDate, minValue, maxValue);
+ var minValue = g.yAxisRange();
+ showDimensions(minDate, maxDate, yAxisRange);
- function showDimensions(minDate, maxDate, minValue, maxValue) {
- showXDimensions(minDate, maxDate);
- showYDimensions(minValue, maxValue);
+ function showDimensions(minDate, maxDate, yAxisRange) {
+ showXDimensions(minDate, maxDate);
+ showYDimensions(yAxisRange);
}
function showXDimensions(first, second) {
elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]";
}
- function showYDimensions(first, second) {
+ function showYDimensions(range) {
var elem = document.getElementById("ydimensions");
- elem.innerHTML = "valueRange : [" + first + ", "+ second + "]";
+ elem.innerHTML = "valueRange : [" + range + "]";
}
function zoomGraphX(minDate, maxDate) {
g.updateOptions({
dateWindow: [minDate, maxDate]
});
- showXDimensions(minDate, maxDate);
+ showXDimensions(minDate, maxDate);
}
function zoomGraphY(minValue, maxValue) {
g.updateOptions({
valueRange: [minValue, maxValue]
});
- showYDimensions(minValue, maxValue);
+ showYDimensions(minValue, maxValue);
}
function unzoomGraph() {
projects / dygraphs.git / commitdiff