HTML widget on Dashboard. Using {{value}} in the JavaScript block

Cloud Integration
1

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>

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>
  • The data x and y are hard coded for example only.

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

2

Hi, I’m trying to solve this issue too

I want to use a custom Tachometer widget, which shows the date and time of the bucket’s last update.

In the case below, the widget should show the value of 242 (last value stored in the bucket). I can see the number 153, as I defined it in the code. But I would like to view the value 242 through {{value.nivel_agua}}. See image and code below:

image
image1027×742 74.2 KB 

  <script type="text/javascript">
  var nivel = 153;
  </script>


  <script src=https://unpkg.com/froalacharts@1.0.0/froalacharts.js></script>
  <script src="https://unpkg.com/froalacharts@1.0.0/themes/froalacharts.theme.froala.js"></script>

  <script type="text/javascript">   
       var data = {  chart: {
    caption: "Pressão",
    lowerlimit: "0",
    upperlimit: "300",
    showvalue: "1",
    numbersuffix: "%",
    theme: "froala"
  },
  colorrange: {
    color: [
      {
        minvalue: "0",
        maxvalue: "50",
        code: "#F2726F"
      },
      {
        minvalue: "50",
        maxvalue: "75",
        code: "#FFC533"
      },
      {
        minvalue: "75",
        maxvalue: "100",
        code: "#62B58F"
      }
    ]
  },
  dials: {
    dial: [
      {
        value: nivel,
        tooltext: "9% lesser that target"
      }
    ]
  },
  trendpoints: {
    point: [
      {
        startvalue: "80",
        displayvalue: "Target",
        thickness: "2",
        color: "#E15A26",
        usemarker: "1",
        markerbordercolor: "#E15A26",
        markertooltext: "80%"
      }
    ]
  }
};
            FroalaCharts.ready(function () {
            new FroalaCharts({
                id: "chart_1",
                type: 'angulargauge',
                renderAt: 'ft',
                width: '800',
                height: '500',
                dataSource: data
            }).render();
        });
    </script>
    

<div id="ft">FroalaCharts will render here</div>
<p>Última Atualização: <b> {{ts | date:"dd/MM/yyyy 'às' hh:mm"}} </b></p>
<p>Value: <b> {{value.nivel_agua}} </b></p>

Hi @alvarolb , could you tell me if it is possible for the value of {{value.nivel_agua}} to be used in the block. If possible, how do we succeed?

3

Hi @George_Santiago,

yes, it is possible, but you need to use the widget from a file storage using a directive: