It would be awesome if we could change the order on individual metrics, not just the values.

The values (numbers) don't seem to be appearing under the nodes in Firefox. In Chrome they appear as expected.
Chrome:

Firefox:

Any idea what could be causing this?
Version 1.3.0, grafana 4.0.0

When using the data refresh button, the gantt chart disappers.
I think it's related to the diagram definition. Maybe the content should be escaped differently.

Possibility to add value mappings to diagram to be able to convert range to text.

Hi & congrats for the work done, love your plugin

I try to user grafana-diagram with the templating feature of Grafana

In my dashboard I have variable named 'servers'.
I use this variable in others panels using $servers
I created the diagram panel with the "Repeat Panel" option filled with $servers
But it seems $servers is not recognize as a variable.

Is the templating feature supported and so how to use it ?
If not do you plan to add it ?

Thin links are defined as -- and are shown as green

When you create a thick link with == they show as dark grey

They should show the same colors by default

Side note, the arrow head should also be the same color

Grafana proper supports drill-down links from the panel title. It would be very useful to be able to click on/next to a node/edge and get to a different dashboard.

In some cases the chart ends up having wrong colors for nodes. It can also cause wrong values to be shown.

This seems to happen when for example you have data for foo and foo-a and have foo-a[foo] in your mermaid graph.

Example picture where comet is defined as comet-a[comet] and there's data for both (comet-a have value > 0 and comet should have 0):

also polygons are not being colored.

For example, if I enter _my_prom_query__[[name]] instead of _my_prom_query__[name], the whole diagram is empty without a clue as to what is wrong.

Unfortunately i do not own our Grafana deployment so i am not able to add this plugin and test, but i was wondering if a roll-up function was available. For example, in your diagram, if APP1 was down then have example.com show as Yellow since the service was degraded and if App2 goes down, have it go to orange. Something like that where you can set a warning/error threshold on a child item that changes the parent items warning/error level.

This looks great though!

I can't figure out if its possible to connect subgroups or not, if so, would it be possible to assign a time series value to the subgroup?

Mermaid click events (often used for hyperlinking) do not currently work. The fix is simple. Add this line:

bindEvents(diagramContainer[0]);

right after diagramContainer.html(...) gets called in updateDiagram.

Can you add legend metric Unit?
Example value: bit/s or mbit/s . I using zabbix source

Would be very nice if you could modify the styling of links and arrows when a threshold is hit

for example

linkStyle 3 stroke:#ff3,stroke-width:4px;

With composites, it doesn't seem to display the correct metric name against the value. (I've noticed it always shows the name of the last added metric to the composite's metric list)

as seen from the above, its displaying the app-children value as app-cpu.

Also, are we able to display static text and a metric value on links like we can with nodes ? In the above example, I'd like to display the name of the request and the time its taking on the link.

Is it possible to mimic something like this?

http://blackbird.si/wp-content/uploads/2015/07/Selection_002.png

So that the lines are an entity instead of only the boxes?

Is it possible to have multiple values on an node? For example, if I have three individual metrics in graphite, 50th, 95th and 99th percentile, I would like to be able to map these three to the same alias node. Is that possible or am I missing something?

Hi Team,
I would know if grafana-diagram support influxdb and was tested with influxdb (as currently it support prometheus).
Thanks for your highlight.

I'd like to help get InfluxDB support working. I have the same ideas as @RichiH with the weathermap type wants he mentioned in the PR on the grafana-plugins repo.

Once thing I'm noticing is that I don't have the Legend options as mentioned in the example pictures. My theory was to get the data displaying in the legend and go from there.

It would be very nice if there was an option to mouse-over an edge or node and get a graph in an overlay.

In weathermaps, this graph would display the traffic pattern over the last X time.

Override allows you to change threshold, colors and which value to use (avg, min, max, etc) but won't allow you to change the unit. I know that it may be a nonsense as you may show a diagram showing specific metric for each node (or server).

But diagrams can be extended to be abstract things and nodes may be things that are related to other nodes that could be metrics instead of server. For example, a node may be a server and could have relation with its metrics, say server A has a CPU metric and HEAP metric. Both, CPU and HEAP may be nodes of server A. It's not a workflow though, it may be a graph.

For both grafana 3.1.1 and latest (4..), I can install the diagram plugin, see it in the plugins screen, but then not see it available in a dashboard when I "add a panel"

This is via docker images for both version, using the following method for testing the plugin addition:

docker exec -i -t grafana /usr/sbin/grafana-cli plugins install jdbranham-diagram-panel
docker restart grafana

