New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a legendFormatter option #683

Merged
merged 3 commits into from Nov 4, 2015

Conversation

Projects
None yet
1 participant
@danvk
Owner

danvk commented Oct 28, 2015

This is intended to be a catch-all for legend formatting needs. This comes up often in Stack Overflow questions which can't be easily answered with valueFormatter. Nowadays I wave my hands and say "write your own legend, either as a plugin or using highlightCallback and unhighlightCallback." This is a simpler option.

The legendFormatter is repeatedly called with a data object describing the selection or lack of selection. It contains all the information you need to generate a standard legend (e.g. formatted values), but there's nothing preventing you from doing something crazier on your own.

For example, here's what a simple legendFormatter might look like:

function legendFormatter(data) {
  if (data.x == null) return '';  // no selection
  return data.xHTML + data.series.map(v => v.labelHTML + ': ' + v.yHTML).join(' ');
}

Here's what the data object looks like when nothing is selected:

{
  "dygraph": "(dygraph)",
  "series": [
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
      "label": "Y1",
      "labelHTML": "Y1",
      "visible": true,
      "color": "rgb(0,128,0)"
    },
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
      "label": "Y2",
      "labelHTML": "Y2",
      "visible": true,
      "color": "rgb(0,0,128)"
    }
  ]
}

The dashHTML properties help you render lines which match each series' line on the chart. When strokePattern is set, they become dotted or dashed lines as needed.

Each value has a corresponding HTML variant, which is properly formatted and escaped according to all the relevant options which have been set for the chart.

Here's what it looks like when a row is selected:

{
  "dygraph": "(dygraph)",
  "x": 93,
  "xHTML": 93,
  "series": [
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
      "label": "Y1",
      "labelHTML": "Y1",
      "visible": true,
      "color": "rgb(0,128,0)",
      "y": 93,
      "yHTML": "93"
    },
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
      "label": "Y2",
      "labelHTML": "Y2",
      "visible": true,
      "color": "rgb(0,0,128)",
      "y": 26.04,
      "yHTML": "26.04"
    }
  ]
}

Here's what it looks like when a single series is selected (e.g. with highlightSeriesOpts):

{
  "dygraph": "(dygraph)",
  "x": 94,
  "xHTML": 94,
  "series": [
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
      "label": "Y1",
      "labelHTML": "Y1",
      "visible": true,
      "color": "rgb(0,128,0)",
      "y": 94,
      "yHTML": "94",
      "isHighlighted": true
    },
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
      "label": "Y2",
      "labelHTML": "Y2",
      "visible": true,
      "color": "rgb(0,0,128)",
      "y": 22.56,
      "yHTML": "22.56"
    }
  ]
}

(Note the isHighlighted property set on Y1.)

Fixes #407

danvk added some commits Oct 28, 2015

@danvk

This comment has been minimized.

Show comment
Hide comment
@danvk

danvk Oct 28, 2015

Owner

cc @kberg @klausw @paulfelix @hulkholden thoughts on the legendFormatter API described above?

Owner

danvk commented Oct 28, 2015

cc @kberg @klausw @paulfelix @hulkholden thoughts on the legendFormatter API described above?

@danvk

This comment has been minimized.

Show comment
Hide comment
@danvk

danvk Nov 4, 2015

Owner

Warnock applies. I'll interpret everyone's silence as approval. Merging.

Owner

danvk commented Nov 4, 2015

Warnock applies. I'll interpret everyone's silence as approval. Merging.

danvk added a commit that referenced this pull request Nov 4, 2015

Merge pull request #683 from danvk/legend-formatter
Add a legendFormatter option

@danvk danvk merged commit 961b513 into master Nov 4, 2015

5 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
coverage/coveralls Coverage increased (+0.04%) to 89.638%
Details
dist/dygraph-combined.js +501 bytes (+0.40%) → 123,834 bytes
dist/dygraph.min.js.gz +158 bytes (+0.43%) → 36,807 bytes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment