From 720b410af3ad88f5f1eae0ce1a3507f3eb6e587a Mon Sep 17 00:00:00 2001 From: Dan Vanderkam Date: Thu, 11 Aug 2011 15:44:55 -0400 Subject: [PATCH] add multi-scale demo and series name valueFormatter parameter --- auto_tests/tests/axis_labels.js | 12 +++-- dygraph.js | 7 +-- tests/multi-scale.html | 98 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 tests/multi-scale.html diff --git a/auto_tests/tests/axis_labels.js b/auto_tests/tests/axis_labels.js index 151cefe..3c0ad7c 100644 --- a/auto_tests/tests/axis_labels.js +++ b/auto_tests/tests/axis_labels.js @@ -237,15 +237,17 @@ AxisLabelsTestCase.prototype.testValueFormatter = function () { var opts = { width: 480, height: 320, - xValueFormatter: function(x, opts, dg) { + xValueFormatter: function(x, opts, series_name, dg) { assertEquals('number', typeof(x)); assertEquals('function', typeof(opts)); + assertEquals('string', typeof(series_name)); assertEquals('[Dygraph graph]', dg.toString()); return 'x' + x; }, - yValueFormatter: function(y, opts, dg) { + yValueFormatter: function(y, opts, series_name, dg) { assertEquals('number', typeof(y)); assertEquals('function', typeof(opts)); + assertEquals('string', typeof(series_name)); assertEquals('[Dygraph graph]', dg.toString()); return 'y' + y; }, @@ -272,15 +274,17 @@ AxisLabelsTestCase.prototype.testDateValueFormatter = function () { var opts = { width: 480, height: 320, - xValueFormatter: function(x, opts, dg) { + xValueFormatter: function(x, opts, series_name, dg) { assertEquals('number', typeof(x)); assertEquals('function', typeof(opts)); + assertEquals('string', typeof(series_name)); assertEquals('[Dygraph graph]', dg.toString()); return 'x' + new Date(x).strftime('%Y/%m/%d'); }, - yValueFormatter: function(y, opts, dg) { + yValueFormatter: function(y, opts, series_name, dg) { assertEquals('number', typeof(y)); assertEquals('function', typeof(opts)); + assertEquals('string', typeof(series_name)); assertEquals('[Dygraph graph]', dg.toString()); return 'y' + y; }, diff --git a/dygraph.js b/dygraph.js index d25764b..c04bccc 100644 --- a/dygraph.js +++ b/dygraph.js @@ -93,9 +93,10 @@ Dygraph.DEFAULT_HEIGHT = 320; * and maxNumberWidth options. * @param {Number} x The number to be formatted * @param {Dygraph} opts An options view + * @param {String} name The name of the point's data series * @param {Dygraph} g The dygraph object */ -Dygraph.numberValueFormatter = function(x, opts, g) { +Dygraph.numberValueFormatter = function(x, opts, pt, g) { var sigFigs = opts('sigFigs'); if (sigFigs !== null) { @@ -1373,7 +1374,7 @@ Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) { var xOptView = this.optionsViewForAxis_('x'); var xvf = xOptView('valueFormatter'); - var html = xvf(x, xOptView, this) + ":"; + var html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":"; var yOptViews = []; var num_axes = this.numAxes(); @@ -1391,7 +1392,7 @@ Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) { var yOptView = yOptViews[this.seriesToAxisMap_[pt.name]]; var fmtFunc = yOptView('valueFormatter'); var c = this.plotter_.colors[pt.name]; - var yval = fmtFunc(pt.yval, yOptView, this); + var yval = fmtFunc(pt.yval, yOptView, pt.name, this); // TODO(danvk): use a template string here and make it an attribute. html += " " diff --git a/tests/multi-scale.html b/tests/multi-scale.html new file mode 100644 index 0000000..b10cd93 --- /dev/null +++ b/tests/multi-scale.html @@ -0,0 +1,98 @@ + + + + + multi-scale + + + + +

Gridlines and axis labels make charts easier to understand. They give + the lines a clear scale. Unless you tell it otherwise, dygraphs will choose + a y-axis and set of gridlines which include all of your data.

+ +

If you have many series with different scales, this will compress the + variation in all but the largest one. Standard ways to deal with this + include secondary y-axes and log scales.

+ +

If neither of these is to your liking, you can manually rescale your + series and undo that scaling for the hover values. This demo shows how to + do it.

+ +
+ +

Hover over to see the original values. This is what the data looks + like without any rescaling:

+ +
+ + + + -- 2.7.4