How to do field overrides with node graph panel

Using Grafana v8.2.1 (88622d7f09) and the Node Graph Panel, with a mysql datasource, I want to set the units to seconds (so that it will automatically show days or weeks when appropriate, like some other panels do) for the mainStat and decrease the number of decimal places shown and otherwise do field overrides. Right now, both stats on the nodes are showing 2 decimal places, and no units. Also, the legend just shows “mainStat” and “secondaryStat”; I want to change those labels like I can do with other panels.

The documentation for this panel states all this is possible, but doesn’t say how.

I can do this with some other panels in the side pane, “standard options”. The standard options doesn’t show up for me for the Node Graph Panel. I’m willing to plug values into the JSON, but I haven’t found the right values to make that work either.

I don’t see any errors in the UI or in the logfile related to this.

THANKS for any help or pointers.
Andrew

Here’s what I mean by the stats showing 2 digits: Screen Shot 2021-11-15 at 3.19.32 PM

And here’s what I mean when I say the side panel not showing “standard options”:

I can format the numbers and convert to strings to solve the decimal places and data units issues. But I still don’t know how to specify the arc colors or rename the items in the legend. I can edit the dashboard json, but what do I put in there?

1 Like

now i have the same problem . i can find no way to set the config of the node graph. i guess they may put all this to grafana tempo

could you please provide sample nodes and edges data as inline csv here

timestamp,value,metric
2022-05-25 23:00:00,34.5,'yoohoo'
2022-05-25 23:00:00,14.5,'zimzam'
2022-05-25 23:00:00,25.5,'karfukle'

but near to real representation of your data, obfuscated is necessary. Because, we dont have access to your database :wink:

nodes data

id title mainStat arc__passed arc__failed
1 nginx 21233 0.283 0.717
2 serviceA 12000 0.167 0.833
3 serviceB 8233 0.486 0.514

edges data

id source target
fasdfdfsfa 1 2

I hope the arc__passed and arc__failed showed in different color instead of default gray.
but it seems that, there is no way to set the config.color.fixedColor when i use mysql as data source.

thanks for you help. i hope i have made it clear

1 Like

your data source is also mysql? Remember it was asked of you to provide your data as inline csv. help us help you.

yes, mysql too. as your wish

nodes data

id,title,mainStat,arc__passed,arc__failed
‘1’,‘nginx’,21233,0.283,0.717
‘2’,‘serviceA’,12000,0.167,0.833
‘3’,‘serviceB’,8233,0.486,0.514

edges data

id,source,target
‘fasdfdfsfa’,‘1’,‘2’

thank you

1 Like

ended up using the following for now.

there is a bit there for providing colorin to the nodes. will try to look further into how to do it with mysql

image

i have searched this doc before. i tried the name color column as it said.but it seems not work in mysql datasource.

i think the plugin ( grafana-infinity-datasource)has do some work to set the metadata of column.

is there some way in mysql datasource to set the metadata of the node ?

i find this json data in mysql query – query inspector – json – pannel data

i think the config.color.fixedColor should be set here.

{
“name”: “id”,
“type”: “string”,
“typeInfo”: {
“frame”: “string”,
“nullable”: true
},
“config”: {},
“values”: [
“1”,
“2”,
“3”
],
“entities”: {},
“state”: {
“displayName”: “id”,
“multipleFrames”: false,
“scopedVars”: {
“__series”: {
“text”: “Series”,
“value”: {
“name”: “Series (nodes)”
}
},
“__field”: {
“text”: “Field”,
“value”: {}
}
},
“seriesIndex”: 0
}
},

Notice that is said here

If you have any arc__* field, corresponding value (number) will be used as the nodes arc value. Note : Total value of row item should sum to 1. If you need to specify a color for the arc__* field, add a new field called arc__*_color.

{
	"nodes": [
		{
			"id": 1,
			"title": "nginx",
			"mainStat": 21233,
			"arc__passed": 0.283,
			"passed_color": "blue",
			"arc__failed": 0.717,
			"failed_color": "red"
		},
		{
			"id": 2,
			"title": "serviceA",
			"mainStat": 12000,
			"arc__passed": 0.167,
			"passed_color": "blue",
			"arc__failed": 0.833,
			"failed_color": "red"
		},
		{
			"id": 3,
			"title": "serviceB",
			"mainStat": 8233,
			"arc__passed": 0.486,
			"passed_color": "green",
			"arc__failed": 0.514,
			"failed_color": "red"
		}
	],
	"edges": {
		"id": "a",
		"source": 1,
		"target": 2
	}
}

any idea how you do this part when using mysql as data source?

FROM

This visualization needs a specific shape of the data to be returned from the data source in order to correctly display it.

Data source needs to return two data frames, one for nodes and one for edges. You have to set frame.meta.preferredVisualisationType = 'nodeGraph' on both data frames or name them nodes and edges respectively for the node graph to render.

i have tried these data with bar graph, i think bar graph worked well.

bar graph puglin allows user set config such as color, line sharp and so on, in the override tab. I tried the other official graph types, all of them can set config when use mysql as datasource in the “override” tab, except node graph.

so i think node graph can copy the others plan. they are friendly enough,

if that way takes too much time, i think node graph can just allow user to submit some config in the json, or allow user to submit a json template which could be filled by sql result.
it can help a lot too.

1 Like

agreed, they need to allow this setting for each query frame

image