Dynamic shading with Netdata dashboard graphs

We are looking to represent the state of a system component on one of our network throughput graphs on a custom dashboard. An ideal solution would apply shading to the area of a graph, based on the value of a dimension within the chart.

Here is an example of what I am describing.
Say we have one throughput chart (kbps) with two dimensions: received, component.

  • received is displayed as usual with real values
  • component is treated as a boolean by our collector: 1 kbps for true and 0 kbps for false
    When component is reporting true, shading is applied to the graph

For an example of shading, we are looking for something similar to the link below.
https://rstudio.github.io/dygraphs/gallery-annotations.html#shading

Is it possible to achieve something like this with the existing Netdata solution?

1 Like

Hey @dave_s,

Welcome to our community! I hope you do enjoy your stay here :slight_smile:

  1. As far as I know, this is not possible with the current implementation. You would need to customize the dashboard with custom JS code. I am not sure how easy that would be, so pinging @Jacek_Kolasa to give us more context!
  2. If you believe that we should offer such functionality, you can create a topic on #feature-requests:agent-fr so that people can vote on it. If it receives enough votes, it is very possible that our product team will prioritize it!

Cheers :slight_smile:

1 Like

Hi @dave_s!

Currently we don’t support this, unfortunately. In the future, we could do this by having 2 dimensions on one chart, one of which would be boolean, and we would have to have 2 kinds of charts (area and line) in one chart. This approach however is not possible yet in dygraph.js library we are using, so would would have also to move to some different charting solution. But that’s a very nice idea, though, thanks for bringing it up!

1 Like

Thanks for getting back to me @Jacek_Kolasa.

1 Like

@dave_s don’t forget to mark the answer that solved your problem as the solution!

Click on the three dots on the answer and then on the box that says solution

1 Like