danvk / dygraphs Goto Github PK
View Code? Open in Web Editor NEWInteractive visualizations of time series using JavaScript and the HTML canvas tag
Home Page: http://dygraphs.com
License: Other
Interactive visualizations of time series using JavaScript and the HTML canvas tag
Home Page: http://dygraphs.com
License: Other
Hi!
I didn't manage to implement the filling between the lines (it think for this functionality the _renderLineChart method should be changed to use the datasets instead of layout.points). However the following patch introduces the fillGraph attribute, which fills the space between each curve and the x-axis):
--- dygraph-canvas.js 2009-12-16 20:56:05.521331894 +0100
+++ dygraph-canvas.js 2009-12-16 20:55:49.038072296 +0100
@@ -446,6 +446,7 @@
var colorCount = this.options.colorScheme.length;
var colorScheme = this.options.colorScheme;
var errorBars = this.layout.options.errorBars;
+ var fillGraph = this.layout.options.fillGraph;
var setNames = [];
for (var name in this.layout.datasets) {
@@ -488,7 +489,7 @@
var point = this.layout.points[j];
count++;
if (point.name == setName) {
- if (!point.y || isNaN(point.y)) {
+ if (!isOK(point.y)) {
prevX = -1;
continue;
}
@@ -510,6 +511,54 @@
}
ctx.fill();
}
+ } else if (fillGraph) {
+ for (var i = 0; i < setCount; i++) {
+ var setName = setNames[i];
+ var setNameLast;
+ if (i>0) setNameLast = setNames[i-1];
+ var color = colorScheme[i % colorCount];
+
+ // setup graphics context
+ ctx.save();
+ ctx.strokeStyle = color;
+ ctx.lineWidth = this.options.strokeWidth;
+ var prevX = -1;
+ var prevYs = [-1, -1];
+ var count = 0;
+ var yscale = this.layout.yscale;
+ // should be same color as the lines but only 15% opaque.
+ var rgb = new RGBColor(color);
+ var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',0.15)';
+ ctx.fillStyle = err_color;
+ ctx.beginPath();
+ for (var j = 0; j < this.layout.points.length; j++) {
+ var point = this.layout.points[j];
+ count++;
+ if (point.name == setName) {
+ if (!isOK(point.y)) {
+ prevX = -1;
+ continue;
+ }
+ var pX = 1.0 + this.layout.minyval * this.layout.yscale;
+ if (pX < 0.0) pX = 0.0;
+ else if (pX > 1.0) pX = 1.0;
+ var newYs = [ point.y, pX ];
+ newYs[0] = this.area.h * newYs[0] + this.area.y;
+ newYs[1] = this.area.h * newYs[1] + this.area.y;
+ if (prevX >= 0) {
+ ctx.moveTo(prevX, prevYs[0]);
+ ctx.lineTo(point.canvasx, newYs[0]);
+ ctx.lineTo(point.canvasx, newYs[1]);
+ ctx.lineTo(prevX, prevYs[1]);
+ ctx.closePath();
+ }
+ prevYs[0] = newYs[0];
+ prevYs[1] = newYs[1];
+ prevX = point.canvasx;
+ }
+ }
+ ctx.fill();
+ }
}
for (var i = 0; i < setCount; i++) {
--- dygraph.js 2009-12-16 10:12:21.727355510 +0100
+++ dygraph.js 2009-12-16 10:35:42.807520547 +0100
@@ -112,7 +112,8 @@
errorBars: false,
fractions: false,
wilsonInterval: true, // only relevant if fractions is true
- customBars: false
+ customBars: false,
+ fillGraph: false
};
// Various logging levels.
best regards, Markus
Hello,
I'm handling resize events and would like to resize dygraphs when the user resizes its browser. What's the best way to do that? It looks like Dygraph.prototype.init is the best way to set this.width_, which means I would have to destroy and recreate the dygraph for every resize event. (I'm fine with that atm, btw).
If I need to destroy/recreate dygraph on resize, what's the best way to completely destroy / garbage collect dygraph so no memory is leaked?
Thanks!
From [email protected] on November 17, 2011 05:36:13
I have a graph that retains the last selected point when the user moves the mouse cursor away from the chart(hideOverlayOnMouseOut: false,). So when the resize happens then the highlighted dots got disappeared
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=241
I'm using dygraph to visualize large sets of data, where statistical info is collected for a couple of years every 5 minutes. The fact is - loading 300.000 data points is an overkill for every modern browser on every modern workstation.
I wouldn't call this an issue, but more like a feature request.
I've came with a simple quick'n'dirty update which seems to work for me, However, I'm to limited in time to adopt it properly within the code. Maybe author could embed something similar within next release, because this feature is mandatory IMHO?
//updated functions
/*determines if 'url' is being used as a data-source and appends url with 'from' and 'to' fields,
corresponding to timestamp being selected. Then, instead of calling doZoomXDates_(), reloads data set via start_() */
Dygraph.prototype.doZoomX_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
// Convert the call to date ranges of the raw data.
//we must return min/max dates in GMT
tzOffset=-1*new Date().getTimezoneOffset()*60;
var minDate = Math.floor(this.toDataXCoord(lowX)/1000)+tzOffset;
var maxDate = Math.floor(this.toDataXCoord(highX)/1000)+tzOffset;
if ( (typeof this.file_ == 'string' && this.file_.indexOf('\n') < 0) ) {
if (this.origFile_)
this.file_=this.origFile_;
var newUrl= [
this.file_+( this.file_.indexOf('?')>=0 ? '' : '?' ),
'from='+minDate,
'to='+maxDate
].join('&');
this.origFile_=this.file_;
this.file_=newUrl;
this.start_();
} else {
this.doZoomXDates_(minDate, maxDate);
}
};
/*determines if 'url' is being used as a data-source and calls start_() with initial(unmodified) url to
reload original data*/
Dygraph.prototype.doUnzoom_ = function() {
var dirty = false;
if (this.dateWindow_ != null) {
dirty = true;
this.dateWindow_ = null;
}
for (var i = 0; i < this.axes_.length; i++) {
if (this.axes_[i].valueWindow != null) {
dirty = true;
delete this.axes_[i].valueWindow;
}
}
// Clear any selection, since it's likely to be drawn in the wrong place.
this.clearSelection();
if (dirty || this.origFile_) {
// Putting the drawing operation before the callback because it resets
// yAxisRange.
this.zoomed_x_ = false;
this.zoomed_y_ = false;
//if file is url - reload ajax query
if ( (typeof this.file_ == 'string' && this.file_.indexOf('\n') < 0) ) {
this.file_=this.origFile_;
delete this.origFile_;
this.start_();
} else {
this.drawGraph_();
}
if (this.attr_("zoomCallback")) {
var minDate = this.rawData_[0][0];
var maxDate = this.rawData_[this.rawData_.length - 1][0];
this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
}
}
};
We use a graph with yAxisLabelFormatter set.
Setting yAxisLabelFormatter to the DyGraph also formats the x-axis. Our x-axis is pure numbers (no dates). Our Y axis is numbers, formatted with "%" at the end.
Hello!
labelsKMB (and labelsKMG2) doesn't work for negative values.
--- dygraph.js 2009-12-13 12:43:01.160328806 +0100
+++ dygraph.js 2009-12-13 14:23:19.575564548 +0100
@@ -1051,16 +1052,26 @@
var ticks = [];
for (var i = 0; i < nTicks; i++) {
var tickV = low_val + i * scale;
+ var absTickV = Math.abs(tickV);
var label = self.round_(tickV, 2);
if (self.attr_("labelsKMB")) {
var k = 1000;
- if (tickV >= k*k*k) {
+ if (absTickV >= k*k*k) {
label = self.round_(tickV/(k*k*k), 1) + "B";
- } else if (tickV >= k*k) {
+ } else if (absTickV >= k*k) {
label = self.round_(tickV/(k*k), 1) + "M";
- } else if (tickV >= k) {
+ } else if (absTickV >= k) {
label = self.round_(tickV/k, 1) + "K";
}
}
best regards,
Markus
From [email protected] on January 16, 2012 22:11:53
What steps will reproduce the problem? 1. 2. 3. What is the expected output? What do you see instead? Please use labels and text to provide additional information.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=262
steps to reproduce:
instatniate dygraph object with labelsDiv set to document.getElementById("somediv")
then call updateOptions with labelsDiv set to document.getElementById("somediv") again
(in my case - with "file" set to some other value)
while execution goes through updateDeep(), it finds HTMLDivElement.ownerDocument and repeats again and again and again...
I copied temperatures.csv and the js in the same directory and tried opening with firefox n chome and nothing happened.
The pervious code with data points worked....... (This is absolutely terrible)
Error in displaying graphics in html5 (<! DOCTYPE html>) for browser IE8, displays everything except the lines.
For example http://danvk.org/dygraphs/tests/grid_dot.html page correctly displays the schedule for IE 8 only in compatibility mode (loaded by default). In this case, the main project page http://danvk.org/dygraphs/ displays graphs correctly, for any representations browser compatibility and without compatibility.
Please show the code on the similarity http://danvk.org/dygraphs/tests/grid_dot.html, where as well displays the schedule for html5 (<! DOCTYPE html>) page.
P / s Sorry for my english, I'm from Russia. dygraphs is the best I've seen from the graphs. very much like to apply it to their website ..
Currently the "highlightCallback" documentation states that we can only get the yval value of the selected point. Analysing the returned data, we can actually see that the xval is also presented in a timestamp format, but multiplied by 1000.
To get the value right again, we can call the Dygraph.dateString_ function, passing it the xval value, and get back the correct representation of the date, but this is not documented anywere.
I think that this could be solved by documenting how to get the correct xval from the points passed by the highlightCallback or return the xval already corrected from the callback.
Btw, i didn't patched, because highlightCallback is returning the (this.selPoints_) as the variable holding the points, and changing this would affect most of the code...one quick solution would be not to return (this.selPoints_) variable, but instead a copy of it with the xval values fixed..
From [email protected] on January 16, 2012 22:09:42
The Gallery shows HTML and Javascript. It should also show CSS, and the additional code hidden by data.js and interaction-api.js
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=261
From danvdk on July 26, 2011 00:27:02
Some pages have a left-hand nav. Some pages (e.g. http://dygraphs.com/data.html ) do not. This should be more consistent.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=215
From [email protected] on November 21, 2010 00:48:51
http://danvk.org/dygraphs/tests/zoom.html Select any of the Y-zoom operations.
Double-click.
Doesn't unzoom.
Now select one of the X-zoom operations.
It's now zoomed along X and Y axes.
Double-click.
Unzooms along X axis only.
I suspect this is broken because of the multiple-y-axes changes.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=144
From danvdk on August 19, 2009 02:28:42
Rolling average has its problems. It would be nice to support other ways of aggregating data, e.g.
centered moving average, replacing N data points w/ {min, mean, max}, etc.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=9
Specifically, change c94eee2 broke underlay_callback.html, because the values layout.yscale and layout.minyval have disappeared.
While not officially acceptable, replacing these with layout.options.yAxes[0].yscale and layout.options.yAxes[0].minyval fixes the test. A better solution is probably required, but I don't know what that is yet. (supporting those old values for historical purposes, followed by deprecate and remove? Better API?) I'd really prefer a two phase deprecate and remove, particularly of yAxes[0].yscale, etc, can fit it for the short term.
From [email protected] on October 15, 2010 12:28:51
Dragging to zoom near the left or right edge of a DyGraph, if the mouse goes too far (outside the canvas, or outside the bounds of the window) before releasing the mouse button, the drag-zoom doesn't work: the zoom is aborted, and the gray shading breaks into multiple bands. It ends up being tedious and frustrating to zoom to the data on the right-most or left-most side. It's a very common use-case to zoom in to the right-most (most current) data, and in my experience watching users, they fail due to this defect on about half their attempts.
Perhaps DyGraph could detect the mouseOut event when a drag crosses to the outside of the canvas, and force a virtual mouseUp to initiate the zoom.
Tested on latest FF/Mac and Safari/Mac.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=120
When data points are active (the mouse is over data points) and the user does a zoom-in (select and drag) or zoom-out (double-click), the highlighted data points persist wrongly outside of the data lines. The problem disappears as soon as the user moves the mouse again selecting other data points at the new zoom level.
This issue is relatively minor though.
From [email protected] on November 15, 2011 11:52:13
Knowing the axis will matter when, say, the zoom window changes.
pointClickCallback is invoked in Dygraph.Interaction.treatMouseOpAsClick but since treatMouseOpAsClick works with selPoints, it's hard to tell which axis the selected point comes from. Dan, how can this be addressed?
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=239
e.g.
1,2
2,4
3, 5
4, 6 is one series and
2,5
2.5,6
3,7
4,8
is another series....
can we plot both on same graph in different colors ? unfortunately google API is pain to do this.
From danvdk on August 25, 2011 21:22:11
The TickerTestCase.prototype.testBasicDateTicker test fails. The tick values are overly precise -- a difference of a few hours shouldn't matter for ticks like "1920s".
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=225
From [email protected] on March 18, 2012 10:24:03
Open dygraphs.com in Chrome. Hit Cmd/+ (Ctrl/+ on a PC) repeatedly. The text on the axis labels continues to look crisp, while the plot itself looks pixelated.
This also affects dygraphs on "retina" devices, e.g. the new iPad.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=301
From [email protected] on October 26, 2010 02:03:52
The graph line crosses the Y axis marking when zoomed-in in IE8.
The attached screen shot shows that the graph crosses Y -axis labels
Attachment: dygraph_IE_zoom.bmp
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=134
Hi,
First of all, this is terrific job you have done with this plotting library. Congratulations on it and thanks for fixing th IE8 "Node not found" issue.
I think after the latest update to fix this issue (or others), the gray area that used to appear when selecting a zoom-in area in Firefox has dissapeared (no longer showing up). I know there was an open issue for IE for this gray zooming area, but not after the fix it seems it stopped working on Firefox as well.
I am using firefox 6 and IE 8 for my testing. Gray area for zoom in not appearing in none of this browsers.
Thank you and all the best!
From danvdk on December 08, 2009 14:23:07
It should be possible for one series to include standard deviations, another
to be fractions and a third to have neither.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=53
Hello again!
Since I'm still working on my server statistics, and I'm currently graphing the memory usage, the supplied labelsKMB isn't really useful, better would be something to format the labels with k=1024 and label them with k, M or G. Here's the patch:
--- dygraph.js 2009-12-13 12:43:01.160328806 +0100
+++ dygraph.js 2009-12-13 12:44:58.120908947 +0100
@@ -91,6 +91,7 @@
},
labelsSeparateLines: false,
labelsKMB: false,
+ labelsKMG2: false,
strokeWidth: 1.0,
@@ -1061,6 +1062,15 @@
} else if (tickV >= k) {
label = self.round_(tickV/k, 1) + "K";
}
+ } else if (self.attr_("labelsKMG2")) {
+ var k = 1024;
+ if (tickV >= k*k*k) {
+ label = self.round_(tickV/(k*k*k), 1) + "G";
+ } else if (tickV >= k*k) {
+ label = self.round_(tickV/(k*k), 1) + "M";
+ } else if (tickV >= k) {
+ label = self.round_(tickV/k, 1) + "k";
+ }
}
ticks.push( {label: label, v: tickV} );
}
Is there any feature to color the space between the lines (similar to the customBars, but from bottom to first line, and from first line to second line, etc.)?
This is potentially a dumb question/request, since as I understand it everything is rendered client-side, but is there any ability to create a downloadable/savable version of a graph? In JPG, PNG, etc?
From [email protected] on July 10, 2010 06:31:16
Hi,
I need to implement graph with more than 2 yaxis in my application. Are you going to implement it soon?
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=100
From [email protected] on September 20, 2011 08:43:55
Since not all XMLHttpRequests are instantaneous, it would be very helpful if the system would change the mouse cursor to the hourglass/"wait" state when the request is initiated, and then back to the original value when the download completes and then back to the default value when the data is received and ready for display.
This would be very useful feedback for the user to know that the update is in progress.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=227
From [email protected] on April 30, 2011 09:37:33
x-y rectangular zoom instead of the present x zoom or y zoom only at a time will be very nice
................................................................... Please include the following in any bug reports: 1. Link to a page which demonstrates the problem. 2. Browser and Operating System that exhibit the problem It also helps if you include the non-compacted version of the JS on your page. For instance, instead of doing this: <script type="text/javascript" src="dygraph-combined.js"></script> do this: <script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript" src="dygraph-canvas.js"></script> <script type="text/javascript" src="dygraph.js"></script> This makes error messages and debugging simpler.Original issue: http://code.google.com/p/dygraphs/issues/detail?id=188
Hello!
I'm currently trying to visualize my server statistics (based on RRD files) with dygraphs. I have created a CSV file, which looks like the following excerpt (where 8 CPU statistics are stored per line, each with min, average and max values):
Timestamp,Idle,Interrupt,Nice,Soft IRQ,Steal,System,User,Wait
1260454720,8.1000000000e+01;9.5853571429e+01;1.0020000000e+02,0.0000000000e+00;0.0000000000e+00;0.0000000000e+00,0.0000000000e+00;0.0000000000e+00;0.0000000000e+00,0.0000000000e+00;0.0000000000e+00;0.0000000000e+00,0.0000000000e+00;3.5714285714e-03;1.0000000000e-01,0.0000000000e+00;1.1428571429e-01;2.0000000000e-01,0.0000000000e+00;3.2142857143e-02;1.0000000000e-01,0.0000000000e+00;4.0000000000e+00;1.8800000000e+01
1260455000,8.3400000000e+01;9.6032142857e+01;1.0030000000e+02,0.0000000000e+00;0.0000000000e+00;0.0000000000e+00,0.0000000000e+00;0.0000000000e+00;0.0000000000e+00,0.0000000000e+00;0.0000000000e+00;0.0000000000e+00,0.0000000000e+00;3.5714285714e-03;1.0000000000e-01,0.0000000000e+00;9.6428571429e-02;2.0000000000e-01,0.0000000000e+00;3.9285714286e-02;1.0000000000e-01,0.0000000000e+00;3.8392857143e+00;1.6400000000e+01
When using this file (the small sample above is enough) in combination with customBars: true and the combined JavaScript file, the script turns to a "long running" script and gives no results (at least in Firefox and Safari). After updating my HTML code to use the single files instead of the combined file (dygraph-canvas.js, dygraph.js, rgbcolor.js, strftime.js) it works as expected. I'm sorry that I'm not able give an exact location of the problem.
Btw, as you can see, the first column of my CSV file contains an unix timestamp, which is interpreted as number an not as date by dygraphs. Is there an option to tell dygraph that it should this as timestamp (since it seems to already use timestamps internal)?
best regards, Markus
From [email protected] on April 19, 2011 18:49:35
The "me" parameter is useful in drawCallback() to differentiate between multiple graphs on the same page. But the same reason applies to the other callbacks. In addition this could make the callback argument list more "regular" (by always receiving "me" as a first argument).
In particular I'm interested in the highlight/unhighlight callbacks. http://dygraphs.com/options.html#Callbacks
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=182
From [email protected] on August 09, 2011 02:36:30
Highlight zoomed area default is gray+opacity.
Personalize this option.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=220
From [email protected] on March 04, 2010 13:47:46
Given the names of the series and all the data, it should be possible to
calculate the maximum width that the labels div would need to be to avoid
line wrapping. If it's not too expensive to compute, this should be the
default width of the label.
This will also need to take into account the style of the labels div.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=84
Please, try this piece of code and look the differences between the 2 graphs.
The first graph is ok, because the three columns are full of data.
However, in the second one, you'll notice the first column is not shown correctly, and this is no the correct behavior.
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<div id="graphdiv2"></div>
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
"Date,Temperature1,Temperature2,Temperature3\n" +
"2008-05-07,75,70,120\n" +
"2008-05-08,70,60,124\n" +
"2008-05-09,80,50,150\n"
);
</script>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"Date,Temperature1,Temperature2,Temperature3\n" +
"2008-05-07,10,,120\n" +
"2008-05-08,70,,124\n" +
"2008-05-09,80,,150\n"
);
</script>
</body>
</html>
Here's a to-do list based on @kberg's spreadsheet:
From danvdk on October 22, 2010 10:32:54
There are very few display options which are supported on a per-axis basis. These would be good ones:
axisLabelColor
axisLabelFontSize
axisLabelFont
axisTickSize
axisLineWidth
axisLineColor
This will require adding support for per-axis options to Dygraph.attr_.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=126
From [email protected] on October 01, 2010 08:56:30
Enhance Dygraph with error handling, for example by managing an 500 Internal Server Error or by asking server to return a Json result with error description.
Error handling should permit to write a custom message or show a custom error image.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=114
Hi,
we're creating some mobile visualisations with dygraphs, which work fine with android up to 2.2, but for 3.0, the graphs cannot are not rendered any more. Any ideas?
Btw, you can easily reproduce this by opening the dygraphs homepage in the emulator.
Simon
Loading CSV data from a URL doesn't appear to work in IE6. I suspect this is because line 2885 of dygraph.js creates an XMLHttpRequest object, which doesn't exist in IE6. I think the second two functions in this example:
http://www.quirksmode.org/js/xmlhttp.html
can be used to create XMLHttpRequest objects in IE6 (although I haven't tested them).
Happy to write and contribute a patch if you like.
Hi,
I'm really impressed with dygraphs, but there's one option I'd like to see added. I would prefer that the labels were never hidden. It would be nice if the last row in the series (most recent data) were initially selected, and perhaps selected again if the mouse pointer left the chart.
Thanks, and nice work!
-Nathan
From danvdk on August 08, 2011 23:06:25
Is there an easy way to get the index of the data after a zoom, either
by using something already existing or by modifying zoomCallback?
I can always do a binary search in the data to find the index that
matches, but it seems like I might be missing something simpler.
After a zoom, I need to reprocess all the data points between minX &
maxX.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=219
I'll add a reproducible case shortly.
From [email protected] on July 04, 2011 12:52:43
I wouldn't call this an issue, but more like a feature request.
I'm using dygraph to visualize large sets of data, where statistical info is collected for a couple of years every 5 minutes. The fact is - loading 300.000 data points is an overkill for every modern browser on every modern workstation.
I've came with a simple quick'n'dirty update which seems to work for me, However, I'm to limited in time to adopt it properly within the code. Maybe author could embed something similar within next release, because this feature is mandatory IMHO?
//updated functions
/*determines if 'url' is being used as a data-source and appends url with 'from' and 'to' fields,
corresponding to timestamp being selected. Then, instead of calling doZoomXDates_(), reloads data set via start_() */
Dygraph.prototype.doZoomX_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
// Convert the call to date ranges of the raw data.
//we must return min/max dates in GMT
tzOffset=-1_new Date().getTimezoneOffset()60;
var minDate = Math.floor(this.toDataXCoord(lowX)/1000)+tzOffset;
var maxDate = Math.floor(this.toDataXCoord(highX)/1000)+tzOffset;
if ( (typeof this.file == 'string' && this.file_.indexOf('\n') < 0) ) {
if (this.origFile_)
this.file_=this.origFile_;
var newUrl= [
this.file_+( this.file_.indexOf('?')>=0 ? '' : '?' ),
'from='+minDate,
'to='+maxDate
].join('&');
this.origFile_=this.file_;
this.file_=newUrl;
this.start_();
} else {
this.doZoomXDates_(minDate, maxDate);
}
};
/determines if 'url' is being used as a data-source and calls start() with initial(unmodified) url to
reload original data_/
Dygraph.prototype.doUnzoom_ = function() {
var dirty = false;
if (this.dateWindow_ != null) {
dirty = true;
this.dateWindow_ = null;
}
for (var i = 0; i < this.axes_.length; i++) {
if (this.axes_[i].valueWindow != null) {
dirty = true;
delete this.axes_[i].valueWindow;
}
}
// Clear any selection, since it's likely to be drawn in the wrong place.
this.clearSelection();
if (dirty || this.origFile_) {
// Putting the drawing operation before the callback because it resets
// yAxisRange.
this.zoomed_x_ = false;
this.zoomed_y_ = false;
//if file is url - reload ajax query
if ( (typeof this.file_ == 'string' && this.file_.indexOf('\n') < 0) ) {
this.file_=this.origFile_;
delete this.origFile_;
this.start_();
} else {
this.drawGraph_();
}
if (this.attr_("zoomCallback")) {
var minDate = this.rawData_[0][0];
var maxDate = this.rawData_[this.rawData_.length - 1][0];
this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
}
}
};
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=210
The test "customLabel" should reposition the legend by using "top" in labelsDivStyles. But it seems that the "top" has no effect, and the legend is not repositioned.
From [email protected] on May 24, 2011 17:36:38
Great product gentlemen!
A very handy configuration option would be the ability to specify a label formatter for a particular series in a chart.
Ideally, it would allow for a global configuration and an override.
E.g.
global: mbpsLabelFormatter
seriesC: longLabelFormatter
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=198
Hello,
Great job with dygraphs. I really mean that.
I'm investigating using it in a commercial app and right away dygraphs failed to work along side some other third party libs that unfortunately redefine Object. I humbly submit to you that this is dygraphs problem because redefining Object is a language feature that we all have to live with.
So I've created a dygraphs patch that protects itself from other third party libs that redefine Object.
I'm using these patches now and they work. Please consider applying these patches so dygraphs can survive hostile javascript contexts.
PATCH 1: AGAINST dygraph-context.js
diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 11affc2..70ec659 100644
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -38,12 +38,14 @@ DygraphLayout.prototype.evaluate = function() {
DygraphLayout.prototype._evaluateLimits = function() {
this.minxval = this.maxxval = null;
for (var name in this.datasets) {
if (this.datasets.hasOwnProperty(name)) {
var series = this.datasets[name];
var x1 = series[0][0];
if (!this.minxval || x1 < this.minxval) this.minxval = x1;
var x2 = series[series.length - 1][0];
if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2;
}
var item = dataset[j];
var point = {
x: ((parseFloat(item[0]) - this.minxval) \* this.xscale),
y: 1.0 - ((parseFloat(item[1]) - this.minyval) \* this.yscale),
xval: parseFloat(item[0]),
yval: parseFloat(item[1]),
name: setName
// limit the x, y values so they do not overdraw
if (point.y <= 0.0) {
point.y = 0.0;
}
if (point.y >= 1.0) {
point.y = 1.0;
}
if ((point.x >= 0.0) && (point.x <= 1.0)) {
this.points.push(point);
}
if (this.datasets.hasOwnProperty(setName)) {
var dataset = this.datasets[setName];
for (var j = 0; j < dataset.length; j++) {
var item = dataset[j];
var point = {
x: ((parseFloat(item[0]) - this.minxval) \* this.xscale),
y: 1.0 - ((parseFloat(item[1]) - this.minyval) \* this.yscale),
xval: parseFloat(item[0]),
yval: parseFloat(item[1]),
name: setName
};
// limit the x, y values so they do not overdraw
if (point.y <= 0.0) {
point.y = 0.0;
}
if (point.y >= 1.0) {
point.y = 1.0;
}
if ((point.x >= 0.0) && (point.x <= 1.0)) {
this.points.push(point);
}
}
}
@@ -117,19 +121,21 @@ DygraphLayout.prototype.evaluateWithError = function() {
// Copy over the error terms
var i = 0; // index in this.points
for (var setName in this.datasets) {
var item = dataset[j];
var xv = parseFloat(item[0]);
if (xv == this.points[i].xval &&
yv == this.points[i].yval) {
this.points[i].errorMinus = parseFloat(item[2]);
this.points[i].errorPlus = parseFloat(item[3]);
}
if (this.datasets.hasOwnProperty(setName)) {
var j = 0;
var dataset = this.datasets[setName];
for (var j = 0; j < dataset.length; j++, i++) {
var item = dataset[j];
var xv = parseFloat(item[0]);
var yv = parseFloat(item[1]);
if (xv == this.points[i].xval &&
yv == this.points[i].yval) {
this.points[i].errorMinus = parseFloat(item[2]);
this.points[i].errorPlus = parseFloat(item[3]);
}
}
}
@@ -322,7 +328,9 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
var makeDiv = function(txt) {
var div = document.createElement("div");
for (var name in labelStyle) {
div.style[name] = labelStyle[name];
if (labelStyle.hasOwnProperty(name)) {
div.style[name] = labelStyle[name];
}
}
div.appendChild(document.createTextNode(txt));
return div;
@@ -437,7 +445,11 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
var errorBars = this.layout.options.errorBars;
var setNames = [];
for (var name in this.layout.datasets) setNames.push(name);
for (var name in this.layout.datasets) {
if (this.layout.datasets.hasOwnProperty(name)) {
setNames.push(name);
}
}
var setCount = setNames.length;
//Update Points
PATCH 2: against dygraph.js
diff --git a/dygraph.js b/dygraph.js
index 4fc2fdc..690cb8b 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -451,7 +451,9 @@ Dygraph.prototype.createStatusMessage_ = function(){
Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
var div = document.createElement("div");
for (var name in messagestyle) {
div.style[name] = messagestyle[name];
if (messagestyle.hasOwnProperty(name)) {
div.style[name] = messagestyle[name];
}
}
this.graphDiv.appendChild(div);
this.attrs_.labelsDiv = div;
@@ -476,7 +478,9 @@ Dygraph.prototype.createRollInterface_ = function() {
roller.size = "2";
roller.value = this.rollPeriod_;
for (var name in textAttr) {
roller.style[name] = textAttr[name];
if (textAttr.hasOwnProperty(name)) {
roller.style[name] = textAttr[name];
}
}
var pa = this.graphDiv;
@@ -1607,7 +1611,9 @@ Dygraph.prototype.parseDataTable_ = function(data) {
Dygraph.update = function (self, o) {
if (typeof(o) != 'undefined' && o !== null) {
for (var k in o) {
self[k] = o[k];
if (o.hasOwnProperty(k)) {
self[k] = o[k];
}
}
}
return self;
I'have a simple 3 lines patch for this. What is the best way to submit ?
From [email protected] on June 29, 2011 13:57:22
Take demo.html, and add a div element around demoDiv:
Then look closely at the zoom rectangle. It's off by a pixel.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=209
An error occurs in Firefox if there a stylesheet from another domain is included.
In the Dygraph.addAnnotationRule function the first stylesheet is selected and then the default rule for the annotation is added: mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", 0);
However in Firefox this call for a stylesheet from another domain causes a Security error" code:
code: 1000
INDEX_SIZE_ERR: 1
DOMSTRING_SIZE_ERR: 2
HIERARCHY_REQUEST_ERR: 3
WRONG_DOCUMENT_ERR: 4
INVALID_CHARACTER_ERR: 5
NO_DATA_ALLOWED_ERR: 6
NO_MODIFICATION_ALLOWED_ERR: 7
NOT_FOUND_ERR: 8
NOT_SUPPORTED_ERR: 9
INUSE_ATTRIBUTE_ERR: 10
INVALID_STATE_ERR: 11
SYNTAX_ERR: 12
INVALID_MODIFICATION_ERR: 13
NAMESPACE_ERR: 14
INVALID_ACCESS_ERR: 15
VALIDATION_ERR: 16
TYPE_MISMATCH_ERR: 17
result: 2152924136
filename: http://localhost:5000/GWASClient/dygraph-combined.js
lineNumber: 3271
columnNumber: 0
In Chrome it works just fine.
From [email protected] on January 26, 2012 14:51:38
There are at least six places where we do IE checking:
$ grep -n 'MSIE' dygraph*.js
dygraph-canvas.js:138: var ie = navigator.appVersion.match(/MSIE (\d.\d)/);
dygraph.js:317: if (/MSIE/.test(navigator.userAgent) && !window.opera &&
dygraph.js:1567: var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
dygraph-range-selector.js:19: this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera;
dygraph-range-selector.js:138: if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data.
dygraph-utils.js:622: var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
There should be a Dygraph.isIE() function which gets used everywhere.
Original issue: http://code.google.com/p/dygraphs/issues/detail?id=271
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.