Ability to have a Chart (or many) in a Tooltip

[BenB196]

Describe the feature:

Add the ability to have a chart(s) in a tooltip, rather than a singular value.

Describe a specific use case for the feature:

Currently, if you have a visualization which shows point in time data, and you want to see the data overtime, you need to either have a second chart which shows this data over time or use something like drilldowns to get to another visualization. It would be nice if you could instead add a chart (or multiple charts) to a tooltip, that would load and show this data.

Example:

If I have a heatmap/waffle chart, that shows the current bytes out of a 48-port network switch with each cell in the chart representing a port. To be able to see the bytes out overtime, I need to either:

• Create a dashboard with 48 charts that show each port overtime (not very practical)
• Have a single chart with 48 lines on it (not very readable)

Therefore, it would be nice to have a way to set a tooltip, that when you hover over a cell within the chart, it would show you an additional chart over that cell over time. This would simplify dashboard/visualization setup, while also reducing the amount of time/knowledge someone would need to investigate/review something.

• This could be expanded to have multiple charts, if let's say, your cell is just whether your port is shut/not shut, and your tooltip could have 2 charts, one for bytes in, and one for bytes out.

I would expect these "tooltip" charts to query at hover over time rather than at dashboard load time, as depending on the complexity of a dashboard, it could generate a good number of requests.

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[stratoula]

cc @elastic/datavis for your thoughts on that!

[markov00]

Thanks @BenB196 it looks like a legit request but I'm wondering if a different behavior can be more beneficial:
instead of a chart in a tooltip, I think a cross-filtered chart, rendered on the dashboard aside from the heatmap will work better.
With the term cross-filter, I mean a way to filter the content of a chart based on the input and action coming from a different chart. In this example, the mouseover event over a heatmap cell should filter a time chart with only the data that match the dimensions/categories used to generate such heatmap cell.
In this way, you have a stable dashboard (without floating charts in tooltips) where you can see and compare immediately the changes when hovering over different cells.

This unfortunately is not yet available in Kibana but I think the time has come to start implementing such feature.
cc @elastic/kibana-presentation

[BenB196]

Hi @markov00, based on your description I think a cross-filter chart maybe a suitable alternative, but I'd have a few concerns/questions, that probably relate to a later design phase of the implementation, but are also probably worth bringing up early.

• Would the cross-filter chart be something directly attached to a visualization, or would it just be another standalone visualization that is "linked"/"connected" in some way to another visualization?
  • Reason behind this question relates more to would I be able to have 2 cross-filter charts for a single normal visualization
    • Example based on my original use-case. If I have a Waffle chart which contains all of the ports of a network switch. If I hover over a port, I might want to have 2 line charts, one for upload bytes over time and another for download bytes over time. Being able to hover over a single and populating 2 charts would be nice.
• Locking a "filter"
  • Something I didn't bring up in my original post, but I think would be important in either scenario, would be the ability to lock the filter/chart(s), so that one could investigate the sub-data further by hovering over the sub-chart(s) and doing normal chart activities with them.
    • The filter locking would need to be at the cross-filter chart level rather the dashboard level to not affect the rest of the dashboard visualizations if not wanted.
• Dead space
  • Preface - not very good at dashboard design, so this might be a non-issue
  • Concern here, is that a cross-filter chart might not always be needed as part of using the dashboard, the empty chart could end up taking up dashboard real-estate that could've been used for something else, or to reduce the overall size of the dashboard.
    • This might depend more on how this would be implemented, but I'm not sure (I don't really have the knowledge) of how blank space or an empty chart(s) in a dashboard is/are perceived by users of the dashboard.
• User understanding
  • This is one place where I think a tool-tip graph has an advantage.
  • Currently, the way I think of a chart on a dashboard is, it either has data and therefore populated or has no data and therefore isn't populated.
  • A cross-filter chart would seem to introduce a third dynamic, where it could be not populated initially, but there is data, you just need to know how to populate it.
    • The needing to know how to populate it, is where I think it could be a challenge, as it might not be intuitive to think; "You need to hover over chart x to populate chart y"
    • This is where I think a tool tip chart is easier to understand, as the logic is just; "Hover over chart x and tool-tip chart(s) get automatically shown
  • There could also be an inverse argument here, where since the chart at least exists on the dashboard, it might lead people to "ask a question", where as a tooltip is hidden until it isn't, therefore people might not even know they need to "ask a question" to get the chart(s)

