Regarding how to set width of Graph in Grafana?

1

Hello All,

Greetings!!

I have prepared a graph which shows architecture diagram of environments,the more servers are being added(with Sub graph using Mermaid JS) more smaller graph is getting(size is getting decreased which is making it difficult to understand, since fonts and box sizes both are decreasing).

I want to make its size to normal or increase its size, I tried looking google but couldn’t find anything, could you please do help me here? Will be grateful.

EDIT: Community, will be grateful to you, if experts could help here.

Thanks,
R. Singh

2

You can change the width by dragging the corner of the graph in edit mode. Or you can edit it directly in the json view.

1 Like
3

@clanlaw Thanks a TON for replying here, I tried EDIT–> more–> Json option and played with gridPos’s height and width options but only my Graph area is increasing NOT the bars and boxes height and width(along with their fonts); could you please guide more here, I am really NOT able to understand JSON file here, your guidance is greatly appreciated here.

I want to see my boxes(different sub graphs there) clearly,number of boxes increasing its getting smaller and smaller.

Thanks,
R. Singh

4

Sorry, I thought it was the size of the graph you wanted to change. Reading you post again I don’t know what you mean by subgraph and mermaid js so I probably can’t help.

5

@clanlaw I apologies for not being clear here. I am using Diagram option of creating Dashboard. In that we use mermaid JS code to create flow diagrams. Where I am keep adding flows which keep decreasing the size of graphs.

The option which you mentioned was for panel which is increasing height but NOT affecting flows elements present inside it.

Sorry I can’t put screen shot of it but mermaid JS allows users to create flows is what a bit I know about it.

If you and other experts cud guide on it will be grateful.

Thanks,
R. Singh

6

hey @clanlaw @princeravinderias1 @jangaraj @usman.ahmad @tonyswumac @grant2
I hope you are very well,
can you please help me out, How can I edit in directly json view & set width or height.

If this option does not work then you can tell us if you have another option.

Here it is my json panel

{
“datasource”: {
“type”: “mssql”,
“uid”: “b725e3d2-d13d-431c-aa26-cd343ca33b91”
},
“gridPos”: {
“h”: 8,
“w”: 12,
“x”: 0,
“y”: 0
},
“id”: 1,
“maxPerRow”: 60,
“options”: {
“nodes”: {
“arcs”: [
{
“color”: “#73BF69”,
“field”: “arc__cpu”
},
{
“color”: “#5794F2”,
“field”: “arc__memory”
}
]
}
},
“targets”: [
{
“dataset”: “Users”,
“datasource”: {
“type”: “mssql”,
“uid”: “b725e3d2-d13d-431c-aa26-cd343ca33b91”
},
“editorMode”: “code”,
“format”: “table”,
“rawQuery”: true,
“rawSql”: “SELECT TOP (1000) [id] as id\r\n ,[title] as title\r\n ,[sub_title] as subTitle\r\n ,[cpu] as mainStat\r\n ,[memory] as SecondaryStat\r\n ,[c_disk_size] as arc__cpu\r\n ,[d] as arc__memory\r\n ,[detail]\r\n FROM [Users].[dbo].[Servers]\r\n”,
“refId”: “Node”,
“sql”: {
“columns”: [
{
“parameters”: [
{
“name”: “id”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “title”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “sub_title”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “cpu”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “memory”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “c_disk_size”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “d”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “c_disk_size_color”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “d_color”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “detail”,
“type”: “functionParameter”
}
],
“type”: “function”
}
],
“groupBy”: [
{
“property”: {
“type”: “string”
},
“type”: “groupBy”
}
],
“limit”: 50
},
“table”: “dbo.Servers”
},
{
“dataset”: “Users”,
“datasource”: {
“type”: “mssql”,
“uid”: “b725e3d2-d13d-431c-aa26-cd343ca33b91”
},
“editorMode”: “code”,
“format”: “table”,
“hide”: false,
“rawQuery”: true,
“rawSql”: “SELECT TOP (1000) [id] \r\n ,[source]\r\n ,[target]\r\n ,[main_stat] as mainStat\r\n ,[secondary_stat] as secondaryStat\r\n ,[detail_one] as detail__1\r\n FROM [Users].[dbo].[Edge]\r\n”,
“refId”: “Edge”,
“sql”: {
“columns”: [
{
“parameters”: [
{
“name”: “id”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “source”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “target”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “main_stat”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “secondary_stat”,
“type”: “functionParameter”
}
],
“type”: “function”
},
{
“parameters”: [
{
“name”: “detail_one”,
“type”: “functionParameter”
}
],
“type”: “function”
}
],
“groupBy”: [
{
“property”: {
“type”: “string”
},
“type”: “groupBy”
}
],
“limit”: 50
},
“table”: “dbo.Edge”
}
],
“title”: “Panel Title”,
“type”: “nodeGraph”
}

Here it is Node Graph Image

image
image1919×924 138 KB

Thanks in Advance.