How to do this in Grafana, this website https://tulip.co/ has a live view of events

Grafana Dashboards
1

The events drop down, but really looking for something that can quickly show little info text boxes and then disappear for the next ones. What is this kind of visual called, anyone out there done something like this?

2

Welcome @mellerbeck

To save others a trip to that website, I opened it using Chrome Developer Tools and am pasting an animated GIF here.

@mikhailvolkov can probably pinpoint the tech used to create this visualization and how (if) this can be achieved using Grafana.
tulip

1 Like
3

Oh, thank you. In retrospect I will do that next time!

4

@grant2 It can be done using Apache ECharts with custom visualization, there are a lot of animated examples.

Another option is Dynamic Text with custom JS script.

Apache ECharts supports streaming out of the box and can work with streaming Data Source to redraw and display events in real-time.

@mellerbeck Please share your solution if you make it work.

5

I was thinking the Apache ECharts, I will investigate

1 Like
6

I went the Dynamic Text route for a first stab. Simple postgres query to return the last 5 entries in a message table.

msg test2

I stole this animation code https://codepen.io/shubhamtiwari909/embed/bGvJvEV?

Content

<ul class="container">
  <li style="--i:1">{{msg}}</li>
</ul>

CSS

.container {
  display: flex;
  justify-content: center;
  font-size: 1rem;
  list-style-type: none;
  display: flex;
  gap: 20px;
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: falling;
  animation-duration: calc(var(--i) * 1s);
}

/* keyframes */
@keyframes falling {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
7

That’s looks awesome! Thank you for sharing.

I will share it with the community.