[markov00]

Thanks for your details and use cases

• Would the cross-filter chart be something directly attached to a visualization, or would it just be another standalone visualization that is "linked"/"connected" in some way to another visualization?
  • Reason behind this question relates more to would I be able to have 2 cross-filter charts for a single normal visualization
• Dead space
  • Concern here, is that a cross-filter chart might not always be needed as part of using the dashboard, the empty chart could end up taking up dashboard real-estate that could've been used for something else, or to reduce the overall size of the dashboard.
• This might depend more on how this would be implemented, but I'm not sure (I don't really have the knowledge) of how blank space or an empty chart(s) in a dashboard is/are perceived by users of the dashboard.
• The needing to know how to populate it, is where I think it could be a challenge, as it might not be intuitive to think; "You need to hover over chart x to populate chart y"

I consider it as a standalone chart that is linked to one or more visualizations via a specific operation (filter by the network port) triggered by an event (a mouseover event over a waffle cell).
It doesn't necessarily need to be empty if you don't trigger the event: it can represent, for example, the overall upload/download network trend when not "activated" and can represent the filtered portion only when hovering over a triggering network port.

• Locking a "filter"

  • Something I didn't bring up in my original post, but I think would be important in either scenario, would be the ability to lock the filter/chart(s), so that one could investigate the sub-data further by hovering over the sub-chart(s) and doing normal chart activities with them.

This is actually an important feature to consider and something that can't be done within a tooltip. Locking the cross-filter will allows you to explore the data further and analyze it as any other chart. Instead, a tooltip screen space is very limited, we can show just one or two sparklines. It can stick if we want but and I kindly suggest to avoid adding more interactivity nesting within the tooltip: tooltip in a tooltip is the worst UX we can achieve :D

[BenB196]

It doesn't necessarily need to be empty if you don't trigger the event: it can represent, for example, the overall upload/download network trend when not "activated" and can represent the filtered portion only when hovering over a triggering network port.

Good point didn't really consider this type of "base" setup for a chart.

tooltip in a tooltip is the worst UX we can achieve :D

Yeah, recursive tool tips wouldn't be good.

This is actually an important feature to consider and something that can't be done within a tooltip. Locking the cross-filter will allows you to explore the data further and analyze it as any other chart. Instead, a tooltip screen space is very limited, we can show just one or two sparklines.

Another option here, for a tooltip style chart, would be to allow specific parts of a visualization to have their own drill-down dashboards/visualization, when accessed, and just have a tooltip graph that shows a simplified view over the data. LibreNMS has some functionality like this: where the tooltip can just show an overtime graph, then if you click on the part you're hovering over, it will take you to a backing graph which you can do more advanced investigation from.

In the case of the heatmap example. You'd have your tooltip chart, then if you were to click onto one of the heatmap cells, it would take you to a page with the full visualization of the tooltip chart, where you use it.

One of the issues here with this solution, would probably be a UX problem of taking people somewhere else to do additional investigating, and then they can't simultaneously look at the other graphs on the original dashboard.

Another issue would be you'd probably be limited to only 1 "sub" visualization (tooltip/cross-filter chart), whereas someone might want more than one chart.

[markov00]

Good points @BenB196 and thanks again for sharing your thoughts here.
We are actually considering a tooltip redesign that can incorporate these ideas (add more contextual information in the tooltip, improve the ability to operate in a clean way with what you have selected to filter/drill-down)
The cross-filter/link is still in the air but we really like to push it more to improve the overall experience in dashboards.

The overall process to include charts in the tooltip is quite complex from an editor UX point of view and is not on our short-term plan, but we are considering it, at least in the chart library foundations.

[timductive]

Thank you for contributing to this issue, however, we are closing this issue due to inactivity as part of a backlog grooming effort. If you believe this feature/bug should still be considered, please reopen with a comment.