-
|
Hi, Is it possible to select options of a multi-option variable in javascript? I tried through getTemplateSrv() but setting selected there doesn't seem to work. Thank you! |
Beta Was this translation helpful? Give feedback.
Answered by
ZuperZee
Nov 18, 2022
Replies: 2 comments 2 replies
-
|
The main part is: const variableString = getTemplateSrv().replace('$variable', {}, 'json');
const variableValue = JSON.parse(variableString);
console.log(variableValue);and you can use the Different formats can also be used https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/#advanced-variable-format-options.
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 5,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 12,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"SVGBaseFix": true,
"add100Percentage": false,
"calcsMutation": "standard",
"centerAlignContent": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"css": "* {\n font-family: Open Sans;\n}\n",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "<table>\n</table>",
"onInit": "",
"onInitOnResize": false,
"onRender": "const tableElt = htmlNode.querySelector(\"table\");\nconst variableFormats = [\n \"csv\",\n \"distributed\",\n \"doublequote\",\n \"glob\",\n \"json\",\n \"percentencode\",\n \"pipe\",\n \"raw\",\n \"regex\",\n \"singlequote\",\n \"sqlstring\",\n \"text\",\n \"queryparam\",\n];\n\ntableElt.innerHTML = \"\"; // Clear content\n\nfor (format of variableFormats) {\n const value = getTemplateSrv().replace(\"$variable\", {}, format);\n createElement(format, value);\n}\n\nfunction createElement(format, value) {\n const trElt = document.createElement(\"tr\");\n const tdFormatElt = document.createElement(\"td\");\n const tdValueElt = document.createElement(\"td\");\n tdFormatElt.textContent = format;\n tdValueElt.textContent = value;\n trElt.append(tdFormatElt, tdValueElt);\n tableElt.append(trElt);\n}\n",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": true
},
"title": "Variable formats",
"type": "gapit-htmlgraphics-panel"
},
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 12,
"x": 12,
"y": 0
},
"id": 3,
"options": {
"SVGBaseFix": true,
"add100Percentage": false,
"calcsMutation": "standard",
"centerAlignContent": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"css": "* {\n font-family: Open Sans;\n}\n",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "<div>Open the console (ctrl+shift+j)</div>",
"onInit": "",
"onInitOnResize": false,
"onRender": "const variableString = getTemplateSrv().replace('$variable', {}, 'json');\nconst variableValue = JSON.parse(variableString);\nconsole.log(variableValue);\n",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": true
},
"title": "console.log",
"type": "gapit-htmlgraphics-panel"
}
],
"schemaVersion": 37,
"style": "dark",
"tags": [],
"templating": {
"list": [
{
"current": {
"selected": false,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "variable",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "a",
"value": "a"
},
{
"selected": false,
"text": "b",
"value": "b"
},
{
"selected": false,
"text": "c",
"value": "c"
},
{
"selected": false,
"text": "d",
"value": "d"
},
{
"selected": false,
"text": "e",
"value": "e"
}
],
"query": "a,b,c,d,e",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
}
]
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "Multi option variable",
"uid": "tJedAIO4z",
"version": 17,
"weekStart": ""
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Ops, I think I misread your question (how to set variables, not get). |
Beta Was this translation helpful? Give feedback.
-
|
Main code: htmlGraphics.locationService.partial({
"var-variable": ["a", "b", "c"],
});Full example:
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 5,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 12,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"SVGBaseFix": true,
"add100Percentage": false,
"calcsMutation": "standard",
"centerAlignContent": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"css": "* {\n font-family: Open Sans;\n}\n",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "<table>\n</table>",
"onInit": "",
"onInitOnResize": false,
"onRender": "const tableElt = htmlNode.querySelector(\"table\");\nconst variableFormats = [\n \"csv\",\n \"distributed\",\n \"doublequote\",\n \"glob\",\n \"json\",\n \"percentencode\",\n \"pipe\",\n \"raw\",\n \"regex\",\n \"singlequote\",\n \"sqlstring\",\n \"text\",\n \"queryparam\",\n];\n\ntableElt.innerHTML = \"\"; // Clear content\n\nfor (format of variableFormats) {\n const value = getTemplateSrv().replace(\"$variable\", {}, format);\n createElement(format, value);\n}\n\nfunction createElement(format, value) {\n const trElt = document.createElement(\"tr\");\n const tdFormatElt = document.createElement(\"td\");\n const tdValueElt = document.createElement(\"td\");\n tdFormatElt.textContent = format;\n tdValueElt.textContent = value;\n trElt.append(tdFormatElt, tdValueElt);\n tableElt.append(trElt);\n}\n",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": true
},
"title": "Variable formats",
"type": "gapit-htmlgraphics-panel"
},
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 12,
"x": 12,
"y": 0
},
"id": 3,
"options": {
"SVGBaseFix": true,
"add100Percentage": false,
"calcsMutation": "standard",
"centerAlignContent": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"css": "* {\n font-family: Open Sans;\n}\n",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "<div>Open the console (ctrl+shift+j)</div>",
"onInit": "",
"onInitOnResize": false,
"onRender": "const variableString = getTemplateSrv().replace('$variable', {}, 'json');\nconst variableValue = JSON.parse(variableString);\nconsole.log(variableValue);\n",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": true
},
"title": "console.log",
"type": "gapit-htmlgraphics-panel"
},
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 12,
"x": 0,
"y": 11
},
"id": 5,
"options": {
"SVGBaseFix": true,
"add100Percentage": false,
"calcsMutation": "standard",
"centerAlignContent": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"css": "* {\n font-family: Open Sans;\n}\n",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "<div>\n <button id=\"set-all\">Set: All</button>\n <button id=\"set-a\">Set: a</button>\n <button id=\"set-b\">Set: b</button>\n <button id=\"set-abc\">Set: a, b, c</button>\n</div>",
"onInit": "const setAllElt = htmlNode.querySelector(\"#set-all\");\nconst setAElt = htmlNode.querySelector(\"#set-a\");\nconst setBElt = htmlNode.querySelector(\"#set-b\");\nconst setABCElt = htmlNode.querySelector(\"#set-abc\");\n\nsetAllElt.addEventListener(\"click\", () => {\n htmlGraphics.locationService.partial({ \"var-variable\": \"All\" });\n});\n\nsetAElt.addEventListener(\"click\", () => {\n htmlGraphics.locationService.partial({ \"var-variable\": \"a\" });\n});\n\nsetBElt.addEventListener(\"click\", () => {\n htmlGraphics.locationService.partial({ \"var-variable\": \"b\" });\n});\n\nsetABCElt.addEventListener(\"click\", () => {\nhtmlGraphics.locationService.partial({\n \"var-variable\": [\"a\", \"b\", \"c\"],\n});\n});\n",
"onInitOnResize": false,
"onRender": "",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": true
},
"title": "Set variables",
"type": "gapit-htmlgraphics-panel"
}
],
"schemaVersion": 37,
"style": "dark",
"tags": [],
"templating": {
"list": [
{
"current": {
"selected": false,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "variable",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "a",
"value": "a"
},
{
"selected": false,
"text": "b",
"value": "b"
},
{
"selected": false,
"text": "c",
"value": "c"
},
{
"selected": false,
"text": "d",
"value": "d"
},
{
"selected": false,
"text": "e",
"value": "e"
}
],
"query": "a,b,c,d,e",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
}
]
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "Multi option variable",
"uid": "tJedAIO4z",
"version": 24,
"weekStart": ""
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thank you! This worked. |
Beta Was this translation helpful? Give feedback.
Answer selected by
PepperJo
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Main code:
Full example:
The mouse cursor wasn't captured, but I'm pressing the
Set:buttons.JSON Model{ "annotations": { "list": [ { "builtIn": 1, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "target": { "limit": 100, "matchAny": false, "tags": [], "type": "dashboard" }, "type": "dashboard" } ] }, "editable": true, "fiscalYearStar…