Hi
Following on from issue here on this now closed thread:
Cannot render Observable Plot in dynamic text panel
We tried a number of different sources and options and cannot get a rendering of Observable’s Plot in Grafana version 10 on the marcusolsson-dynamictext-panel.
We used as a reference both of these html files below that do render the graph when opened in a browser. However, with these same sources and code, Grafana does not render and graph in the Panel and the error returned is Plot is not defined.
As an example, we exported three attempted panels in a dashboard with a view to uploading to play.grafana.com but this dashboard is version 11, which as correctly mentioned in the closed thread does not support the dynamic text panel.
This dashboard is also supplied FWIW, inline below the working html files.
Any suggestions on how to solve this are welcome.
Thank you in advance and warm wishes
E
html file 1
<html>
<body>
<div id="myplot"></div>
</body>
<head>
<script type="module">
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
const plot = Plot.rectY({length: 10000}, Plot.binX({y: "count"}, {x: Math.random})).plot();
const div = document.querySelector("#myplot");
div.append(plot);
</script>
</head>
</html>
html file 2
<!DOCTYPE html>
<html>
<body>
<h1>Observable Plot Example</h1>
<div id="plot"></div>
<script type="module">
import * as Plot from "https://cdn.skypack.dev/@observablehq/plot@0.6";
const data = [
{x: 1, y: 5},
{x: 2, y: 7},
{x: 3, y: 3},
{x: 4, y: 8},
{x: 5, y: 6}
];
const plot = Plot.plot({
marks: [
Plot.lineX(data, {x: "x", y: "y", stroke: "steelblue"})
],
x: {
label: "X-axis"
},
y: {
label: "Y-axis"
},
width: 600,
height: 400
});
const plotDiv = document.getElementById("plot");
plotDiv.appendChild(plot);
</script>
</body>
</html>
{
"__inputs": [],
"__elements": {},
"__requires": [
{
"type": "grafana",
"id": "grafana",
"name": "Grafana",
"version": "10.0.0"
},
{
"type": "panel",
"id": "marcusolsson-dynamictext-panel",
"name": "Dynamic Text",
"version": "4.5.0"
}
],
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": null,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"description": "",
"fieldConfig": {
"defaults": {
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 10,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"afterRender": "const datas = [\n { x: 1, y: 5 },\n { x: 2, y: 7 },\n { x: 3, y: 3 },\n { x: 4, y: 8 },\n { x: 5, y: 6 }\n];\n\nconst plot = Plot.plot({\n marks: [\n Plot.lineX(datas, { x: \"x\", y: \"y\", stroke: \"steelblue\" })\n ],\n x: {\n label: \"X-axis\"\n },\n y: {\n label: \"Y-axis\"\n },\n width: 600,\n height: 400\n});\n\nconst plotDiv = document.getElementById(\"plot\");\nplotDiv.appendChild(plot);",
"content": "<!DOCTYPE html>\n<html>\n\n<h1>Observable Plot Example</h1>\n<div id=\"plot\"></div>\n\n</html>",
"defaultContent": "The query didn't return any results. Sorrry!",
"editor": {
"format": "auto",
"height": 254,
"language": "html"
},
"editors": [
"helpers",
"afterRender"
],
"externalScripts": [
{
"id": "92fd95dc-835f-41c7-a189-b3582400e676",
"url": "https://cdn.skypack.dev/@observablehq/plot@0.6"
}
],
"externalStyles": [],
"helpers": "const datas = [\n { x: 1, y: 5 },\n { x: 2, y: 7 },\n { x: 3, y: 3 },\n { x: 4, y: 8 },\n { x: 5, y: 6 }\n];\n\nconst plot = Plot.plot({\n marks: [\n Plot.lineX(datas, { x: \"x\", y: \"y\", stroke: \"steelblue\" })\n ],\n x: {\n label: \"X-axis\"\n },\n y: {\n label: \"Y-axis\"\n },\n width: 600,\n height: 400\n});\n\nconst plotDiv = document.getElementById(\"plot\");\nplotDiv.appendChild(plot);",
"renderMode": "data",
"status": "A-series",
"styles": "",
"wrap": true
},
"pluginVersion": "4.5.0",
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"queryType": "randomWalk",
"refId": "A"
}
],
"title": "all in one Plot using CDN",
"type": "marcusolsson-dynamictext-panel"
},
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"description": "",
"fieldConfig": {
"defaults": {
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 13,
"x": 10,
"y": 0
},
"id": 3,
"options": {
"afterRender": "const datas = [\n { x: 1, y: 5 },\n { x: 2, y: 7 },\n { x: 3, y: 3 },\n { x: 4, y: 8 },\n { x: 5, y: 6 }\n];\n\nconst plot = Plot.plot({\n marks: [\n Plot.lineX(datas, { x: \"x\", y: \"y\", stroke: \"steelblue\" })\n ],\n x: {\n label: \"X-axis\"\n },\n y: {\n label: \"Y-axis\"\n },\n width: 600,\n height: 400\n});\n\nconst plotDiv = document.getElementById(\"plot\");\nplotDiv.appendChild(plot);",
"content": "<!DOCTYPE html>\n<html>\n\n<h1>Observable Plot Example</h1>\n<div id=\"plot\"></div>\n\n</html>",
"defaultContent": "The query didn't return any results. Sorrry!",
"editor": {
"format": "auto",
"height": 254,
"language": "html"
},
"editors": [
"helpers",
"afterRender"
],
"externalScripts": [
{
"id": "3111b191-f247-4a51-b99f-509dea7913e5",
"url": "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"
}
],
"externalStyles": [],
"helpers": "const datas = [\n { x: 1, y: 5 },\n { x: 2, y: 7 },\n { x: 3, y: 3 },\n { x: 4, y: 8 },\n { x: 5, y: 6 }\n];\n\nconst plot = Plot.plot({\n marks: [\n Plot.lineX(datas, { x: \"x\", y: \"y\", stroke: \"steelblue\" })\n ],\n x: {\n label: \"X-axis\"\n },\n y: {\n label: \"Y-axis\"\n },\n width: 600,\n height: 400\n});\n\nconst plotDiv = document.getElementById(\"plot\");\nplotDiv.appendChild(plot);",
"renderMode": "data",
"status": "A-series",
"styles": "",
"wrap": true
},
"pluginVersion": "4.5.0",
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"queryType": "randomWalk",
"refId": "A"
}
],
"title": "all in one PlotCDN +ESM",
"type": "marcusolsson-dynamictext-panel"
},
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"description": "",
"fieldConfig": {
"defaults": {
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 12,
"w": 10,
"x": 0,
"y": 10
},
"id": 4,
"options": {
"afterRender": "",
"content": "<!DOCTYPE html>\n<html>\n\n<h1>Observable Plot Example</h1>\n<div id=\"myplot\"></div>\n\n</html>",
"defaultContent": "The query didn't return any results. Sorrry!",
"editor": {
"format": "auto",
"height": 254,
"language": "html"
},
"editors": [
"helpers",
"afterRender"
],
"externalScripts": [
{
"id": "3111b191-f247-4a51-b99f-509dea7913e5",
"url": "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"
}
],
"externalStyles": [],
"helpers": "const plot = Plot.rectY({ length: 10000 }, Plot.binX({ y: \"count\" }, { x: Math.random })).plot();\nconst div = document.querySelector(\"#myplot\");\ndiv.append(plot);",
"renderMode": "data",
"status": "A-series",
"styles": "",
"wrap": true
},
"pluginVersion": "4.5.0",
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"queryType": "randomWalk",
"refId": "A"
}
],
"title": "all in one PlotCDN +ESM II",
"type": "marcusolsson-dynamictext-panel"
}
],
"refresh": "",
"schemaVersion": 38,
"style": "dark",
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "Full Page attempt",
"uid": "fa4819e7-5c9d-4da4-8b06-fbeecc48ff96",
"version": 8,
"weekStart": ""
}