Steps:

• Add third party js and/or css files on HTML additional headers
• Add script to get data from MyController
• Add Template how you want to display your data.

Example:
Now I'm going to show, how we can add a Gauge widget with the help of Custom widget

First add required js and/or css files. In our case we need this js file.
How to use, we can use either way, with internet or local. If you want to use it from internet get a link from cdn server(https url needed if you are using https protocol for MyController). CDN location. You can use any cnd which supports HTTPS

NOTE: If you do not want to get every time from internet, download this file and put it on mycontroller/www/mylib/gauge.min.js.

Put this url in Utilities >> HTML additional headers >> script files and save it. If you have downloaded the file locally, you have to enter https://<mycontrollerip>:8443/mylib/gauge.min.js

IMPORTANT: You have to refresh your browser [F5] now

It is time to create script file(Javascript

//Load sensor variable data with UID-TAG identification
var temperatureSen = mcApi.uidTag().getByUid("my-sensor-1").getResource(); 
//Generate UUID, for html widget
var uuid = mcApi.utils().getUUID();

Steps in script:

• I want to use UID tags to avoid complications when selecting sensor on script. So I have named my temperature sensor as my-sensor-1 with the help of UID Tags as shown below,
  
• Now get the sensor variable with UID api, as show in script var temperatureSen = mcApi.uidTag().getByUid("my-sensor-1"); and store it in bindings temperatureSen.
• When creating custom widgets, you may use more than one widgets on the same dashboard, in this case always use unique id for widget name in template script. load a unique id(uuid) in script itself with the help of var uuid = mcApi.utils().getUUID().

You are done! Now we have to create a template to display in dashboard.

Template file,

<div id="wrapper" style="text-align: center">    
  <canvas id="my-gauge-${uuid}" style="display: inline-block;"></canvas>
  <div style="font-size:21px" id="textfield--${uuid}"></div>
</div>
<script>
  var opts = {
    lines: 12, // The number of lines to draw
    angle: 0, // The length of each line
    lineWidth: 0.24, // The line thickness
    pointer: {
      length: 0.9, // The radius of the inner circle
      strokeWidth: 0.035, // The rotation offset
      color: '#000066' // Fill color
    },
    colorStart: '#6FADCF',   // Colors
    colorStop: '#8FC0DA',    // just experiment with them
    strokeColor: '#E0E0E0',   // to see which ones work best for you
    generateGradient: true
  };
  var target = document.getElementById('my-gauge-${uuid}'); // your canvas element
  var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
  gauge.animationSpeed = 5; // set animation speed (32 is default value)
  gauge.maxValue = 200; //Maximum value
  gauge.setTextField(document.getElementById("textfield--${uuid}"));
  gauge.set(${temperatureSen.value}); // set actual value
</script>

• You can call bindings from script with ${} notation, if you want to place uuid call it as ${uuid}, to get sensor value call it as ${temperatureSen.value}. You can use this and replace wherever you want on template.

All done! Create a custom widget and map both of script and Template that we create on above steps.

Extra section

Script:

Template:

You can test your script/template before adding in to dashboard,
To test script, select your script and on Actions click on Run now (on the popup click on Run) will get as follows,

You can test your template, select your template and on Actions click on Run now and on the popup select your script file and click on Run, you will get your widget that you will see on dashboard.