Solution 1 :

There doesn’t appear to be documented way to get the value in the HTML widget.

Instead it is possible to use a MutationObserver to listen to changes to the data div. This can create the Plotly plot when there is an update to the div. (You can also use jQuery to handle the change but this approach uses fewer dependencies.)

<div id="data" value={{value}}>Data - {{value}}</div>
<div id="tester" style="width:900px;height:300px;"></div>

    var createPlot = function(dataEl) {
      let value = dataEl.getAttribute('value');

      console.log(`creating plot with: ${value}`);
      if (value) {
        TESTER = document.getElementById('tester');
        Plotly.newPlot( TESTER, [{
          x: [1, 2, 3, 4, 5],
          y: JSON.parse(value) }], {
          margin: { t: 0 } }

    var dataEl = document.getElementById('data');

    var script = document.createElement('script');
    script.onload = function () {
    script.src = "";


    var observer = new MutationObserver(function(mutations) {
        // create plot only if Plotly has loaded
        if (Plotly) {

    // setup the observer
    var target = document.querySelector('#data');
    var config = { attributes: true, attributeFilter: [ 'value'] };
    observer.observe(target, config);


The plotly script may be loaded after the div is updated. So the trigger to create the plot could be either the script loading or the div mutating. In either case both plotly needs to be loaded and the div needs to be updated.

The value attribute is also a string so it needs to be converted from a string using JSON.parse().


To test this, I created an HTTP device and added a property with the string value [20,41,63,83,103]:

enter image description here

The widget was configured using this property:

enter image description here

And the result:

enter image description here

Problem :

I try to write HTML widget with JavaScript code in the Dashboard. The data from the "thing" can be used in the HTML by inserting the next code {{value}} into some HTML tag body.

But, I cannot use it in the JavaScript block.

Pure HTML widget:

For example use in the HTML widget:

<h1>Millis data</h1>
<p>Millis value is </p><b>{{value}}</b>

The result of this

Simple HTML widget

Widget with JavaScript block (don’t work as needed):

I tried to use the same data for plotting (Plotly example).
I can use in the HTML tag id=data, but, I don’t know how to use this data in the JavaScript block.

My try:

<script src=""></script>

<div id="data" value={{value}}>Data - {{value}}</div>
<div id="tester" style="width:900px;height:300px;"></div>

    TESTER = document.getElementById('tester');
    Plotly.newPlot( TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16] }], {
    margin: { t: 0 } } );

And resulting widget:
– The data on the plot are hard coded for example only.

HTML widget with JavaScript block

I need help with integrating the “`{{value}}“ data into a JavaScript code in the HTML widget.


Comment posted by noa-dev

Is {{value}} being replaced on the server side by a templating engine? Or is there some frontend script, that is running and further replacing the value ?

Comment posted by Andrei Krivoshei

I don’t know this. I am not strong in the HTML, JS. I asked the same question from the community, but it is not answered yet.

Comment posted by Andrei Krivoshei

@noa-dev may be you or somebody can suggest me how to check this?

Comment posted by Arish Khan

What exactly you want? is the output shown inside the html is wrong ? or you want to display it in some other form, and where is the

Comment posted by Andrei Krivoshei

In the pure HTML it works as needed -> the