Frames
28 Jun 2017 / 3 minutes to read
Inner and Outer Width Customization
Frames are space that enclose the Digital Gauge. The inner width of the Frame is the distance between the canvas element and the frame. The outer width is the distance from the frame. The code example to set frame’s innerWidth and outerWidth is as follow.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="DigitalGaugeApp">
<head>
<title>Essential Studio for AngularJS: DigitalGauge</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="DigitalGaugeCtrl">
<div id="digitalframe">
<ej-digitalgauge e-frame-innerwidth="6" e-frame-outerwidth="10" e-value="WELCOME">
</ej-digitalgauge>
</div>
<script>
angular.module('DigitalGaugeApp', ['ejangular'])
.controller('DigitalGaugeCtrl', function ($scope) {
});
</script>
</body>
</html>
Execute the above code examples to render the DigitalGauge as follows.
Setting Background Image
For a better appearance, you can set the backgroundimage for the Digital Gauge using the property backgroundImageUrl.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="DigitalGaugeApp">
<head>
<title>Essential Studio for AngularJS: DigitalGauge</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="DigitalGaugeCtrl">
<div id="digitalframe">
<ej-digitalgauge e-frame-backgroundimageurl="board3.jpg" e-value="RADAR"
e-height="300">
<e-items>
<e-item e-position-x="95" e-position-y="10">
</e-item>
</e-items>
</ej-digitalgauge>
</div>
<script>
angular.module('DigitalGaugeApp', ['ejangular'])
.controller('DigitalGaugeCtrl', function ($scope) {
});
</script>
</body>
</html>
Execute the above code examples to render the DigitalGauge as follows.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page