D3.js Panel Plugin - why none?

Thank you for the update @davidharris . Good news.

Is it useful to consider these two functions of Grafana separately?

  1. Authoring of charts
  2. Dashboard for charts

If we want to allow Authoring of charts, then this requires extensive PanelPlugin development. On the other hand, to elegantly support d3 as a chart inside the Grafana Dashboard, seems to me to be far less effort.

I am not sure how much work it will take to update the tutorial that you reference so that it includes the steps for a D3 Dynamic Panel as described here: Build a panel plugin | Grafana Plugin Tools

Adding the step of connecting to the data source and data frame would quickly give us a Dynamic D3 Panel and this could then serve as a nice POC as proposed by @yosiasz
The community would then be free to develop their own ad-hoc D3 outside of Grafana and plug these charts into their Grafana Dashboard.

Such a feature could attract more D3 interest to Grafana which could then give more resources to work on 1. Authoring of charts and the required panel development.
For me this also represents an interesting paradigm.
Bring your own IDE/Editor/Whatever and work interchangeably on the same code. So we have the best of both worlds.

Is such a step of a dynamic d3 Panel Plugin much work and could it be seen as a promising way to bring d3 interest to the great Grafana project?

1 Like

d3 heat map using dynamic text

Building incrementally, as you suggested, allows for a solid foundation with minimal functionality in v1.0 and then expanding into additional features and plugins like D3 time series and bars.

I hope you succeed with your project.

We published a new blog post on how to incorporate D3js and Flow.io chart in Grafana:

Hail Mikhail!

Are you able to share whether this approach support global and template vars?

Any gotchas that we could/should know about?

Would absolutely love to see a working example in the playground and then tool up an implementation from there.


@allomorphy There are multiple ways to support variables:

Documentation includes a lot of use cases and examples:

1 Like