Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rendering time-series area plot with specified tooltip

See original GitHub issue

My vega-embed spec looks like the following:

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 500,
  "height": 200,
  "padding": 5,



  "data": [
    {
      "name": "table",
      "values": [
        {"u": "2018-01-01","v":2},
        {"u": "2018-01-02","v":1},
        {"u": "2018-01-03","v":2},
        {"u": "2018-01-04","v":2},
        {"u": "2018-01-05","v":3}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "time",
      "range": "width",
      "zero": false,
      "nice":{"interval": "day"},
      "domain": {"data": "table", "field": "u"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "v"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "xscale", "tickCount": 20},
    {"orient": "left", "scale": "yscale"}
  ],

  "marks": [
    {
      "type": "area",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "u"},
          "y": {"scale": "yscale", "field": "v"},
          "y2": {"scale": "yscale", "value": 0},
          "tooltip": {"signal": "'In this category: ' + datum.u + ' the value is '+datum.v"},
          "fill": {"value": "steelblue"}
        }
      }
    }
  ]
}

It returns no errors, but just renders an empty plot. Why does this not render any points? Am I not parsing the time data (column “u”) correctly?

@kanitw @jheer @nyurik apologies for what might be a simple oversight, but insight would be appreciated

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

2reactions

royingcommented, Oct 3, 2018

Example: "tooltip": {"signal": "'In this category: ' + timeFormat(datum.u, '%b %d, %Y') + ' the value is '+datum.v"}

See: https://vega.github.io/vega/docs/expressions/#string-functions https://github.com/d3/d3-time-format/

0reactions

royingcommented, Oct 4, 2018

Example:

  "axes": [
    {"orient": "bottom", 
    "scale": "xscale", 
    "format": "%Y-%m-%d",
    "tickCount": 5
    },

See: https://vega.github.io/vega/docs/axes/

Top Results From Across the Web

Time series | Grafana documentation

The time series visualization type is the default and primary way to visualize time series data as a graph. It can render series...

25 Controlling tooltips

25.1 plot_ly() tooltips. There are two main approaches to controlling the tooltip: hoverinfo and hovertemplate . I suggest starting with the former approach ......

Time series chart example / geofduf - Observable

Time series chart example. Example of D3 time series chart with basic support for multiple series, legend, tooltip and brush.

In Bokeh, how do I add tooltips to a Timeseries chart (hover ...

I inspected the glyph render data source to see what are the names on it. Then I use those names on the hoover...

plotOptions.series.tooltip | highcharts API Reference

A configuration object for the tooltip rendering of each single series. ... tooltip will jump from column to column as the user swipes...