How to render third party JS control in our diagram

<script id="htmlTemplate" type="text/x-jsrender">
   <div id="guage" style="position: fixed"></div>
</script>
<div id="diagram"></div>

 
var nodes = [{ name: "Html", width: 100, height: 400, offsetX: 250, offsetY: 250,fillColor:"white",borderColor:"#3382c4", type: ej.datavisualization.Diagram.Shapes.Html, templateId: "htmlTemplate" }];
 
//Initialize diagram control
$("#diagram").ejDiagram({
    width: "501px",
    height: "501px",
    nodes: nodes,
    pageSettings: { height: 500, width: 500},
});
 
//Initialize linear guage control
$("#guage").ejLinearGauge({
    labelColor: "#8c8c8c", width: 100,
    scales: [{
        width: 4, border: { color: "transparent", width: 0 }, showBarPointers: false, showRanges: true, length: 310,
        position: { x: 52, y: 50 }, markerPointers: [{
            value: 50, length: 10, width: 10, backgroundColor: "#4D4D4D", border: { color: "#4D4D4D" }
        }],
        labels: [{ font: { size: "11px", fontFamily: "Segoe UI", fontStyle: "bold" }, distanceFromScale: { x: -13 } }],
        ticks: [{ type: "majorinterval", width: 1, color: "#8c8c8c" }],
        ranges: [{
            endValue: 60,
            startValue: 0,
            backgroundColor: "#F6B53F",
            border: { color: "#F6B53F" }, startWidth: 4, endWidth: 4
        }, {
            endValue: 100,
            startValue: 60,
            backgroundColor: "#E94649",
            border: { color: "#E94649" }, startWidth: 4, endWidth: 4
        }]
    }]
});