• ThomasEinasto

    Hi @benaznbe!

    As @phildunlap suggested, you should take a look at that forum thread on how to create your own customized module.

    You can see that you are limited for 10 series by using mangos own component.

    In mango 3.x you can access user module page in Administration -> UI settings. Scroll down until you find Miscellaneous settings. There you can find User module URL. Click on the paperclip and click + sign on top right corner.

    ref: https://help.infiniteautomation.com/getting-started-with-a-user-module/

    The following is taken from this forum post https://forum.infiniteautomation.com/topic/2862/bar-chart-category-as-x-axis/15 .

    Thank @Jared-Wiltshire for input.

    Create filename usermodule.js. Add following to there.

    define(['angular', 'require', 'amcharts/serial'], function(angular, require, AmCharts) {
    'use strict';
    var userModule = angular.module('userModule', ['maUiApp']);
    userModule.component('categoryXAxis', {
        bindings: {
            values: '<?',
        controller: ['$scope', '$element', function($scope, $element) {
            const options = {
              "type": "serial",
              "theme": "light",
              "addClassNames": true,
              "marginRight": 70,
              "dataProvider": [],
              "valueAxes": [{
                "axisAlpha": 0,
                "position": "left",
                "title": "Level"
              "startDuration": 1,
              "graphs": [{
                "balloonText": "<b>[[category]]: [[value]]</b>",
                "fillColorsField": "color",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "level"
              "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
              "categoryField": "INVxx",
              "categoryAxis": {
                "gridPosition": "start",
                "labelRotation": 45
                "titles": [{
                 "text": "Production Chart"
            const chart = AmCharts.makeChart($element[0], options);
            $scope.$watch('$ctrl.values', () => {
                chart.dataProvider = this.values;
            }, true);
    return userModule;
    }); // define
    userModule.component('categoryXAxis', {

    categoryXAxis string is defining the brackets of HTML. You can rename it as you like.

              "categoryField": "INVxx",

    Declares the variable name in an values array which describes labels of columns.

                "valueField": "level"

    Declares the variable in an values array which describes the value of the point.

    For making it dynamic and live

            $scope.$watch('$ctrl.values', () => {
                chart.dataProvider = this.values;
            }, true);

    This looks at values variable change. see ref: https://www.sitepoint.com/mastering-watch-angularjs/

    For more customization see amCharts own documentation which @Jared-Wiltshire and @phildunlap promote all the time on the forums and in Mango. It has all the documentation for them.

    ref: https://www.amcharts.com/demos/simple-column-chart/

    Now press OK on the opened modal and press SAVE on top left corner of the UI Settings page.

    You have now created your own component called categoryXAxis.

    How can you use it on your own page?

    As @phildunlap said you probably do not need to use statistics to get last values of your points.


    already does it for you

    So for your page I eliminated the statistics to make it more shorter. It is below

    <md-whiteframe id="graph2" align="center" style="position: absolute; left: 24px; top: 240px; width: 900px; height: 280px; background-color: rgb(255, 255, 255); border: 1px solid rgb(169, 169, 169); font-size: 20px; font-weight: bolder; color: rgb(1, 1, 1);">Production Chart
            <div style="display:none;" ng-init="myPreset='DAY_SO_FAR'"></div>
                <div ng-init="myInterval='1 minutes'"></div>
                <ma-date-range-picker style="display:none;" update-interval="{{myInterval}}" preset="{{myPreset}}" to="to" from="from"></ma-date-range-picker>
                <div id="14145" style="display:none;width: 500px; height: 35px; position: absolute; left: 800px; top: 700px;" layout="row">
                    <md-input-container flex=""> 
                    <label>From date</label>
                        <ma-date-picker format="DD-MM-YYYY" mode="both" ng-model="from"></ma-date-picker>
                        <md-input-container flex="">
                        <label>To date</label>
                        <ma-date-picker format="DD-MM-YYYY" mode="both" ng-model="to"></ma-date-picker>
        <ma-get-point-value point-xid="INV01.DailyEnergy" point="point1"></ma-get-point-value>
        <ma-get-point-value point-xid="INV02.DailyEnergy" point="point2"></ma-get-point-value>
        <ma-get-point-value point-xid="INV03.DailyEnergy" point="point3"></ma-get-point-value>
        <ma-get-point-value point-xid="INV04.DailyEnergy" point="point4"></ma-get-point-value>
        <ma-get-point-value point-xid="INV05.DailyEnergy" point="point5"></ma-get-point-value>
        <ma-get-point-value point-xid="INV06.DailyEnergy" point="point6"></ma-get-point-value>
        <ma-get-point-value point-xid="INV07.DailyEnergy" point="point7"></ma-get-point-value>
        <ma-get-point-value point-xid="INV08.DailyEnergy" point="point8"></ma-get-point-value>
        <ma-get-point-value point-xid="INV09.DailyEnergy" point="point9"></ma-get-point-value>
        <ma-get-point-value point-xid="INV10.DailyEnergy" point="point10"></ma-get-point-value>
        <ma-get-point-value point-xid="INV11.DailyEnergy" point="point11"></ma-get-point-value>
        <ma-get-point-value point-xid="INV12.DailyEnergy" point="point12"></ma-get-point-value>
        <ma-get-point-value point-xid="INV13.DailyEnergy" point="point13"></ma-get-point-value>
        <ma-get-point-value point-xid="INV14.DailyEnergy" point="point14"></ma-get-point-value>
        <ma-get-point-value point-xid="INV15.DailyEnergy" point="point15"></ma-get-point-value>
        <ma-get-point-value point-xid="INV16.DailyEnergy" point="point16"></ma-get-point-value>
        <ma-get-point-value point-xid="INV17.DailyEnergy" point="point17"></ma-get-point-value>
        <ma-get-point-value point-xid="INV18.DailyEnergy" point="point18"></ma-get-point-value>
       <category-x-axis class="amchart"
       values="[{INVxx: point1.name, level: point1.value,color:'blue'}, 
                {INVxx: point2.name, level: point2.value,color:'red'}, 
                {INVxx: point3.name, level: point3.value,color:'green'}, 
                {INVxx: point4.name, level: point4.value,color:'gray'}, 
                {INVxx: point5.name, level: point5.value,color:'brown'}, 
                {INVxx: point6.name, level: point6.value,color:'orange'}, 
                {INVxx: point7.name, level: point7.value,color:'yellow'}, 
                {INVxx: point8.name, level: point8.value,color:'purple'}, 
                {INVxx: point9.name, level: point9.value,color:'blue'}, 
                {INVxx: point10.name, level: point10.value,color:'blue'} , 
                {INVxx: point11.name, level: point11.value,color:'blue'} , 
                {INVxx: point12.name, level: point12.value,color:'blue'} , 
                {INVxx: point13.name, level: point13.value,color:'blue'} , 
                {INVxx: point14.name, level: point14.value,color:'blue'} , 
                {INVxx: point15.name, level: point15.value,color:'blue'} , 
                {INVxx: point16.name, level: point16.value,color:'blue'} , 
                {INVxx: point17.name, level: point17.value,color:'blue'} , 
                {INVxx: point18.name, level: point18.value,color:'blue'}]">

    ref: https://forum.infiniteautomation.com/topic/3503/how-to-chart-with-data-points-in-the-x-axis-instead-of-time

    I wish you good luck in all.


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

    Old UI topic

    Older users of Mango were using Legacy UI before Angular was introduced in Mango. But Mango legacy pages did not have so much flexibility / easy configuration to create your own system like you want which is probably why IAS took the direction for the Mango 3.x UI.

    Most simply said in Mango 3.x user is in a web-application developed in Angular which uses Mango (and other) API's/ libraries to configure Mango settings. The same way like in the old UI.

    You can go to legacy (old-UI) by going to lets say /data_sources.shtm to see how old Mango looked like. There on top left corner you can also see your overrides logo if I am not mistaken.

    File topic

    And you are correct. The uploaded file should stay in that folder if you update Mango. The file is actually put in $ROOT/filestore/public/ folder which is not modified by updates.

    Have a nice weekend!

    posted in User help read more
  • ThomasEinasto


    Does your customer want to use their existing MS SQL server as their Mango database? If so then I guess you are out of luck because to my knowledge mango can use 3 main types of databases: H2 (default), Derby, MySQL and also their own fast NoSQL database.

    If your customer wants to use their SQL server so that Mango gathers data from it then you should look into the SQL Datasource module which supports MS SQL server connection. As I have never used this module I cannot help but there is help in the datasource module if you click the blue questionmark while creating the datasource.


    posted in Mango Automation general Discussion read more
  • ThomasEinasto

    Hi @Nomathamsanqa-Philiso

    You can create one dashboard page for your customers and then change the datapoint permissions according to your customer points. Log into your Mango instance as an admin. I hope you have created the datasources/datapoints for your clients.

    After logging in click on the users icon. ( 3rd icon from the left ) Then you have opened this: 0_1477064859909_upload-020c9a15-2a69-40db-b771-5e4393ac6227

    On the Edit user dropdown list you have an icon Add User. When clicked you will open up a new user details.

    Edit the Username, password, e-mail etc... Set the home URL as the link to the custom dashboard page. Change the permissions to some keyword which Mango uses to link the datapoints according to the user. e.g "Client1" or "Client2" etc... so that you will remember that the user permissions are linked that specific client. Then save the user.

    After that you have created a new user and then you can go and click on the Data point permissions where you can setup the points which the user can see. There you can filter the points by datasource name / xid etc.

    I have filtered the datasource as "Client1DataSource"


    Then you can bulk apply permissions to the filtered points on the bottom of the page. I have my client setup as their permissions name "gases".


    Then the client who logs into their session with the home url as the custom dashboard link can only see the points which have been assigned to them in their dashboard.

    Hope you understood the quick tutorial where I tried to explain the basics of the permissions. But I strongly suggest you take a look at the links which Will pointed you out in the previous post.


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

    @etantonio You probably have datapoint template enabled which is why you cannot change the properties.

    Edit the template or just untick the Use Property Template.


    posted in Mango Automation general Discussion read more
  • ThomasEinasto

    Hi @MattFox !

    Sorry for replying so late but I went with your suggestion on doing some programming for achieving the results which I need.

    I was pleased to see your requests / posts on the forum which pointed me to right directions while customizing for new directives.

    Mainly where @jared-wiltshire said in future defining of usermodule required scripts/functions help:


    Which helped my a lot for customizing Mangos own directives in the future as for 3.3.x all the directives and components are in AMD/Require style which usermodules use.

    If someone have not noticed then this should be number one place to go to see how @Jared-Wiltshire has done the directives. https://github.com/infiniteautomation/ma-dashboards/blob/3.3.x/UI/web/ngMango/

    I'll put out the customized directive and component if someone wants to use prezooming, start-end date of the zoom for further data analysis.


    I changed the dateformats from original as ngMango own directive uses other services etc.

    Function pointValueToString was taken from https://github.com/infiniteautomation/ma-dashboards/blob/3.3.x/UI/web/ngMango/services/Util.js

    Added bindings:

    End - takes timestamp of zoom end
    hours - takes a number of hours and then uses moment for subtracting the hours from end zoom.
    selected - Object output binding

    • selected.start >> zoomed chart start date
    • selected.end >> zoomed chart end date

    Example usage:

    <my-custom-mango-chart id="8ec0e029-4b0b-4f53-aa0d-6c25b4ds22sssdsdbfa991" style="position: absolute; left: 1058px; top: 1022px; width: 798px; height: 500px;"  series-1-values="tank1Values" series-1-point="tank1" series-1-type="line" series-1-color="blue" legend="true" balloon="true" cursor-sync-id="graphs" series-1-graph-options="{id:'graph-id-2'}" end="start2.time" hours="6" options="{ zoomOutText: '',chartScrollbar:{graph:'graph-id-2' }}">

    These dates can be used as variables for ma-point-statistics directive to get current selection statistics for example.

    As Angular is still quite hard I'll keep learnin and askin. But as @Jared-Wiltshire and all of you in IAS staff are publishing all online it is relatively easier to customize and learn.

    Huge thanks and cheers!


    posted in How-To read more
  • ThomasEinasto

    If I understand it correctly you would like to create some dialog window where you can override some settings or set some point values and then if user clicks outside of the window the window will close automatically.

    I would use md-dialog for something like that which Mango has...

    This however needs programming to be customized to your needs.


    posted in Wishlist read more
  • ThomasEinasto

    Hi @sky_watcher

    I assume your external IP which you provided is your own modem IP (router). And your MangoES is connected into your local network. You should first see port forwarding to make it secure and to make your router forward remote connections to your ES. This is not good practice as you will be providing to everyone your router which is not a server per say.

    See, for more information-> https://portforward.com/

    Secondly you should buy a domain to get an human understandable address. https://www.sky_watcher.net for an example.

    After buying a domain you can assign this domain dns to be linked with your ip address. Then you would have to wait for a few hours after your dns settings have been updated through all dns servers.

    Then if you go to your bought domain name through your browser then the dns server which you are using for your computer will connect you remotely to your assigned IP address.

    More information is in available like this.


    posted in Mango Automation read more
  • ThomasEinasto

    As reading through the help :

    When point value changes is the default logging setting. The point value and its time of occurrence is written to the database only if the value of the point actually changes. This setting provides the best compromise of quality of historical information vs storage space efficiency. For Numeric points, a Tolerance, or "deadband", can also be provided; the value will be logged if the absolute value of the difference between the present value and the previous value equals or exceeds the given tolerance.

    I would suggest to use The When point timestamp changes setting which is similar in behaviour to the on value change setting, but the timestamp of the sample is compared instead of the value to save all triggers to Mango database.


    posted in User help read more
  • ThomasEinasto

    Hi @fleh

    It depends on what are you actually trying to do. In new UI it is simple. Go to Administration => UI settings and change logo source and it will be changed after you save your UI settings. Note that it should be in public folder because mango might restrict access to other parts of the system for not logged in users.

    If you want to change via overrides then you are mostly doing changes to the old UI and Mango system itself.

    posted in User help read more