Pass Parameter to Query String from onInit or onRender

[samant-rags]

if i want to set a parameter value in the Query tab from onInit or onRender method, is it possible ?

if not, can we use a hidden variable (dashboard settings-->variables--> hide ) and then use that in the query BUT set value of that variable from onInit or onRender method ?

Thanks in Advance

[ZuperZee]

Updating a Grafana variable is probably the best.
Example on how to update and read Grafana variables..

[ZuperZee]

Doesn't seem like the "view all" link is working and the CSS is missing

[samant-rags]

Doesn't seem like the "view all" link is working and the CSS is missing

Sorry View all is not imp here.. i was trying to highlight the outerDiv not streching as the list grows due to scroll.

I added some CSS for the outdiv and its fine for now

[ZuperZee]

I can only see the onRender code

Do you have the code for CSS and HTML? (Exporting the entire panel-options would be better)

[samant-rags]

hi Zuper
PFB the entire panel options export json

{
"calcsMutation": "standard",
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"add100Percentage": true,
"centerAlignContent": true,
"overflow": "visible",
"useGrafanaScrollbar": true,
"SVGBaseFix": true,
"codeData": "{\n "text": "Random text"\n}",
"rootCSS": "",
"css": " ",
"html": "<div class="p-4 bg-white max-w-md full-panel rounded-lg border shadow-md sm:p-8 ">\n <div class="flex justify-between items-center mb-4">\n <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white">Recent Orders\n <a href="#" class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">\n View all\n \n \n <div class="flow-root bg-white">\n

\n\t\t\t<div id="listRoot" class="divide-y divide-gray-200 " > \n

\n \n\n \n<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel="stylesheet">\n\n",
"renderOnMount": true,
"onRender": "\n\tdisplayList();\n\t\n \tfunction displayList() {\n\t\n\t\tlet shadowRootDiv =htmlNode.getElementById("listRoot");\n\t\tlet productListLength = data.series[0].fields[0].values.length;\n\t\tlet productListTag='';\n\t\t \n\t\tfor (i=0; i < productListLength ; i++){ \n\t\t\tconsole.log(data.series[0].fields[0].values.get(i));\n\t\t\tproductListTag += mergeDataWithListElement(data.series[0].fields[0].values.get(i),\n\t\t\t\t\t\t\t\t\t\t\t\t\t data.series[0].fields[1].values.get(i),\n\t\t\t\t\t\t\t\t\t\t\t\t\t Math.floor(Math.random() * 1001));\n\t\t} \n\n\t\tif(shadowRootDiv)\n\t\t htmlNode.getElementById('listRoot').innerHTML = productListTag;\n\t\telse\n\t\t\tconsole.log("listRoot divID not found..");\t\t\n\t\t\t\n\t}\n\t\n\t\n\tfunction mergeDataWithListElement (productId,productDesc,productPrice){\n\t\n\t\tlet dataRespTemplate = \n\t\t\t\t\t\t\t <li class=\"py-3 sm:py-4 \">\n\t\t\t\t\t\t\t\t<div class=\"flex items-center space-x-4 \" >\n\t\t\t\t\t\t\t\t\t<div class=\"flex-shrink-0\">\n\t\t\t\t\t\t\t\t\t\t<img class=\"w-15 h-12 rounded-full scale-50 hover:scale-75 ease-in duration-500\" src=\"https://staticimg.titan.co.in/Tanishq/Catalog/${productId}.jpg\" alt=\"click \">\n\t\t\t\t\t\t\t\t\t</div> \n\t\t\t\t\t\t\t\t\t<div class=\"flex-1 min-w-0\">\n\t\t\t\t\t\t\t\t\t\t<p class=\"text-sm font-medium text-gray-900 truncate dark:text-white\">\n\t\t\t\t\t\t\t\t\t\t\t${productDesc}\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t<p class=\"text-sm text-gray-500 truncate dark:text-gray-400\">\n\t\t\t\t\t\t\t\t\t\t\t${productId}\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"inline-flex items-center text-base font-semibold text-gray-900 dark:text-white\">\n\t\t\t\t\t\t\t\t\t\t$ ${productPrice}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</li>\n \t\t\t\t\t\t ;\n\t\n\t\t\treturn dataRespTemplate ; \n\t}",
"dynamicHtmlGraphics": false,
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicProps": false,
"panelupdateOnMount": true,
"onInitOnResize": false,
"onInit": " "
}

[ZuperZee]

Doesn't seem like it was copied correctly. If you surround the code with triple `
Example:

{
    "calcsMutation": "standard",
    "reduceOptions": {
        "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
        ]
    },
    "add100Percentage": true,
    "centerAlignContent": true,
    "overflow": "visible",
    "useGrafanaScrollbar": true,
    "SVGBaseFix": true,
    "codeData": "{\n  \"text\": \"Random text\"\n}",
    "rootCSS": "",
    "css": "* {\n  font-family: Open Sans;\n}\n\n.box {\n  border: solid #555 2px;\n  border-radius: 10px;\n  padding: 10px 20px;\n}\n",
    "html": "<div style=\"text-align: center;\">\n  <div class=\"box\" id=\"htmlgraphics-text\"></div>\n  <br />\n  <div class=\"box\" id=\"htmlgraphics-value\"></div>\n</div>\n",
    "renderOnMount": true,
    "onRender": "// Sets the value from the first series on every refresh\nconst htmlgraphicsValue = htmlNode.getElementById('htmlgraphics-value');\n\nif (htmlgraphicsValue) {\n  const valueField = data.series[0]?.fields[1];\n  if (valueField) {\n    const length = valueField.values.length;\n    htmlgraphicsValue.textContent = valueField.values.get(length - 1);\n  } else {\n    htmlgraphicsValue.textContent = \"No data\"\n  }\n}\n",
    "dynamicHtmlGraphics": false,
    "dynamicData": false,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "panelupdateOnMount": true,
    "onInitOnResize": false,
    "onInit": "// Sets the text from customProperties\nconst htmlgraphicsText = htmlNode.getElementById('htmlgraphics-text');\n\nif (htmlgraphicsText) {\n  htmlgraphicsText.textContent = customProperties.text;\n\n  // Change the text color based on the theme\n  if (theme.isDark) {\n    htmlgraphicsText.style.color = 'green';\n  } else {\n    htmlgraphicsText.style.color = 'red';\n  }\n}\n"
}

If you could. Could you try creating an issue with a minimal example of how to reproduce it? As I'm currently not able to reproduce it locally