UI_Template Unique ID

Dashboard
1

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?

<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>```
2
3

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