Demo - Needle Pointers

by karthick6891

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">


    <div class="row">
        <div class="col-xs-4">
            <div id="theGaugeR1"></div>
        </div>
    </div>



</div>

CSS

.wj-radialgauge {
  width: 100%;
  margin: auto auto;
}

.wj-radialgauge .needle {
  fill: orange;
  stroke: black;
  stroke-width: 1px;
  transition: transform 400ms;
}

body {
  margin-bottom: 24pt;
}
#theGaugeR1 {
  height: 140px;
  width: 160px;
}

JavaScript

onload = function() {

  	// create the gauge
  
    // rounded needle pointer
    new wijmo.gauge.RadialGauge('#theGaugeR1', {
        min: 0, max: 100, value: 25,
        showTicks: true,
        tickSpacing: 10,
        thickness: 0.1,
        showText: 'MinMax',
        isReadOnly: false,
        refreshed: updateNeedleRounded,
        valueChanged: updateNeedleRounded
    });
   
    // update needle element when gauge size or value change
    // rounded (drop-shaped) needle
    function updateNeedleRounded(sender) {

        // add needle element if necessary
        var needle = sender.hostElement.querySelector('.needle');
        if (!needle) {
            var svg = sender.hostElement.querySelector('svg');
            needle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            wijmo.addClass(needle, 'needle');
            svg.appendChild(needle);
        }

        // update needle parameters
        var args = getArgs(sender);
        needle.setAttribute('d', wijmo.format('M {lft} {y} A {wid} {wid} 0 0 0 {rgt} {y} L {x} {top} Z', args));
        needle.setAttribute('transform', wijmo.format('rotate({angle} {x} {y})', args));
    }

    // utilities
    function getArgs(g) {
        var rc = g.clientSize,
            cx = rc.width / 2,
            cy = rc.height / 2,
            r = Math.min(rc.width, rc.height) / 2,
            wid = r / 10,
            pct = (g.max > g.min) ? (g.value - g.min) / (g.max - g.min) : 0,
            angle = g.startAngle + g.sweepAngle * wijmo.clamp(pct, 0, 1) - 90;
console.log(rc.width, rc.height, g.clientSize, g.max, g.value, g.startAngle, g.sweepAngle)
        return {
            angle: angle,
            x: cx.toFixed(4),
            y: cy.toFixed(4),
            wid: wid.toFixed(4),
            lft: (cx - wid).toFixed(4),
            rgt: (cx + wid).toFixed(4),
            top: (cy - r).toFixed(4),
            bot: (cy + wid).toFixed(4)
        }
    }
}