Adding js to Matrix-theme help needed

I have been trying to add a Javascript gauge to my Habpanel, which is using the Matrix-Theme, however the js will not display the gauge.
This is the page for the gauge source: https://github.com/naikus/svg-gauge

Saving the code from the live demo into an .html file, modified using “static” urls for adding the .js file the gauges are animated when i open in a webpage “192.168.1.72:8080/static/html/matrix-theme/gauge-test-1.html”. The “gauge.min.js” file is also in the folder.

I have added a dashboard to Habpanel and created a widget containing the following code, modified to only display one gauge::

    <div oc-lazy-load="['/static/matrix-theme/gauge.min.js']"></div>	

    	<style class="cp-pen-styles">body {
    	background-color: rgba(0, 0, 0, 0.8);
    	color: #999;
    	font-family: Hevletica, sans-serif;
    	}
    	.info {
    	clear: both;
    	padding: 10px;
    	font-size: 0.9em;
    	}
    	a.link {
    	color: #2fe3ff;
    	text-decoration: none;
    	}
    	.warn {
    	font-size: 0.8em;
    	background-color: #b37300;
    	color: #fff;
    	padding: 10px;
    	}
    	/* ------ Default Style ---------- */
    	.gauge-container {
    	width: 150px;
    	height: 150px;
    	display: block;
    	float: left;
    	padding: 10px;
    	background-color: #222;
    	margin: 7px;
    	border-radius: 3px;
    	position: relative;
    	}
    	.gauge-container > .label {
    	position: absolute;
    	right: 0;
    	top: 0;
    	display: inline-block;
    	background: rgba(0, 0, 0, 0.5);
    	font-family: monospace;
    	font-size: 0.8em;
    	padding: 5px 10px;
    	}
    	.gauge-container > .gauge > .dial {
    	stroke: #334455;

            stroke-width: 2;
    	fill: rgba(0, 0, 0, 0);
    	}
    	.gauge-container > .gauge > .value {
    	stroke: #2fe3ff;
            stroke-dasharray: 1;
    	stroke-width: 3;
    	fill: rgba(0, 0, 0, 0);
    	}
    	.gauge-container > .gauge > .value-text {
    	fill: #2fe3ff;
    	font-family: sans-serif;
    	font-weight: bold;
    	font-size: 0.8em;
    	}
    	</style>

    	<div id="gauge1" class="gauge-container">
    	<span class="label">DEFAULT</span>
    	</div>
    	

    	<script id="rendered-js">
        var gauge1 = Gauge(document.getElementById("gauge1"), {
        max: 100,
        value: 50,
    });

    	gauge1.setValueAnimated({{itemValue('ZW010_Washer_ElectricMeterKWh')}}, 1);
    	</script>

I realize some of the style items are not needed but have left them in place and will add the needed items into a loaded css file later when/if i can get this working.

This is what is displayed:

The light colour block with the title “DEFAULT” should have the gauge in it.

Using the Chrome Developer Tools i do not see any errors, and the gauge.min.js looks like it is being loaded. My HTML coding skill is very basic, js knowledge almost non-exisitant, and have been learning using the Matrix-Theme by modifying it to my setup. I have been Googling for quite some time trying to get this sorted and to learn, however am stuck and need some help.

Reading through Angular pages, one thing I’ve seen is that the “script” may not be running due to security, however more Googling leads to going in circles and causing more confusion as I’ve seen “script” function examples posted here on the forums…

Any help would be appreciated!

Thanks, Craig