danvk / dygraphs Goto Github PK

View Code? Open in Web Editor NEW

3.1K 114.0 607.0 22.99 MB

Interactive visualizations of time series using JavaScript and the HTML canvas tag

Home Page: http://dygraphs.com

License: Other

JavaScript 76.94% CSS 0.50% HTML 19.55% Shell 1.69% Python 1.33%

dygraphs visualization charting-library timeseries canvas

dygraphs's Introduction

dygraphs JavaScript charting library

The dygraphs JavaScript library produces interactive, zoomable charts of time series:

Learn more about it at dygraphs.com.

Get help with dygraphs on Stack Overflow (preferred) and Google Groups.

Features

Plots time series without using an external server or Flash
Supports error bands around data series
Interactive pan and zoom
Displays values on mouseover
Adjustable averaging period
Extensive set of options for customization.
Compatible with the Google Visualization API

Minimal Example

<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" type="text/css" href="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
  Dygraph.onDOMready(function onDOMready() {  // or jQuery $() etc.
    g = new Dygraph(
        document.getElementById("graphdiv"),  // containing div
        "Date,Temperature\n" +                // the data series
        "2008-05-07,75\n" +
        "2008-05-08,70\n" +
        "2008-05-09,80\n",
        { }                                   // the options
      );
  });
//--><!]]></script>
</body>
</html>

Learn more by reading the tutorial and seeing demonstrations of what dygraphs can do in the gallery. You can get dygraph.js and dygraph.css from UNPKG, cdnjs or from NPM (see below).

Usage with a module loader

Get dygraphs from NPM:

npm install dygraphs

Do not install from the git repository! Always use a tarball install, which contains the prebuilt files; npm fails to build the source code on install from github. (The tarball from the GitHub Registry is fine.)

You'll find pre-built JS & CSS files in node_modules/dygraphs/dist/. If you're using a module bundler like browserify or webpack, you can import dygraphs:

import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');

const g = new Dygraph('graphdiv', data, { /* options */ });

Check out the dygraphs-es6 repo for a fully-worked example.

Development

To get going, install the following Debian packages…

jq
mksh
pax
python3

… clone the repo and run:

npm install
npm run build-jsonly

Then open tests/demo.html in your browser.

Read more about the dygraphs development process in the developer guide.

License(s)

dygraphs is available under the MIT license, included in LICENSE.txt.

dygraphs's People

Contributors

Stargazers

Watchers

Forkers

karbassi moonpolysoft potter knikhil eklitzke ecurran pjlegato mrbig dmaffioletti wombleton nealie scottfitzenrider sjardine fdidier 734m stani incidentist ctbates mlashley orenfalkowitz wyu myathandarkyaw jasonmw ronhornbaker jshieh xibur lrobb-zz huncent mshron firejune vminaev danmaz74 lanji mkfmn gchardon guniorobot bombela phuff bloggs-nl gabrieltong ynohtna gnagel kberg maurojr blearn bluthen mpfj red-fox mattmiller mbghsource slyjones klausw ichthyos gunshor nodenstuff langpavel dsc chjohnst alexkit rasifix jht001 jerryzhenleicai dpwatrous beda42 chetan mtrias williamzhang dmoena satiri shsnyder github-honda larskotthoff nvdnkpr zhuomingliang rhayes-cida takaken dhx mlohbihler gayashanna scottalger stsibel nithin2e dn365 sigura ftdysa wdshin tekcomp tuxfrickler jbyck manufitoussi abecode rbrubaker mmtg nalin sballesteros gelbal adilhn blasdelf sydefz bwalex

dygraphs's Issues

Empty columns, possible bug

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>

does dygraphs support plotting multiple series with different x coordinates

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.

Problem with customBars and combined JavaScript File

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

Error Handling for Dygraphs

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

Dygraphs does not render on Android 3.0

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

The demo code on dygraphs page does not work

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)

ajax zoom

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

PATCH: fill between curve and x-axis

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

PATCH: Y-Labels for memory sizes

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.)?

dygraphs looks bad when "zoomed" in browser

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

updateDeep() goes infinite recursion loop

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...

After Resize, the previously highlighted dots in the chart disappear

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

Q: how to resize? Or, how to destroy without memory leaks?

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!

labelsDivStyles ignores "top" and "left".

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.

http://dygraphs.com/tests/customLabel.html

change cursor to "wait" when downloading data, and back to "default" when download finished.

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

Make data format a per-series property

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

Gray selection area for zoom in not appearing in Firefox and IE

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!

Ability to specify multiple label formatters (multi series charts)

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

all callbacks should receive a "me" parameter, just like drawCallback()

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

Ability to export graphs?

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?

Unify IE-checking

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

Improve navigability of dygraphs.com

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

PATCH: labelsKMB for negative Values

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

Mini plot is empty when data has null values

I'have a simple 3 lines patch for this. What is the best way to submit ?

Drag-zoom over left or right edge of canvas results in aborted zoom

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

setting yAxisLabelFormatter will format both Y and X axis

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.

Request: Option to never hide labels

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

Double-click unzoom broken for manually-set y-axes

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

Support more per-axis options

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

pointClickCallback doesn't indicate the y-axis associated with the point.

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

offset-by-one error on sizing in a scrolling div

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

Pass correct value on xval for "highlightCallback" or document how we could get it

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..

Firefox Security Error (NS_ERROR_DOM_SECURITY_ERR)

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.

dygraphs in html5 DOCTYPE For IE8

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 ..

Make it simpler to get the indices of visible data after a zoom

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

The highlighted data points wrongly persist after zoom.

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.

Summaries other than rolling average

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

Default labels width should be based on data

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

Show CSS, and add'l data in the gallery

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

When series in both y axes, and all series in 0th axis are invisible, no y axis shown.

I'll add a reproducible case shortly.

tickers.js test fails unless time zone is Eastern

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

Add css a:visited for link interaction demo.

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

ajax zoom

I wouldn't call this an issue, but more like a feature request.

//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());
    }
  }
};

The graph line crosses the Y axis marking when zoomed-in in IE8

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

CSV load from a URL doesn't work in IE6

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.

PATCH: make dygraphs work in a poluted javascript context

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) {

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;

    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;

```
    }  
```
}
this.xrange = this.maxxval - this.minxval;
this.xscale = (this.xrange != 0 ? 1/this.xrange : 1.0);
@@ -58,28 +60,30 @@ DygraphLayout.prototype._evaluateLineCharts = function() {
// add all the rects
this.points = new Array();
for (var setName in this.datasets) {
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);  
```
```
 }  
```
}

    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 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]);

```
 }
```
}

    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;

Support for Multiple Y axis.

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

Introduction of multiple y-axes broke underlay_callback.html

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.

Add an option for the highlight zoom rectangle color

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

x-y rectangular zoom

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>

Original issue: http://code.google.com/p/dygraphs/issues/detail?id=188