Hi Grafanistas,
We have marcusolsson-dynamictext-panel that renders (for example) a Plotly visualisation well in Grafana v10.
However in v11, we cannot achieve a working solution. We tried copying over all the edits manually from the one version to the other.
We also tried importing the panel json from v10 to v11, no luck.
There are no errors reported in the UI and no errors in the grafana (docker) logs either. (We disabled sanitize HTML to use external resources).
Taking the liberty to drop the json here below.
Any thoughts are welcome.
Many thanks
E
Image of the rendering in v10
{
"gridPos": {
"h": 16,
"w": 13,
"x": 0,
"y": 0
},
"id": 2,
"libraryPanel": {
"id": 1,
"orgId": 1,
"folderId": 0,
"folderUid": "",
"uid": "aa3dfaaa-c7b2-4ba2-b73f-8f5cd7d4f009",
"name": "development",
"kind": 1,
"type": "marcusolsson-dynamictext-panel",
"description": "",
"model": {
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"description": "",
"fieldConfig": {
"defaults": {
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 16,
"w": 13,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"afterRender": "",
"content": "<body>\n <div id=\"addisAbeba\">\n <!-- Plotly chart will be drawn inside this DIV -->\n </div>\n</body>",
"defaultContent": "The query didn't return any results. Sorrry!",
"editor": {
"format": "auto",
"height": 254,
"language": "html"
},
"editors": [
"helpers",
"styles",
"afterRender"
],
"externalScripts": [
{
"id": "44c4a883-8dba-4e44-aee1-147392d44cf6",
"url": "https://cdn.plot.ly/plotly-2.24.1.min.js"
}
],
"externalStyles": [],
"helpers": "(async () => {\n let url = 'https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv';\n\n let fetchData = await fetch(url);\n let csvData = await fetchData.text();\n let rows = csvToJson(csvData);\n\n var trace1 = {\n x: unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),\n mode: 'markers',\n marker: {\n size: 12,\n line: {\n color: 'rgba(217, 217, 217, 0.14)',\n width: 0.5\n },\n opacity: 0.8\n },\n type: 'scatter3d'\n };\n\n var trace2 = {\n x: unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),\n mode: 'markers',\n marker: {\n color: 'rgb(127, 127, 127)',\n size: 12,\n symbol: 'circle',\n line: {\n color: 'rgb(204, 204, 204)',\n width: 1\n },\n opacity: 0.8\n },\n type: 'scatter3d'\n };\n\n var data = [trace1, trace2];\n\n var layout = {\n margin: {\n l: 0,\n r: 0,\n b: 0,\n t: 0\n }\n };\n Plotly.newPlot('addisAbeba', data, layout);\n})();\n\nconst unpack = (rows, key) => {\n return rows.map(function (row) { return row[key]; });\n}\n\nconst csvToJson = (data, delimiter = ',') => {\n const titles = data.slice(0, data.indexOf('\\r\\n')).split(delimiter);\n return data\n .slice(data.indexOf('\\n') + 1)\n .split('\\r\\n')\n .map(v => {\n const values = v.split(delimiter);\n return titles.reduce(\n (obj, title, index) => ((obj[title] = values[index]), obj),\n {}\n );\n });\n};",
"renderMode": "data",
"status": "A-series",
"styles": "",
"wrap": true
},
"pluginVersion": "4.5.0",
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"queryType": "randomWalk",
"refId": "A"
}
],
"title": "development",
"type": "marcusolsson-dynamictext-panel"
},
"version": 5,
"meta": {
"folderName": "General",
"folderUid": "",
"connectedDashboards": 1,
"created": "2024-06-02T11:21:51Z",
"updated": "2024-06-02T11:40:16Z",
"createdBy": {
"avatarUrl": "/avatar/46d229b033af06a191ff2267bca9ae56",
"id": 1,
"name": "admin"
},
"updatedBy": {
"avatarUrl": "/avatar/46d229b033af06a191ff2267bca9ae56",
"id": 1,
"name": "admin"
}
}
},
"title": "development",
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"queryType": "randomWalk",
"refId": "A"
}
],
"options": {
"renderMode": "data",
"editors": [
"helpers",
"styles",
"afterRender"
],
"externalStyles": [],
"externalScripts": [
{
"id": "44c4a883-8dba-4e44-aee1-147392d44cf6",
"url": "https://cdn.plot.ly/plotly-2.24.1.min.js"
}
],
"editor": {
"language": "html",
"format": "auto",
"height": 254
},
"wrap": true,
"content": "<body>\n <div id=\"addisAbeba\">\n <!-- Plotly chart will be drawn inside this DIV -->\n </div>\n</body>",
"defaultContent": "The query didn't return any results. Sorrry!",
"helpers": "(async () => {\n let url = 'https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv';\n\n let fetchData = await fetch(url);\n let csvData = await fetchData.text();\n let rows = csvToJson(csvData);\n\n var trace1 = {\n x: unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),\n mode: 'markers',\n marker: {\n size: 12,\n line: {\n color: 'rgba(217, 217, 217, 0.14)',\n width: 0.5\n },\n opacity: 0.8\n },\n type: 'scatter3d'\n };\n\n var trace2 = {\n x: unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),\n mode: 'markers',\n marker: {\n color: 'rgb(127, 127, 127)',\n size: 12,\n symbol: 'circle',\n line: {\n color: 'rgb(204, 204, 204)',\n width: 1\n },\n opacity: 0.8\n },\n type: 'scatter3d'\n };\n\n var data = [trace1, trace2];\n\n var layout = {\n margin: {\n l: 0,\n r: 0,\n b: 0,\n t: 0\n }\n };\n Plotly.newPlot('addisAbeba', data, layout);\n})();\n\nconst unpack = (rows, key) => {\n return rows.map(function (row) { return row[key]; });\n}\n\nconst csvToJson = (data, delimiter = ',') => {\n const titles = data.slice(0, data.indexOf('\\r\\n')).split(delimiter);\n return data\n .slice(data.indexOf('\\n') + 1)\n .split('\\r\\n')\n .map(v => {\n const values = v.split(delimiter);\n return titles.reduce(\n (obj, title, index) => ((obj[title] = values[index]), obj),\n {}\n );\n });\n};",
"afterRender": "",
"styles": "",
"status": "A-series"
},
"fieldConfig": {
"defaults": {
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
}
},
"overrides": []
},
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"description": "",
"pluginVersion": "4.5.0",
"type": "marcusolsson-dynamictext-panel"
}