# \[solved\] Embedding javascript into text panel

**URL:** <https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672>\
**Category:** Grafana\
**Created:** [April 7, 2018, 6:09am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672 "2018-04-07T06:09:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![erictsai](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@erictsai](https://community.grafana.com/u/erictsai)\
**Post date:** [April 7, 2018, 6:09am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/1 "2018-04-07T06:09:04Z")

</div>

EDIT: found the AJAX plugin - I think that’s what I need. Thanks!

---- original post —

Hello,  
I’m trying to make a REST operation using javascript embedded inside a text panel set to HTML mode. I wonder if that’s not the intention of the text panel?

Here’s what’s in the text panel.

```
<script type="text/javascript" language="javascript">
function UserAction() {
    alert('test');
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "http://192.168.2.24:8080/rest/items/itm_all_off_fnt", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send("OFF");
    var response = JSON.parse(xhttp.responseText);
}
</script>
<button type="submit" onclick="UserAction()">Clickme</button>

```

I see the button and I’m able to click it, but I never see the alert(), so I don’t think UserAction() ever actually gets run.

Is there some other way of doing it? Is there a plugin that lets us do custom REST calls?

---

<div class="post-metadata">

**Author:** ![danielgonzalez](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielgonzalez/32/7125_2.png) [@danielgonzalez](https://community.grafana.com/u/danielgonzalez)\
**Post date:** [February 12, 2019, 2:35am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/2 "2019-02-12T02:35:49Z")

</div>

How did you do it?  
someone can illustrate an example??

---

<div class="post-metadata">

**Author:** ![crystaltaggart](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@crystaltaggart](https://community.grafana.com/u/crystaltaggart)\
**Post date:** [March 6, 2020, 7:25pm UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/3 "2020-03-06T19:25:57Z")

</div>

For anyone searching for this - I learned that there’s a grafana.ini setting that you have to update in order for HTML and Javascript to render in a text panel without being sanitized.

Once I enabled this, javascript and HTML work correctly.

Here’s the original post:

> To enable unsafe javascript execution in text panels enable the settings disable\_sanitize\_html under the section [panels] in your Grafana ini file, or set env variable GF\_PANELS\_DISABLE\_SANITIZE\_HTML=true.

found in this issue: [HTML is not working in Text panel using Grafana 6 · Issue #15647 · grafana/grafana · GitHub](https://github.com/grafana/grafana/issues/15647)

---

<div class="post-metadata">

**Author:** ![dassambuddha](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@dassambuddha](https://community.grafana.com/u/dassambuddha)\
**Post date:** [July 20, 2020, 9:36am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/4 "2020-07-20T09:36:16Z")

</div>

Once i have upgraded to Grafana 7.1 script stop working

Here’s what’s in the text panel.

```
    <div style="width: 100%; font-size: 22px; font-weight: 500; text-align: right;" id="time_range_info"></div>
<div style="width: 100%; font-size: 100%; text-align: right;" id="time_range_text">a</div>

<script>
   alert("");
function getDashboardTimeRange(){
   var dateFormat = "ll";
   var tr = angular.element('grafana-app').injector().get('timeSrv').timeRange();
   return ["<img src='/public/stealth/calendar.png'/>&nbsp;&nbsp;", tr.from.format(dateFormat), ' - ', tr.to.format(dateFormat)].join('');
}
function textFill(){
   $('#time_range_info').html(getDashboardTimeRange());
   $('#time_range_text').html($("button[aria-label='TimePicker Open Button'] > span.css-1cvxpvr > span").html());
}
angular.element('grafana-app').injector().get('dashboardSrv').getCurrent().events.on('refresh', function () {textFill()});
textFill();
</script>
```

---

<div class="post-metadata">

**Author:** ![mustafaufelek](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@mustafaufelek](https://community.grafana.com/u/mustafaufelek)\
**Post date:** [July 22, 2020, 11:04am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/5 "2020-07-22T11:04:08Z")

</div>

Hi, After upgrading 7.1 scripts in text panel stopped working.

Did you find any solution for it?

---

<div class="post-metadata">

**Author:** ![navalchand](https://avatars.discourse-cdn.com/v4/letter/n/a5b964/32.png) [@navalchand](https://community.grafana.com/u/navalchand)\
**Post date:** [July 22, 2020, 1:19pm UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/6 "2020-07-22T13:19:02Z")

</div>

Hey facing the same, can someone help

---

<div class="post-metadata">

**Author:** ![topnessman](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@topnessman](https://community.grafana.com/u/topnessman)\
**Post date:** [July 23, 2020, 4:28am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/7 "2020-07-23T04:28:13Z")

</div>

Same issue, also using 7.1 version. Script is not working at all. Please help!

---

<div class="post-metadata">

**Author:** ![mustafaufelek](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@mustafaufelek](https://community.grafana.com/u/mustafaufelek)\
**Post date:** [July 23, 2020, 4:57am UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/8 "2020-07-23T04:57:54Z")

</div>

No solution for me yet ☹

---

<div class="post-metadata">

**Author:** ![topnessman](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@topnessman](https://community.grafana.com/u/topnessman)\
**Post date:** [July 23, 2020, 2:12pm UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/9 "2020-07-23T14:12:06Z")

</div>

They fixed the bug, but haven’t released yet, 7.2.0 should address this issue!

---

<div class="post-metadata">

**Author:** ![fpbrault](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/fpbrault/32/12143_2.png) [@fpbrault](https://community.grafana.com/u/fpbrault)\
**Post date:** [July 24, 2020, 3:02pm UTC](https://community.grafana.com/t/solved-embedding-javascript-into-text-panel/6672/10 "2020-07-24T15:02:36Z")

</div>

Looks like they did fix the issue in 7.1.1:

> **[Release v7.1.1 · grafana/grafana](https://github.com/grafana/grafana/releases/tag/v7.1.1)**
>
> Download Page
> What's New Highlights
> Release Notes
> Features / Enhancements
> 
> Graph: Support setting field unit & override data source (automatic) unit. #26529, @ryantxu
> Tracing: Add errorIconColor pr...