1

I'm working with Vega-Lite (Deneb) to create a line plot, and I need to incorporate a date slider to interactively filter the data displayed on the plot. I have the following plot code that visualizes stock data over time. However, I'm unsure how to implement a date slider to allow users to dynamically adjust the date range displayed on the plot. Here's my current plot code:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "title": {"text": {"expr": "data('dataset')[0]['title']"}},
  "mark": "line",
  "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Sum of Price", "type": "quantitative", "title": "Price"},
    "color": {
      "field": "Ticker",
      "type": "nominal",
      "scale": {
        "range": {"field": "Colour"}
      }
    },
    "strokeWidth": {"value": 2}
  },
  "config": {
    "view": {"stroke": "transparent"}
  }
}

An example of my desired output is

Example

or even something textual like

example 2

Thanks in advance.

*Edit My pages each have multiple plots, so while Davids answer is correct, I'm looking for a solution that does not require placing and configuring multiple slicers.

Tom Callan
  • 65
  • 7

2 Answers2

1

Just add a native PowerBI slicer with your date field. This will filter the data that is supplied to Deneb.

enter image description here

Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
0

For an in chart slicer, a Scale Domain can be used. This allows "zooming" in and out of data via a range on the x axis.

Tom Callan
  • 65
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 14 '23 at 10:35