Custom CPU and Memory Percent Utilization widget

I love a lot of things about the Orion platform, but I'm not particularly fond of the gauges so I decided to design my own.

I replaced the default CPU Load & Memory Utilization widget with this:


Source code:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <script src=""></script>
    <script src=""></script>
   <script type="text/javascript" >

        function drawGauges(){
        var swql = "Select CPULoad,PercentMemoryUsed FROM Orion.Nodes WHERE NodeId=${NodeId}";

        var params = JSON.stringify({
            query: swql,
            parameters: {
            type: 'POST',
            url: '/Orion/Services/Information.asmx/QueryWithParameters',
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var g = new JustGage({
                    id: "gauge",
                    value: response.d.Rows[0][0],
                    min: 0,
                    max: 100,
                    title: "CPU Load %"
                var g1 = new JustGage({
                    id: "gauge1",
                    value: response.d.Rows[0][1],
                    min: 0,
                    max: 100,
                    title: "Memory Utilization %"



 * {
            box-sizing: border-box;

        body {
            font-family: Open Sans, sans-serif;

        /* Float four columns side by side */
        .widget_column {
            float: left;
            width: 50%;
            padding: 0 30px;

        .widget_row {
            margin: 0 -5px;

            /* Clear floats after the columns */
            .widget_row:after {
                content: "";
                display: table;
                clear: both;

        /* Responsive columns */
        @media screen and (max-width: 600px) {
            .widget_column {
                width: 100%;
                display: block;
                margin-bottom: 10px;

<body body onload="drawGauges();">
	 <div class="widget_row">
		 <div class="widget_column">
			<div id="gauge" class="200x160px"></div>
		<div class="widget_column">
			<div id="gauge1" class="200x160px"></div>

You can use these gauges for pretty much anything as long as you can write a SWQL query for it (I also use it for interface utilization % for example).