• sean

    When chart have show all icon button chart will not have any update like this pic.
    0_1518397545059_bandicam 2018-02-12 09-03-05-120.png

    I have record in this video .
    video link
    video2 link after many minutes.
    must always need to click show all that chart will update.
    How to fix this?

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <style>
    liquidgauge{
        display: block;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://bl.ocks.org/brattonc/raw/5e5ce9beee483220e2f6/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js"></script>
    </head>
    
    <body ng-app="app">
        
        
    <liquidgauge value="10"></liquidgauge>
        
    
    <script>
        
        var app = angular.module('app', []);
    
        app.component('liquidgauge', {
        bindings: {
            value: '='
        },
        template: '<svg id="fillgauge1" width="100%" height="250"></svg>',
        controller: LquidGaugeController,
        controllerAs: 'vm',
    });
    
    LquidGaugeController.$inject = ['$http'];
    function LquidGaugeController($http){
        var gauge2 = loadLiquidFillGauge('fillgauge1',this.value);
        console.log(this);
    }
    
    </script>
    </body>
    </html>
    

    I have this html can run in my web browser,
    like this 0_1517551665022_lq.PNG

    can see console.log can see svg,
    but I try to write in User Module,
    have error how to fix?

    my usermodule code

    define(['angular','require',
    'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js',
    'https://bl.ocks.org/brattonc/raw/5e5ce9beee483220e2f6/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js',
    ],
    function(angular,require){
        'use strict';
    var userModule=angular.module('userModule',['maUiApp',]);
    
    userModule.component('liquidgauge', {
        bindings: {
            value: '='
        },
        template: '<svg id="fillgauge1" width="100%" height="250"></svg>',
        controller: LquidGaugeController,
        controllerAs: 'vm',
    });
    
    LquidGaugeController.$inject = ['$http'];
    function LquidGaugeController($http){
        var gauge2 = loadLiquidFillGauge('fillgauge1',this.value);
        console.log(this);
    }
    
    return userModule;
    
    });
    
    

    html

    <style>
            .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
    </style>
    
    <liquidgauge value="10"></liquidgauge>
    
    <br>
    
    
    
    <ma-get-point-value point-xid="DP_virtualDataPoint1" point="point1"></ma-get-point-value>
    <ma-get-point-value point-xid="DP_virtualDataPoint2" point="point2"></ma-get-point-value>
    
    

    view and console like this
    0_1517552609124_lq2.PNG

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    Jared

    [{"cached":false,"dataType":"NUMERIC","value":24.54166519444935,"timestamp":1516717082811,"annotation":null,"rendered":"24.542"},{"cached":false,"dataType":"NUMERIC","value":22.514996283345724,"timestamp":1516717382811,"annotation":null,"rendered":"22.515"},{"cached":false,"dataType":"NUMERIC","value":20.80833197222676,"timestamp":1516717682811,"annotation":null,"rendered":"20.808"},{"cached":false,"dataType":"NUMERIC","value":20.71000529998233,"timestamp":1516717982811,"annotation":null,"rendered":"20.71"},{"cached":false,"dataType":"NUMERIC","value":24.19166902776991,"timestamp":1516718282811,"annotation":null,"rendered":"24.192"},{"cached":false,"dataType":"NUMERIC","value":23.168328772237427,"timestamp":1516718582811,"annotation":null,"rendered":"23.168"},{"cached":false,"dataType":"NUMERIC","value":21.08166472778424,"timestamp":1516718882811,"annotation":null,"rendered":"21.082"},{"cached":false,"dataType":"NUMERIC","value":20.390002699991,"timestamp":1516719182811,"annotation":null,"rendered":"20.39"},{"cached":false,"dataType":"NUMERIC","value":23.416672277759073,"timestamp":1516719482811,"annotation":null,"rendered":"23.417"},{"cached":false,"dataType":"NUMERIC","value":23.894994683351054,"timestamp":1516719782811,"annotation":null,"rendered":"23.895"},{"cached":false,"dataType":"NUMERIC","value":21.404997650007832,"timestamp":1516720082811,"annotation":null,"rendered":"21.405"},{"cached":false,"dataType":"NUMERIC","value":20.351666494445016,"timestamp":1516720382811,"annotation":null,"rendered":"20.352"},{"cached":false,"dataType":"NUMERIC","value":22.441673527754908,"timestamp":1516720682811,"annotation":null,"rendered":"22.442"},{"cached":false,"dataType":"NUMERIC","value":24.321660927796906,"timestamp":1516720982811,"annotation":null,"rendered":"24.322"},{"cached":false,"dataType":"NUMERIC","value":21.35666381112063,"timestamp":1516721282811,"annotation":null,"rendered":"21.357"},{"cached":false,"dataType":"NUMERIC","value":20.278335072216425,"timestamp":1516721582811,"annotation":null,"rendered":"20.278"},{"cached":false,"dataType":"NUMERIC","value":23.023339588868037,"timestamp":1516721882811,"annotation":null,"rendered":"23.023"},{"cached":false,"dataType":"NUMERIC","value":24.17166142779524,"timestamp":1516722182811,"annotation":null,"rendered":"24.172"},{"cached":false,"dataType":"NUMERIC","value":21.55166416111946,"timestamp":1516722482811,"annotation":null,"rendered":"21.552"},{"cached":false,"dataType":"NUMERIC","value":20.381665727780906,"timestamp":1516722782811,"annotation":null,"rendered":"20.382"},{"cached":false,"dataType":"NUMERIC","value":21.92834023886587,"timestamp":1516723082811,"annotation":null,"rendered":"21.928"},{"cached":false,"dataType":"NUMERIC","value":24.61166262779124,"timestamp":1516723382811,"annotation":null,"rendered":"24.612"},{"cached":false,"dataType":"NUMERIC","value":22.061663127789576,"timestamp":1516723682811,"annotation":null,"rendered":"22.062"},{"cached":false,"dataType":"NUMERIC","value":20.471665094449683,"timestamp":1516723982811,"annotation":null,"rendered":"20.472"},{"cached":false,"dataType":"NUMERIC","value":21.40167399442002,"timestamp":1516724282811,"annotation":null,"rendered":"21.402"},{"cached":false,"dataType":"NUMERIC","value":24.574997416675277,"timestamp":1516724582811,"annotation":null,"rendered":"24.575"},{"cached":false,"dataType":"NUMERIC","value":22.296663344455517,"timestamp":1516724882811,"annotation":null,"rendered":"22.297"},{"cached":false,"dataType":"NUMERIC","value":20.64833183889387,"timestamp":1516725182811,"annotation":null,"rendered":"20.648"},{"cached":false,"dataType":"NUMERIC","value":20.820006266645777,"timestamp":1516725482811,"annotation":null,"rendered":"20.82"},{"cached":false,"dataType":"NUMERIC","value":24.411667961106797,"timestamp":1516725782811,"annotation":null,"rendered":"24.412"},{"cached":false,"dataType":"NUMERIC","value":23.01666227779241,"timestamp":1516726082811,"annotation":null,"rendered":"23.017"},{"cached":false,"dataType":"NUMERIC","value":20.99999833333889,"timestamp":1516726382811,"annotation":null,"rendered":"21"},{"cached":false,"dataType":"NUMERIC","value":20.39500268332439,"timestamp":1516726682811,"annotation":null,"rendered":"20.395"},{"cached":false,"dataType":"NUMERIC","value":23.503338988870038,"timestamp":1516726982811,"annotation":null,"rendered":"23.503"},{"cached":false,"dataType":"NUMERIC","value":23.891661027796573,"timestamp":1516727282811,"annotation":null,"rendered":"23.892"},{"cached":false,"dataType":"NUMERIC","value":21.361664461118462,"timestamp":1516727582811,"annotation":null,"rendered":"21.362"},{"cached":false,"dataType":"NUMERIC","value":20.328333238889204,"timestamp":1516727882811,"annotation":null,"rendered":"20.328"},{"cached":false,"dataType":"NUMERIC","value":22.495006683311054,"timestamp":1516728182811,"annotation":null,"rendered":"22.495"},{"cached":false,"dataType":"NUMERIC","value":24.33499521668261,"timestamp":1516728482811,"annotation":null,"rendered":"24.335"},{"cached":false,"dataType":"NUMERIC","value":21.681664061119797,"timestamp":1516728782811,"annotation":null,"rendered":"21.682"},{"cached":false,"dataType":"NUMERIC","value":20.471665427781907,"timestamp":1516729082811,"annotation":null,"rendered":"20.472"},{"cached":false,"dataType":"NUMERIC","value":21.64500718330939,"timestamp":1516729382811,"annotation":null,"rendered":"21.645"},{"cached":false,"dataType":"NUMERIC","value":24.636663211122627,"timestamp":1516729682811,"annotation":null,"rendered":"24.637"},{"cached":false,"dataType":"NUMERIC","value":21.926663244455852,"timestamp":1516729982811,"annotation":null,"rendered":"21.927"},{"cached":false,"dataType":"NUMERIC","value":20.453332488891704,"timestamp":1516730282811,"annotation":null,"rendered":"20.453"},{"cached":false,"dataType":"NUMERIC","value":21.69000703330989,"timestamp":1516730582811,"annotation":null,"rendered":"21.69"},{"cached":false,"dataType":"NUMERIC","value":24.659996800010667,"timestamp":1516730882811,"annotation":null,"rendered":"24.66"},{"cached":false,"dataType":"NUMERIC","value":22.28499671667761,"timestamp":1516731182811,"annotation":null,"rendered":"22.285"},{"cached":false,"dataType":"NUMERIC","value":20.688331705560984,"timestamp":1516731482811,"annotation":null,"rendered":"20.688"},{"cached":false,"dataType":"NUMERIC","value":20.731672561091465,"timestamp":1516731782811,"annotation":null,"rendered":"20.732"},{"cached":false,"dataType":"NUMERIC","value":24.318335605547983,"timestamp":1516732082811,"annotation":null,"rendered":"24.318"},{"cached":false,"dataType":"NUMERIC","value":23.083328722237592,"timestamp":1516732382811,"annotation":null,"rendered":"23.083"},{"cached":false,"dataType":"NUMERIC","value":20.841664861117128,"timestamp":1516732682811,"annotation":null,"rendered":"20.842"},{"cached":false,"dataType":"NUMERIC","value":20.50833830553898,"timestamp":1516732982811,"annotation":null,"rendered":"20.508"},{"cached":false,"dataType":"NUMERIC","value":24.041670194432683,"timestamp":1516733282811,"annotation":null,"rendered":"24.042"},{"cached":false,"dataType":"NUMERIC","value":23.30499531668228,"timestamp":1516733582811,"annotation":null,"rendered":"23.305"},{"cached":false,"dataType":"NUMERIC","value":21.078331405561983,"timestamp":1516733882811,"annotation":null,"rendered":"21.078"},{"cached":false,"dataType":"NUMERIC","value":20.296669011103297,"timestamp":1516734182811,"annotation":null,"rendered":"20.297"},{"cached":false,"dataType":"NUMERIC","value":23.24333918886937,"timestamp":1516734482811,"annotation":null,"rendered":"23.243"},{"cached":false,"dataType":"NUMERIC","value":24.08666137779541,"timestamp":1516734782811,"annotation":null,"rendered":"24.087"},{"cached":false,"dataType":"NUMERIC","value":21.48333105556315,"timestamp":1516735082811,"annotation":null,"rendered":"21.483"},{"cached":false,"dataType":"NUMERIC","value":20.304999650001168,"timestamp":1516735382811,"annotation":null,"rendered":"20.305"},{"cached":false,"dataType":"NUMERIC","value":22.42667324442252,"timestamp":1516735682811,"annotation":null,"rendered":"22.427"},{"cached":false,"dataType":"NUMERIC","value":24.463328788904036,"timestamp":1516735982811,"annotation":null,"rendered":"24.463"},{"cached":false,"dataType":"NUMERIC","value":21.82333058889804,"timestamp":1516736282811,"annotation":null,"rendered":"21.823"},{"cached":false,"dataType":"NUMERIC","value":20.449998833337222,"timestamp":1516736582811,"annotation":null,"rendered":"20.45"},{"cached":false,"dataType":"NUMERIC","value":21.503340322198923,"timestamp":1516736882811,"annotation":null,"rendered":"21.503"},{"cached":false,"dataType":"NUMERIC","value":24.624997250009166,"timestamp":1516737182811,"annotation":null,"rendered":"24.625"},{"cached":false,"dataType":"NUMERIC","value":22.319996600011333,"timestamp":1516737482811,"annotation":null,"rendered":"22.32"},{"cached":false,"dataType":"NUMERIC","value":20.721665261115795,"timestamp":1516737782811,"annotation":null,"rendered":"20.722"},{"cached":false,"dataType":"NUMERIC","value":20.94500618331272,"timestamp":1516738082811,"annotation":null,"rendered":"20.945"},{"cached":false,"dataType":"NUMERIC","value":24.435000549998165,"timestamp":1516738382811,"annotation":null,"rendered":"24.435"},{"cached":false,"dataType":"NUMERIC","value":22.543328855570483,"timestamp":1516738682811,"annotation":null,"rendered":"22.543"},{"cached":false,"dataType":"NUMERIC","value":20.686665377782074,"timestamp":1516738982811,"annotation":null,"rendered":"20.687"},{"cached":false,"dataType":"NUMERIC","value":21.126673244422516,"timestamp":1516739282811,"annotation":null,"rendered":"21.127"},{"cached":false,"dataType":"NUMERIC","value":24.566666444445186,"timestamp":1516739582811,"annotation":null,"rendered":"24.567"},{"cached":false,"dataType":"NUMERIC","value":22.70666231112563,"timestamp":1516739882811,"annotation":null,"rendered":"22.707"},{"cached":false,"dataType":"NUMERIC","value":20.846665177782743,"timestamp":1516740182811,"annotation":null,"rendered":"20.847"},{"cached":false,"dataType":"NUMERIC","value":20.535004549984833,"timestamp":1516740482811,"annotation":null,"rendered":"20.535"},{"cached":false,"dataType":"NUMERIC","value":23.973337755540815,"timestamp":1516740782811,"annotation":null,"rendered":"23.973"},{"cached":false,"dataType":"NUMERIC","value":23.51499461668461,"timestamp":1516741082811,"annotation":null,"rendered":"23.515"},{"cached":false,"dataType":"NUMERIC","value":21.001664661117797,"timestamp":1516741382811,"annotation":null,"rendered":"21.002"},{"cached":false,"dataType":"NUMERIC","value":20.316669944433517,"timestamp":1516741682811,"annotation":null,"rendered":"20.317"},{"cached":false,"dataType":"NUMERIC","value":23.59167202775991,"timestamp":1516741982811,"annotation":null,"rendered":"23.592"},{"cached":false,"dataType":"NUMERIC","value":23.78999470001767,"timestamp":1516742282811,"annotation":null,"rendered":"23.79"},{"cached":false,"dataType":"NUMERIC","value":21.298331005563313,"timestamp":1516742582811,"annotation":null,"rendered":"21.298"},{"cached":false,"dataType":"NUMERIC","value":20.300000999996666,"timestamp":1516742882811,"annotation":null,"rendered":"20.3"},{"cached":false,"dataType":"NUMERIC","value":22.963339788867373,"timestamp":1516743182811,"annotation":null,"rendered":"22.963"},{"cached":false,"dataType":"NUMERIC","value":24.26999476668411,"timestamp":1516743482811,"annotation":null,"rendered":"24.27"},{"cached":false,"dataType":"NUMERIC","value":21.599997666674447,"timestamp":1516743782811,"annotation":null,"rendered":"21.6"},{"cached":false,"dataType":"NUMERIC","value":20.37166576111413,"timestamp":1516744082811,"annotation":null,"rendered":"20.372"},{"cached":false,"dataType":"NUMERIC","value":22.12834023886587,"timestamp":1516744382811,"annotation":null,"rendered":"22.128"},{"cached":false,"dataType":"NUMERIC","value":24.523328922236928,"timestamp":1516744682811,"annotation":null,"rendered":"24.523"},{"cached":false,"dataType":"NUMERIC","value":21.918330272232424,"timestamp":1516744982811,"annotation":null,"rendered":"21.918"},{"cached":false,"dataType":"NUMERIC","value":20.543332188892705,"timestamp":1516745282811,"annotation":null,"rendered":"20.543"},{"cached":false,"dataType":"NUMERIC","value":21.505006983310054,"timestamp":1516745582811,"annotation":null,"rendered":"21.505"},{"cached":false,"dataType":"NUMERIC","value":24.648330838897206,"timestamp":1516745882811,"annotation":null,"rendered":"24.648"},{"cached":false,"dataType":"NUMERIC","value":22.406663311122298,"timestamp":1516746182811,"annotation":null,"rendered":"22.407"},{"cached":false,"dataType":"NUMERIC","value":20.69666501111663,"timestamp":1516746482811,"annotation":null,"rendered":"20.697"},{"cached":false,"dataType":"NUMERIC","value":20.943339855533814,"timestamp":1516746782811,"annotation":null,"rendered":"20.943"},{"cached":false,"dataType":"NUMERIC","value":24.440000866663777,"timestamp":1516747082811,"annotation":null,"rendered":"24.44"},{"cached":false,"dataType":"NUMERIC","value":22.81166229445902,"timestamp":1516747382811,"annotation":null,"rendered":"22.812"},{"cached":false,"dataType":"NUMERIC","value":20.758331472228427,"timestamp":1516747682811,"annotation":null,"rendered":"20.758"},{"cached":false,"dataType":"NUMERIC","value":20.641672527758242,"timestamp":1516747982811,"annotation":null,"rendered":"20.642"},{"cached":false,"dataType":"NUMERIC","value":24.223336255545814,"timestamp":1516748282811,"annotation":null,"rendered":"24.223"},{"cached":false,"dataType":"NUMERIC","value":23.24166219445935,"timestamp":1516748582811,"annotation":null,"rendered":"23.242"},{"cached":false,"dataType":"NUMERIC","value":21.04166486111713,"timestamp":1516748882811,"annotation":null,"rendered":"21.042"},{"cached":false,"dataType":"NUMERIC","value":20.47667074443085,"timestamp":1516749182811,"annotation":null,"rendered":"20.477"},{"cached":false,"dataType":"NUMERIC","value":23.768338105539648,"timestamp":1516749482811,"annotation":null,"rendered":"23.768"},{"cached":false,"dataType":"NUMERIC","value":23.686661377795406,"timestamp":1516749782811,"annotation":null,"rendered":"23.687"},{"cached":false,"dataType":"NUMERIC","value":21.22666457778474,"timestamp":1516750082811,"annotation":null,"rendered":"21.227"},{"cached":false,"dataType":"NUMERIC","value":20.305001316662278,"timestamp":1516750382811,"annotation":null,"rendered":"20.305"},{"cached":false,"dataType":"NUMERIC","value":23.023339588868037,"timestamp":1516750682811,"annotation":null,"rendered":"23.023"},{"cached":false,"dataType":"NUMERIC","value":24.15666081113063,"timestamp":1516750982811,"annotation":null,"rendered":"24.157"},{"cached":false,"dataType":"NUMERIC","value":21.47166442778524,"timestamp":1516751282811,"annotation":null,"rendered":"21.472"},{"cached":false,"dataType":"NUMERIC","value":20.398332672224427,"timestamp":1516751582811,"annotation":null,"rendered":"20.398"},{"cached":false,"dataType":"NUMERIC","value":22.163340455531813,"timestamp":1516751882811,"annotation":null,"rendered":"22.163"},{"cached":false,"dataType":"NUMERIC","value":24.571662427791907,"timestamp":1516752182811,"annotation":null,"rendered":"24.572"},{"cached":false,"dataType":"NUMERIC","value":21.94833050556498,"timestamp":1516752482811,"annotation":null,"rendered":"21.948"},{"cached":false,"dataType":"NUMERIC","value":20.529998566671445,"timestamp":1516752782811,"annotation":null,"rendered":"20.53"},{"cached":false,"dataType":"NUMERIC","value":21.738340538864872,"timestamp":1516753082811,"annotation":null,"rendered":"21.738"},{"cached":false,"dataType":"NUMERIC","value":24.619996600011333,"timestamp":1516753382811,"annotation":null,"rendered":"24.62"},{"cached":false,"dataType":"NUMERIC","value":22.211663294455686,"timestamp":1516753682811,"annotation":null,"rendered":"22.212"},{"cached":false,"dataType":"NUMERIC","value":20.618331938893537,"timestamp":1516753982811,"annotation":null,"rendered":"20.618"},{"cached":false,"dataType":"NUMERIC","value":21.045006849977167,"timestamp":1516754282811,"annotation":null,"rendered":"21.045"},{"cached":false,"dataType":"NUMERIC","value":24.484999716667613,"timestamp":1516754582811,"annotation":null,"rendered":"24.485"},{"cached":false,"dataType":"NUMERIC","value":22.65499581668061,"timestamp":1516754882811,"annotation":null,"rendered":"22.655"},{"cached":true,"dataType":"NUMERIC","value":21,"timestamp":1516755132810,"annotation":null,"rendered":"21"}]

    can see that.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    Is <ma-serial-chart> only use 5 different datapoint in series?

    this my chart view
    0_1516688328276_mgse1.PNG
    that series-6 not get in chart.
    my code
    0_1516688380438_mgse2.PNG
    0_1516688396094_mgse3.PNG
    0_1516688403069_mgse4.PNG
    my datasource
    0_1516688428444_mgse5.PNG
    ColdAisle_IntakeAirTemperature6 is real datapoint can current see value.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    In the 3.2 everything is fine.
    But our Mango server update to 3.3 It not work in 3.3 question maybe in the 3.3

    Ok remove / in XID it work.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    In my dashboard.
    all data should use xid to setting only location not to use ma-point-list select datapoint
    I want use <ma-get-point-value point-xid="DP_xxx" point="point1">

    <div class="data">{{point1.value}}</div>

    like this . but point-xid is not use.

    dashboard now like picture every datapoint value is not get by point-xid
    0_1516250325388_3.3pxid-2.PNG
    code like
    0_1516250340402_3.3pxid-3.PNG
    dashboard like
    0_1516250399389_3.3pxid-4.PNG

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    In the version 3.3.0 <ma-point-value point-xid is point-xid have trouble?
    Isn't get current location like this picture.
    0_1516248672368_3.3pxid.PNG

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    Like pic in CSS mango like unknown property 'grid-template-columns'.
    How to fix it?
    0_1514184612371_mgcss.PNG

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    @joelhaggar

    I saw this page.
    But I don't know how to write script code to be user module.
    like https://radmie.github.io/ng-knob/
    I just wire

    Angular.js:
    
    var app = angular.module('KnobDemoApp', ['ui.knob'])
    app.controller('knobCtrl', function ($scope) {
      $scope.value = 65;
      $scope.options = {
        size: 300
        //other options
      };
    });
    

    in the the userModule.js

    in edit pages just type

    <body ng-app="KnobDemoApp">
      <div ng-controller="knobCtrl">
        <ui-knob value="value" options="options"></ui-knob>
      </div>
    </body>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
    <script src="bower_components/ng-knob/dist/ng-knob.min.js"></script>
    

    It will work?

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • sean

    @Jared-Wiltshire Thank you Jared.

    I'll try ng-knob and Angular Gauge but I don't know how to write in user module.
    Can you do a example for me ?

    I try to use https://github.com/infiniteautomation/ma-dashboards/blob/main/UI/web/ngMango/directives/gaugeChart.js
    this code. I know Amchart setting will write in the

    function defaultOptions() {
        return {
            type: 'gauge',
            theme: 'light',
            addClassNames: true,
            axes: [{
                startValue: 0,
                endValue: 100,
                bands: [],
                bottomText: ''
            }],
            arrows: [{
                nailAlpha: 0,
                borderAlpha: 0,
                nailBorderThickness: 6
            }]
        };
    

    But I don't know how to write into userModule let it work.
    I don't see userModule have come to the gaugeChart.

    All code

    define(['angular', 'require'], function(angular, require) {
    'use strict';
    
    var userModule = angular.module('userModule', ['maUiApp']);
    
    
    userModule.component('gaugeChart',{
            restrict: 'E',
            template: '<div ng-class="classes" class="amchart"></div>' +
            '<ma-point-statistics point="$ctrl.point" point-xid="{{$ctrl.pointXid}}"' +
            ' from="from" to="to" statistics="$ctrl.pointStats" rendered="false"></ma-point-statistics>' +
            '<ma-date-range-picker from="from" to="to" preset="LAST_1_MONTHS" update-interval="1 minutes"' +
            ' style="display: none;"></ma-date-range-picker>',
            scope: {},
            controller: GaugeChartController,
            controllerAs: '$ctrl',
            bindings: {
              point: '<?',
              pointXid: '@?',
              start: '<?',
              end: '<?',
              autoStart: '<?',
              autoEnd: '<?',
              interval: '<?',
              band1End: '<?',
              band1Color: '@',
              band2End: '<?',
              band2Color: '@',
              band3End: '<?',
              band3Color: '@',
              radius: '@',
              valueOffset: '<?',
              valueFontSize: '<?',
              axisLabelFontSize: '<?',
              axisThickness: '<?',
              tickInterval: '<?',
              arrowInnerRadius: '<?',
              arrowAlpha: '<?',
              axisAlpha: '<?',
              options: '<?',
              value: '<?',
              renderValue: '&?'
            },
            designerInfo: {
                translation: 'ui.components.gaugeChart',
                icon: 'donut_large',
                category: 'pointValue',
                size: {
                    width: '200px',
                    height: '200px'
                },
                attributes: {
                    point: {nameTr: 'ui.app.dataPoint', type: 'datapoint'},
                    pointXid: {nameTr: 'ui.components.dataPointXid', type: 'datapoint-xid'},
                    band1Color: {type: 'color'},
                    band2Color: {type: 'color'},
                    band3Color: {type: 'color'},
                    autoStart: {type: 'boolean'},
                    autoEnd: {type: 'boolean'}
                }
            }
        
    });
    
    GaugeChartController.$inject = PointValueController.$inject;
    
    function GaugeChartController() {
        PointValueController.apply(this, arguments);
        
        this.chartOptions = defaultOptions();
    }
    
    GaugeChartController.prototype = Object.create(PointValueController.prototype);
    GaugeChartController.prototype.constructor = GaugeChartController;
    
    GaugeChartController.prototype.$onInit = function() {
        this.updateChart();
        this.chart = AmCharts.makeChart(this.$element.find('.amchart')[0], this.chartOptions);
        this.updateChartValue();
    
    
    
        if(this.autoStart || this.autoEnd) {
            this.$scope.$watch('$ctrl.pointStats', function(newValue, oldValue) {
                if (newValue === undefined) return;
    
                if (this.autoStart) {
                    this.start = Math.floor(newValue.minimum.value / 10) * 10;
                }
                if (this.autoEnd) {
                    this.end =  Math.ceil(newValue.maximum.value / 10) * 10;
                }
                this.updateChart();
            }.bind(this));
        }
    };
    
    GaugeChartController.prototype.$onChanges = function(changes) {
        PointValueController.prototype.$onChanges.apply(this, arguments);
        
        var optionsChanged = false;
        for (var key in changes) {
            if (key !== 'point' && key !== 'pointXid' && key !== 'value' && !changes[key].isFirstChange()) {
                optionsChanged = true;
                break;
            }
        }
        
        if (optionsChanged) {
            this.updateChart();
        }
    };
    
    GaugeChartController.prototype.valueChangeHandler = function() {
        PointValueController.prototype.valueChangeHandler.apply(this, arguments);
        this.updateChartValue();
    };
    
    GaugeChartController.prototype.updateChartValue = function() {
        if (!this.chart) return;
        
        var value = this.getValue();
        var textValue = this.getTextValue();
        
        this.chart.arrows[0].setValue(value || 0);
        this.chart.axes[0].setBottomText(textValue);
    };
    
    GaugeChartController.prototype.updateChart = function() {
        var options = angular.merge(this.chartOptions, this.options);
        var axis = options.axes[0];
        var arrow = options.arrows[0];
        
        axis.bands = [];
        axis.startValue = asNumber(this.start);
        axis.endValue = asNumber(this.end, 100);
    
        if (this.band1End != null) {
            var stop1 = asNumber(this.band1End);
            axis.bands.push({
                id: 'band1',
                color: this.band1Color || '#84b761',
                startValue: axis.startValue,
                endValue: stop1
            });
            if (!this.end)
                axis.endValue = stop1;
        }
        if (this.band1End != null && this.band2End != null) {
            var stop2 = asNumber(this.band2End);
            axis.bands.push({
                id: 'band2',
                color: this.band2Color || '#fdd400',
                startValue: axis.bands[0].endValue,
                endValue: stop2
            });
            if (!this.end)
                axis.endValue = stop2;
        }
        if (this.band1End != null && this.band2End != null && this.band3End != null) {
            var stop3 = asNumber(this.band3End);
            axis.bands.push({
                id: 'band3',
                color: this.band3Color || '#cc4748',
                startValue: axis.bands[1].endValue,
                endValue: stop3
            });
            if (!this.end)
                axis.endValue = stop3;
        }
        axis.valueInterval = asNumber(this.interval, (axis.endValue - axis.startValue) / 5);
        
        axis.radius = this.radius || '100%';
        axis.bottomTextYOffset =  asNumber(this.valueOffset, -20);
        axis.bottomTextFontSize =  asNumber(this.valueFontSize, 12);
        axis.axisThickness =  asNumber(this.axisThickness, 1);
        axis.axisAlpha =  asNumber(this.axisAlpha, 0.5);
        axis.tickAlpha =  asNumber(this.axisAlpha, 0.5);
        
        if (this.axisLabelFontSize != null) {
            axis.fontSize = asNumber(this.axisLabelFontSize);
        }
        if (this.tickInterval != null) {
            axis.minorTickInterval = asNumber(this.tickInterval);
        }
        
        arrow.nailRadius = asNumber(this.arrowInnerRadius, 8);
        arrow.innerRadius = arrow.nailRadius + 3;
        arrow.alpha = asNumber(this.arrowAlpha, 1);
        arrow.nailBorderAlpha = arrow.alpha;
    
        if (this.chart) {
            this.chart.validateNow();
        }
    };
    
    function asNumber(value, defaultValue) {
        if (typeof value === 'number' && isFinite(value)) {
            return value;
        } else if (typeof value === 'string') {
            try {
                return parseFloat(value);
            } catch (e) {}
        }
        return defaultValue || 0;
    }
    
    function defaultOptions() {
        return {
            type: 'gauge',
            theme: 'light',
            addClassNames: true,
            axes: [{
                startValue: 0,
                endValue: 100,
                bands: [],
                bottomText: ''
            }],
            arrows: [{
                nailAlpha: 0,
                borderAlpha: 0,
                nailBorderThickness: 6
            }]
        };
    }
    
    return gaugeChart;
    
    }); // define
    

    posted in Dashboard Designer & Custom AngularJS Pages read more

Looks like your connection to Mango Automation Forum was lost, please wait while we try to reconnect.