Hi! First of all thanks for an awesome plugin!

I'm having a few issues with my diagrams looking a bit weird and I just upgraded Grafana to the latest beta so I'm wondering if there are anything you have to update in order to make everything look good again on G4?

Br,
Stian

This is more on the Grafana side, but I am unable to enter subgraphs as per https://knsv.github.io/mermaid/#subgraphs as Grafana always eats my tab. Is there a way around this?

Also tagging @bergquist as he might have input from the Grafana side.

This is observed in both grafana 3.1.0 and 3.1.1.
grafana-diagram panel version 1.2.2
tested on firefox 45, google-chrome 53 and IE11

screenshot

I can trivially add _my_prom_query_[name] -> foo, but I am unclear how to do this for the actuel edge/arrow connecting the two.

Thanks for this great plugin. I have it on a bunch of big screens to display some realtime diagrams of our server park.

But on a big TV the diagrams are to small to read.

It would be great if there was a size settings in percentage.

Thanks

I'd like to display a metric in a node based on the following query:

select count(foo) from bar where field = 'value' and time > now() - 1m

Sometimes there are no results (and that's valid), but the node is blank instead of showing 0.

I assume that something like the single-stat panel's "Value mappings" tab would be a great solution.

Sorry for abusing issues, but I don't know of any other way to contact you... :/

Will there be a new release soon so I can use 7b2105d ?

Alternatively, is there a way to use your plugin from source? It's the first external plugin I have any interest in, so I don't know how to do this...

we have 3 master servers and 13 slave servers, all 3 master servers go to all 13 servers, when i add such graph i cannot see all hosts in viewport

There is somwhere 3rd master server...

Hello,

I have a problem with the panel "Diagram", I want to put different thresholds on my series of data. But in the tabs "Series specific overrides" it doesn't work when I want to select one of my series by it alias. Even when I write it.

Here it is an example from the help of Grafana, this is what I want :

Any ideas? Something I did wrong?

As per grafana/grafana-plugin-repository#41 (comment)

It would be quite useful to be able to replace text with Prometheus label values. I.e. instead of _my_prom_query_[name], I would prefer to be able to write _my_prom_query_[{{instance}}].

First of all: GREAT IDEA! Lots of use cases for this plugin!

I was wondering, for the diagram color changing, are you limited to the 3 levels provided by the grafana tresholds or is there some way to expand this to more levels? I'm looking to create a real time view on a production line with more then three statusses.

See screenshots! It doesn't look fantastic in Chromium, but the data is visible.

I'm looking for a way to model a production line and make the machines change color based on their status. This plugin fits my use, but I have a 'small' problem: you currently cannot increase the size of the diagrams. Would it be hard to add a feature so that the diagram scales with the size of the panel?
I checked the mermaid docs to try and increase the size of the individual blocks, but if you change the size with css style (width, height) it messes up the diagram.

Looking for help to create documentation for the Diagram plugin...
maybe using "gh-pages"

I could not find much help in the docs or on the mermaid js site regarding this request.

Is there a way to color the subgraphs? Currently they are a shade of green and I cannot figure out how to change this. Ideally, it could be a gradient based upon a metric.

Also, is there a way to change the default shape of a subgraph, for example use a circle?

Hi! I'm testing this plugin with ElasticSearch datasource (I don't really know if it's officially supported) and everything but one thing works fine. That one thing are missing value boxes on diagram. As you could see below, I have some values in series, they are also generating proper gradients.
Am I missing something in setting? I was playing with it for couple of minutes but without success.

Edit: It has some connection to styles and used browser. I can see in firebug (in FireFox), that there are some hidden html nodes with proper values. I switched to Chrome and value boxes are visible.

Change the threshold with a series override only works with the specific name.
Example: test1
None if this works:
/test1/
/test\d/
/test1\d*/

TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided double value is non-finite.
at getColorByXPercentage (https://XXXXX/public/plugins/jdbranham-diagram-panel/diagramControl.js?bust=1485172208818:53:19)
at DiagramCtrl.getGradientForValue (https://XXXXX/public/plugins/jdbranham-diagram-panel/diagramControl.js?bust=1485172208818:343:14)
at DiagramCtrl.setValues (https://XXXXX/public/plugins/jdbranham-diagram-panel/diagramControl.js?bust=1485172208818:317:46)
at DiagramCtrl.onDataReceived (https://XXXXX/public/plugins/jdbranham-diagram-panel/diagramControl.js?bust=1485172208818:205:12)
at f.emit (https://XXXXX/public/app/boot.b8fccc44.js:52:2928)
at a.emit (https://XXXXX/public/app/boot.b8fccc44.js:52:5256)
at DiagramCtrl.b.handleQueryResult (https://XXXXX/public/app/boot.b8fccc44.js:46:4942)
at g (https://XXXXX/public/app/boot.b8fccc44.js:42:13902)
at https://XXXXX/public/app/boot.b8fccc44.js:42:14074
at o.$eval (https://XXXXX/public/app/boot.b8fccc44.js:42:21715)

I'd like to use some features of mermaid 6.0.0 in grafana-diagram. Easy enough to update the library manually, but it'd be great to pull it into future releases.

The circle and box nodes work just fine when attempting to color via a metric, however the rhombus only shows the value in a colored bar while the shape itself remains the default off-green color. Is this an oversight, or by design?

When color gradient is checked, no color is rendered at all.

The canvas it tries to read the color from is not yet initialized, giving a rgba(0,0,0,0) value.
On editing of the diagram, it will display correctly upon refresh (eg. threshold change).

Hello, I have the following enhancement to suggest.

I use grafana row templates to create a set of rows where each on should contain a diagram. As of now this works as long as each row uses the same diagram. What would be great is if i could create the diagrams dynamically.

I think either this could work by providing some mapping rules on the selected metrics or one would need to supply the graph-structure with another data-source like the SimpleJson Data-Source plugin.

If you think that is at all possible, i will try to do this in a fork of this plugin so you can integrate it later. I would be glad if anyone had any ideas on how to realize this.

With grafana-digram version 1.3.0 and latest on git the circles are filled when I am making the diagram, but not after reloading the page/dashboard in grafana.

Tested with grafana 3.1.0 and 3.1.1. Chrome and Firefox.

I view this page:

https://URL/grafana/dashboard/db/diagram-test-panel-2?panelId=3&fullscreen&edit&editorTab=Diagram

or this:

https://URL/grafana/dashboard/db/diagram-test-panel-2?editorTab=General&panelId=3&fullscreen&edit

The circles are filled.

But if I view:

https://URL/grafana/dashboard/db/diagram-test-panel-2

They are not.

Hello everyone,

First of all, thanks for the great plugin. It's amazing and super easy to work with!

As I've been working with the plugin, I've found an issue that's been causing some pain. The node colors are only updated after the first refresh interval. Each subsequent interval also triggers the update of the node colors. However, if I do not have the dashboard configured to update periodically, the node colors never change from the default light green.

This is also effecting my ability to embed images of the diagram in our documentation. Since the image generated by Grafana does not show any of the actual node colors (according to the rules I setup) since no update is being triggered on the back-end, the nodes are all light green.

I would expect that the metric data that determines the node colors would be updated on page load, as well as when the frequency timer elapses. Perhaps it's not the metric data necessarily, but something in the diagram library which is only being triggered on the update interval.

In any case, I thought I'd report the bug since I like the project so much. If there is anything I can do to help, feel free to let me know.

Thanks everyone,

Christopher

Our, still very basic, rump diagram looks like so:
https://gist.github.com/markvdb/24d58acf8cba0a856bccfb1e174f99f9

http://knsv.github.io/mermaid/live_editor/#/view/Z3JhcGggVEQKCiAgc3ViZ3JhcGggdmlkZW8gYm94ZXMKICAgIHN1YmdyYXBoIGF3MTEyMAogICAgICBhdzExMjBjYW1bYXcxMTIwY2FtPGJyIC8-aXA6IDEwMC4xMDAuMTAwLjEwMDxiciAvPm11bHRpY2FzdDogMjI3LjAuMC4xXQogICAgICBhdzExMjBzbGlkZXNbYXcxMTIwc2xpZGVzPGJyIC8-aXA6IDEwMC4xMDAuMTAwLjEwMDxiciAvPm11bHRpY2FzdDogMjI3LjAuMC4xXQogICAgZW5kCiAgICBzdWJncmFwaCBhdzExMjEKICAgICAgYXcxMTIxY2FtW2F3MTEyMWNhbTxiciAvPmlwOiAxMDAuMTAwLjEwMC4xMDA8YnIgLz5tdWx0aWNhc3Q6IDIyNy4wLjAuMV0KICAgICAgYXcxMTIxc2xpZGVzW2F3MTEyMXNsaWRlczxiciAvPmlwOiAxMDAuMTAwLjEwMC4xMDA8YnIgLz5tdWx0aWNhc3Q6IDIyNy4wLjAuMV0KICAgIGVuZAogICAgc3ViZ3JhcGggYXcxMTI0CiAgICAgIGF3MTEyNGNhbVthdzExMjRjYW08YnIgLz5pcDogMTAwLjEwMC4xMDAuMTAwPGJyIC8-bXVsdGljYXN0OiAyMjcuMC4wLjFdCiAgICAgIGF3MTEyNHNsaWRlc1thdzExMjRzbGlkZXM8YnIgLz5pcDogMTAwLjEwMC4xMDAuMTAwPGJyIC8-bXVsdGljYXN0OiAyMjcuMC4wLjFdCiAgICBlbmQKICAgIHN1YmdyYXBoIGF3MTEyNQogICAgICBhdzExMjVjYW1bYXcxMTI1Y2FtPGJyIC8-aXA6IDEwMC4xMDAuMTAwLjEwMDxiciAvPm11bHRpY2FzdDogMjI3LjAuMC4xXQogICAgICBhdzExMjVzbGlkZXNbYXcxMTI1c2xpZGVzPGJyIC8-aXA6IDEwMC4xMDAuMTAwLjEwMDxiciAvPm11bHRpY2FzdDogMjI3LjAuMC4xXQogICAgZW5kCiAgZW5kCgogIHN1YmdyYXBoIHZvY3RvIGNvbnRhaW5lcnMKICAgIHN1YmdyYXBoIHZvY3RvaG9zdDAKICAgIHZvY3RvY29udGFpbmVyX2F3MTEyMAogICAgdm9jdG9jb250YWluZXJfYXcxMTIxCiAgICB2b2N0b2NvbnRhaW5lcl9hdzExMjQKICAgIHZvY3RvY29udGFpbmVyX2F3MTEyNQogICAgZW5kCiAgZW5kCgogIHN1YmdyYXBoIHN0cmVhbWluZyBiYWNrZW5kcwogICAgc3RyZWFtaW5nX2JhY2tlbmQxCiAgZW5kCgogIHN1YmdyYXBoIHN0cmVhbWluZyBmcm9udGVuZHMKICAgIHN0cmVhbWluZ19mcm9udGVuZDEKICBlbmQKCiUlIExpbmtzIGJldHdlZW4gZWxlbWVudHMKCiUlYXcxMTIwCmF3MTEyMGNhbSAtLT4gdm9jdG9jb250YWluZXJfYXcxMTIwCmF3MTEyMHNsaWRlcyAtLT4gdm9jdG9jb250YWluZXJfYXcxMTIwCnZvY3RvY29udGFpbmVyX2F3MTEyMCAtLT4gc3RyZWFtaW5nX2JhY2tlbmQxCgolJWF3MTEyMQphdzExMjFjYW0gLS0-IHZvY3RvY29udGFpbmVyX2F3MTEyMQphdzExMjFzbGlkZXMgLS0-IHZvY3RvY29udGFpbmVyX2F3MTEyMQp2b2N0b2NvbnRhaW5lcl9hdzExMjEgLS0-IHN0cmVhbWluZ19iYWNrZW5kMQoKJSVhdzExMjQKYXcxMTI0Y2FtIC0tPiB2b2N0b2NvbnRhaW5lcl9hdzExMjQKYXcxMTI0c2xpZGVzIC0tPiB2b2N0b2NvbnRhaW5lcl9hdzExMjQKdm9jdG9jb250YWluZXJfYXcxMTI0IC0tPiBzdHJlYW1pbmdfYmFja2VuZDEKCiUlYXcxMTI1CmF3MTEyNWNhbSAtLT4gdm9jdG9jb250YWluZXJfYXcxMTI1CmF3MTEyNXNsaWRlcyAtLT4gdm9jdG9jb250YWluZXJfYXcxMTI1CnZvY3RvY29udGFpbmVyX2F3MTEyNSAtLT4gc3RyZWFtaW5nX2JhY2tlbmQxCgoKc3RyZWFtaW5nX2JhY2tlbmQxIC0tPnN0cmVhbWluZ19mcm9udGVuZDE

It will include 24 video boxes over time which might introduce scaling issues. This is partially a "here, show this to your girlfriend" and partially a "is there anything you can do to make this fit nicely into one dashboard".

Also tagging @markvdb so he sees this.

The legend table is difficult to read because it doesn't allow the user to specify the number of decimals that are displayed. For example the difference between 9.6543584132% and 95.695347841% is huge but that isn't obvious from the legend.

The Table plugin has a default number of decimals of 2, which is great.

When any metric is added to panel, there is an error: "Cannot read property '0' of undefined"