# UI\_Template Unique ID

**URL:** <https://discourse.nodered.org/t/ui-template-unique-id/27378>\
**Category:** Dashboard\
**Created:** [27 May 2020 15:28 UTC](https://discourse.nodered.org/t/ui-template-unique-id/27378 "2020-05-27T15:28:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 15:28 UTC](https://discourse.nodered.org/t/ui-template-unique-id/27378/1 "2020-05-27T15:28:27Z")

</div>

I had help of a fellow man here to create a mini chart without labels. But I need multiple of them, and i'm failing to comprehend how to create unique id's for each chart. Can someone lend me a hand?

````auto
<div id="{{'myLabel'+$id}}">1º Terno</div>
<div id="{{'myValue'+$id}}"></div>
<div id="{{'myUnit'+$id}}">%</div>
<style>
md-card.nr-dashboard-template.ng-scope._md.visible{
    overflow: hidden
}
    #myValue{
       position: absolute;
        left: 30px;
        top: 50px;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        color: #FFAB0B;
        overflow: hidden;
    }
    #myUnit{
       position: absolute;
        left: 140px;
        top: 90px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        overflow: hidden;
    }
    #myChart{
        position:absolute;
        top:20px;
        overflow: hidden;
    }
    #myLabel{
       position: absolute;
        left: 63px;
        top: 5px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        overflow: hidden;
    }
    div {
        overflow: hidden;    
    }
</style>
<script>

var maxDataPoints = 20

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: [],
        datasets: [
            {
                label: 'first',
                backgroundColor: '#00ff00',
                borderColor: '#00ff00',
                data: [],
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 2
            }
        ]
    },

    // Configuration options go here
    options: {
        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            yAxes: [
                {
                    gridLines :{display:false,drawBorder:false},
                    id: 'left-y-axis',
                    type: 'linear',
                    position: 'left',
                    ticks: {
                        display:false,
                        maxTicksLimit: 24,
                        suggestedMax: 100,
                        suggestedMin: 0
                    }
                }
            ],
            xAxes: [
                {
                    gridLines :{display:false,drawBorder:false},
                    type: 'time',
                    distribution: 'series',
                    ticks: {
                         display:false
                    }
                }
            ]
        }
    }
});
function showValue(v){
    if(v){
        document.getElementById('myValue').innerHTML = v.toFixed(1)
    }
    
}
function addData(chart, data, label) {
    chart.data.datasets.forEach((dataset) => {
        if(dataset.label == label){
            dataset.data.push(data);
        }
        if(dataset.data.length > maxDataPoints){
            dataset.data.shift()
        }
    });
    chart.update(1);//0 means no animation
}
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      addData(chart,{x:new Date(),y:msg.payload.first},"first")
      showValue(msg.payload.first)
      $("#myCanvas"+scope.$id).html(msg.payload);
      $("#myLabel"+scope.$id).html(msg.payload);
      $("#myValue"+scope.$id).html(msg.payload);
      $("#myUnit"+scope.$id).html(msg.payload);

    }
  });
})(scope);
</script>```
````

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 22:11 UTC](https://discourse.nodered.org/t/ui-template-unique-id/27378/2 "2020-05-27T22:11:10Z")

</div>

> [@How to edit ui\_chart to be without labels and have last value displayed](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/20):
>
> Multiple charts example Classes for elements should not be in those templates but somewhere in common place [{"id":"821cef66.60aa8","type":"ui\_template","z":"bf66f153.dd752","group":"195db59f.44875a","name":"Line Chart","order":4,"width":"8","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":590,"y":440,"wires":[[]]},{"id":"e57aac9d.c6f3b","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 June 2020 22:11 UTC](https://discourse.nodered.org/t/ui-template-unique-id/27378/3 "2020-06-10T22:11:10Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.