Search code examples
powerbidaxvega-litevegadeneb

Is there a way to have a "dynamic" tooltip in deneb?


I have the following chart which pulls data from a file. I then add a filter to the chart to determine which tickers to use and my legend updates accordingly, however, I'm wondering if I can somehow also have my tooltip automatically update, such that it displays the value of each line, without hardcoding?

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "params": [{"name": "dt", "expr": "hover['Date']"}],
  "data": {"name": "dataset"},
  "title": {
    "text": {"expr": "data('dataset')[0]['title']"},
    "anchor": "start",
    "subtitle": {"expr": "data('dataset')[0]['title']"}
  },
  "encoding": {"x": {"field": "Date", "type": "temporal"}},
  "layer": [
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "y": {"field": "Sum of Price", "type": "quantitative", "title": "Price"},
            "color": {"field": "Ticker", "type": "nominal", "scale": {"range": {"field": "Colour"}}}
          }
        },
        {
          "params": [
            {
              "name": "hover",
              "select": {
                "type": "point",
                "fields": ["Date"],
                "nearest": true,
                "on": "mouseover",
                "clear": "mouseout"
              }
            }
          ],
          "mark": {"type": "rule", "color": "gray", "y": 0, "y2": {"expr": "height"}},
          "encoding": {
            "opacity": {
              "condition": {
                "test": {"param": "hover", "empty": false},
                "value": 0.5
              },
              "value": 0
            },
            "tooltip": [
              {"field": "Date", "type": "temporal"},
              {"field": "Sum of Price", "type": "quantitative"}
            ]
          }
        }
      ]
    }
  ],
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {"domain": false, "tickColor": "lightGray"},
    "style": {"cell": {"stroke": "transparent"}}
  }
}
  • Edit my pbix file is here

Thank you.


Solution

  • This is not easy to do but the following works:

    enter image description here

    Create a measure as follows and add it to the field well of deneb:

    Prices = 
    VAR t = CALCULATETABLE( SUMMARIZE(combined,combined[Ticker], combined[Price]), ALLSELECTED(), VALUES(combined[Date]))
    RETURN
    
     IF(NOT(ISBLANK(SUM(combined[Price]))),
        CONCATENATEX(t, combined[Ticker] & " : " & combined[Price],  UNICHAR(10))
     )
    

    Here is the spec:

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {"name": "dataset"},
      "title": {
        "text": {
          "expr": "data('dataset')[0]['title']"
        },
        "anchor": "start",
        "subtitle": {
          "expr": "data('dataset')[0]['title']"
        }
      },
      "encoding": {
        "x": {
          "field": "Date",
          "type": "temporal"
        }
      },
      "layer": [
        {
          "mark": {"type": "line"},
          "encoding": {
            "y": {
              "field": "Sum of Price",
              "type": "quantitative",
              "title": "Price"
            },
            "color": {
              "field": "Ticker",
              "type": "nominal",
              "scale": {
                "range": {"field": "Colour"}
              }
            }
          }
        },
        {
          "params": [
            {
              "name": "hover",
              "select": {
                "type": "point",
                "fields": ["Date"],
                "nearest": true,
                "on": "mouseover",
                "clear": "mouseout"
              }
            }
          ],
          "mark": {
            "type": "rule",
            "color": "gray",
            "y": 0,
            "y2": {"expr": "height"}
          },
          "encoding": {
            "tooltip": [
              {
                "field": "Date",
                "type": "temporal"
              },
               {
                "field": "Prices",
                "type": "nominal"
              }
            ],
            "opacity": {
              "condition": {
                "test": {
                  "param": "hover",
                  "empty": false
                },
                "value": 0.5
              },
              "value": 0
            }
          }
        }
      ],
      "config": {
        "view": {"stroke": "transparent"},
        "axis": {
          "domain": false,
          "tickColor": "lightGray"
        },
        "style": {
          "cell": {"stroke": "transparent"}
        }
      }
    }