<!DOCTYPE html><html><head><title>RadialGaugeBacking</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugebacking-shape="Fitted"backing-brush="#fcfcfc"backing-outline="DodgerBlue"backing-oversweep="5"backing-corner-radius="10"backing-stroke-thickness="5"backing-outer-extent="0.8"backing-inner-extent="0.15"scale-start-angle="135"scale-end-angle="45"scale-brush="#dddddd"height="100%"width="100%"minimum-value="0"value="50"maximum-value="80"interval="10" /></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>RadialGaugeScale</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugescale-start-angle="135"scale-end-angle="45"scale-brush="DodgerBlue"scale-sweep-direction="Clockwise"scale-oversweep="1"scale-oversweep-shape="Fitted"scale-start-extent="0.45"scale-end-extent="0.575"height="100%"width="100%"minimum-value="0"value="50"maximum-value="80"interval="10" ></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>RadialGaugeLabels</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugeid="gauge"font-brush="DodgerBlue"font="20px Verdana"label-interval="10"label-extent="0.65"labels-pre-terminal="0"labels-post-initial="0"title-displays-value=truesubtitle-text="MPH"height="100%"width="100%"minimum-value="0"value="50"maximum-value="80"interval="10" ></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
import { IgcRadialGaugeModule } from'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from'igniteui-webcomponents-gauges';
import { ModuleManager } from'igniteui-webcomponents-core';
ModuleManager.register(IgcRadialGaugeModule);
exportclassRadialGaugeOpticalScaling{
private gauge: IgcRadialGaugeComponent;
constructor() {
this.onGaugeSizeChanged = this.onGaugeSizeChanged.bind(this);
this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;
let checkbox1 = document.getElementById('checkbox1');
checkbox1!.addEventListener('change', this.onOpticalScalingChanged);
let slider1 = document.getElementById('slider') as HTMLInputElement;
slider1!.addEventListener('change', this.onGaugeSizeChanged);
}
public onOpticalScalingChanged = (e: any) => {
const isEnabled = e.target.checked;
this.gauge.opticalScalingEnabled = isEnabled;
if (isEnabled) {
this.gauge.opticalScalingEnabled = true;
}
else {
this.gauge.opticalScalingEnabled = false;
}
}
public onGaugeSizeChanged = (e: any) => {
let num: number = parseInt(e.target.value);
this.gauge.width = num.toString() + "%";
this.gauge.height = num.toString() + "%";
}
}
new RadialGaugeOpticalScaling();
ts
<!DOCTYPE html><html><head><title>RadialGaugeOpticalScaling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="options horizontal"><labelclass="options-label">Optical Scaling: </label><labelclass="options-label"><inputtype="checkbox"id="checkbox1"checked="true"></input> Resize Gauge: </label><inputclass="options-slider"id="slider"type="range"min="20"max="100"step="10"value="100"></input></div><igc-radial-gaugeid="gauge"height="100%"width="100%"title-displays-value="true"subtitle-text="MPH"minimum-value="0"value="50"maximum-value="80"interval="10"title-extent="0.5"subtitle-extent="0.65"optical-scaling-enabled="true"optical-scaling-size="500"></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>RadialGaugeTickmarks</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugeid="gauge"height="100%"width="100%"minimum-vue="0"value="50"maximum-value="80"interval="10"tick-start-extent="0.5"tick-end-extent="0.57"tick-stroke-thickness="2"tick-brush="DodgerBlue"minor-tick-count="4"minor-tick-end-extent="0.520"minor-tick-start-extent="0.57"minor-tick-stroke-thickness="1"minor-tick-brush="DarkViolet" ></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>RadialGaugeRanges</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugeheight="100%"width="100%"minimum-value="0"value="50"maximum-value="80"interval="10"range-brushes ="#a4bd29, #F86232"range-outlines="#a4bd29, #F86232" ><igc-radial-gauge-rangename="range1"start-value="10"end-value="25"inner-start-extent="0.50"inner-end-extent="0.50"outer-start-extent="0.57"outer-end-extent="0.57" ></igc-radial-gauge-range><igc-radial-gauge-rangename="range2"start-value="25"end-value="40"inner-start-extent="0.50"inner-end-extent="0.50"outer-start-extent="0.57"outer-end-extent="0.57" ></igc-radial-gauge-range></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>RadialGaugeNeedle</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugeheight="100%"width="100%"is-needle-dragging-enabled="true"is-needle-dragging-constrained="true"needle-shape="NeedleWithBulb"needle-brush="DodgerBlue"needle-outline="DodgerBlue"needle-end-extent="0.475"needle-stroke-thickness="1"needle-pivot-shape="CircleOverlay"needle-pivot-brush="#9f9fa0"needle-pivot-outline="#9f9fa0"needle-pivot-width-ratio="0.2"needle-pivot-stroke-thickness="1"value="50"minimum-value="0"maximum=value="80"interval="10" ></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>RadialGaugeHighlightNeedle</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radial-gaugeid="gauge"highlight-value="50"highlight-value-display-mode="Overlay"highlight-label-displays-value="true"highlight-label-snaps-to-needle-pivot="true"is-highlight-needle-dragging-enabled="true"label-interval="10"label-extent="0.65"height="100%"width="100%"minimum-value="0"value="30"maximum-value="100"interval="10" ></igc-radial-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css