Radial Gauge Ignite UI

para best in class

by Yolanda Robles

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="radialgauge"></div>
<div style="clear: both;"></div>

JavaScript

//https://www.igniteui.com/help/api/2017.1/ui.igradialgauge#options:scaleBrush
//https://www.igniteui.com/radial-gauge/range

$(function () {
            
            $("#radialgauge").igRadialGauge({
                width: "100%",
                height: "500px",
                transitionDuration: "800"
            });

            settingYoli();

						function settingYoli() {
                $("#radialgauge").igRadialGauge({
                    height: "380px",
                    width: "100%",
                    minimumValue: "0",
                    maximumValue: "100",
                    value: "10",

                    //Scale Settings
                    scaleStartAngle: "130",
                    scaleEndAngle: "410",
                    // colorcito de la línea interna
                    scaleBrush: "transparent",

                    //Forma y color del círculo
                    //backingShape: "fitted"
                    backingOutline: "#A4A4A4", //borde
                    backingBrush: "#fff",      //relleno
                    // borde del círculo
                    backingStrokeThickness: "8",

                    //Needle Settings
                    needleShape: "triangle",
                    needlePivotShape: "circleOverlay",
                    needleEndExtent: "0.25",
                    needlePointFeatureExtent: "0.4",
                    needlePivotWidthRatio: "0.12",

                    //Ticks contadores
                    tickBrush: "#A4A4A4",//"#138973",
                    minorTickBrush: "gray",
                    tickStartExtent:"0.46",
                    tickEndExtent:"0.8",

                    //Labels
                    labelInterval: 10,
                    labelExtent: "0.37",
                    fontBrush: "#138973"
                })
                
                  // se eliminan por si estamos cambiando de settings para que elimine los anteriores
                  $("#radialgauge").igRadialGauge("option",...