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>

<script>
    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 () {
        createPlot(dataEl);
    };
    script.src = "https://cdn.plot.ly/plotly-latest.min.js";

    document.head.appendChild(script);

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

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

</script>

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().

Testing

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

The widget was configured using this property:

And the result:

I try to write HTML widget with JavaScript code in the thinger.io 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

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="https://cdn.plot.ly/plotly-latest.min.js"></script>

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


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

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

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