multi-scale

From: Dan Vanderkam Date: Thu, 11 Aug 2011 19:44:55 +0000 (-0400) Subject: add multi-scale demo and series name valueFormatter parameter X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=720b410af3ad88f5f1eae0ce1a3507f3eb6e587a;p=dygraphs.git add multi-scale demo and series name valueFormatter parameter --- 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:
+ +
+ + + +