jQWidgets Forums

This topic contains 3 replies, has 4 voices, and was last updated by admin 9 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Linear gauge Posts

December 22, 2014 at 3:11 pm Linear gauge #64568

Tyl

Participant

Hi,

I don’t manage to display a jqx-linear-gauge with angularjs.
I tried <jqx-linear-gauge></jqx-linear-gauge> but nothing is displayed and no errors in console.

<jqx-gauge></jqx-gauge> works fine.

December 23, 2014 at 6:15 am Linear gauge #64583

Peter Stoev

Keymaster

Hi Tyl

We’ll try this. Thanks for the feedback!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

April 22, 2016 at 3:31 am Linear gauge #83778

dconyers

Participant

Hello JQWidgets Team –

Can you please let us know if there’s a jqx-linear-gauge directive? I can’t seem to get it to work, either.

Thanks, doug.

April 22, 2016 at 6:14 am Linear gauge #83785

admin

Keymaster

Hi dconyers,

We have Linear Gauge directive.

Example with Linear Gauge:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxLinearGauge directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            // gauge's settings.
            $scope.gaugeSettings = {
                ranges: [{ startValue: 0, endValue: 130, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
                         { startValue: 130, endValue: 180, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
                         { startValue: 180, endValue: 220, style: { fill: '#e53d37', stroke: '#e53d37' }, startDistance: 0, endDistance: 0 }],
                ticksMinor: { interval: 5, size: '5%' },
                ticksMajor: { interval: 20, size: '10%' },
                labels: { position: 'outside', interval: 20 },
                pointer: { style: { fill: '#2e79bb' }, width: 5 },
                animationDuration: 1500
            };

            // gauge and slider value.
            $scope.value = 0;
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <div style="position: relative; height: 380px;">
            <jqx-linear-gauge ng-model="value" jqx-settings="gaugeSettings" style="position: absolute; top: 0px; left: 0px;"></jqx-linear-gauge>
            <br />
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.