Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
How to simulate presetPicker change with buttons?
-
I want to use buttons instead of a select to change chart time periods, but since buttons don't have similar functionality that a select has (one referable object with multiple options ) I'm using buttons to change the select value. However, changing select value with javascript doesn't trigger any events that trigger when doing it manually. So I'm asking how should I simulate manual change? I'm unsure if regular answers found in stackoverflow work because I don't actually know what function mango triggers with onchange
-
What version JavaScript library are you using? We just released version 3.0 of the Custom Dashboards module with the AngularJS library. This should be pretty easy to do in the Angular code.
-
Thank you for the suggestion. I updated to 3.0 just today. However, this is my first project with javascript so I'm quite unfamiliar with AngularJS.
I'll check out the online documentation. It's a shame that the documentation in mango custom dashboards page isn't working for me. The page loads but none of the links work
When opening the page I'm getting a lot of 404 errors to html GET messages, such as:
GET http://localhost:8080/modules/dashboards/web/vendor/angular/angular.min.js.map [HTTP/1.1 404 Not Found 30ms]
GET http://localhost:8080/resources/angular-resource.min.js.map [HTTP/1.1 404 Not Found 10ms]
GET http://localhost:8080/modules/dashboards/web/vendor/angular-messages/angular-messages.min.js.map [HTTP/1.1 404 Not Found 28ms]
GET http://localhost:8080/modules/dashboards/web/vendor/angular-animate/angular-animate.min.js.map [HTTP/1.1 404 Not Found 7ms] -
Try clearing your browser cache and see if that resolves it?
-
nyoa, check you are being directed to /modules/dashboards/web/mdAdmin/ and not sbAdmin when you click the dashboards link on the menu. If not change the "Icon link destination" under "Dashboard settings" in system settings.
Don't worry about the 404 on the .map files, its the chrome debugger trying to find source maps for the minified Javascript files.
-
I also want to change the dateRangerPicker preset from a button so clicking one button updates all the pointvalues for a serial chart.
I would like to have a series of buttons with labels "5 Minutes", "1 hour", "1 day", "1 week", "1 month" and clicking these buttons will change the preset of the date picker. I also want the buttons to change the update-interval on the ma-date-range-picker and the rollup-interval on the ma-point-values directives.
can anyone provide an example of how this would be done?
-
@Noya
If you accomplished your presetPicker change with buttons, can you share a code snippit to help the community?@Craig
I would look into using a button tag <button> with a ng-click. Give it a try in the custom dashboards play area. If you get stuck post your code here and we can help you. -
I don't understand how preset is different from to and from. Well to and from are date strings or possibly objects that when printed render as date string. preset seems to be a ng-model object that makes a select box, but I am not sure how to refer to preset to set it programmatically.
<html lang="en" ma-app="maMaterialDashboards"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>dash</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/resources/angular-csp.css"></link> <link rel="stylesheet" href="../vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css"> </head> <body layout="row" style="background-color: #141414; color: #D8D9DA; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 1rem; line-height: 1.5"> <div ng-if="appLoading"> <span>App is loading..</span> </div> <div ng-cloak layout="column" style="width: 100%"> <div style="background-color: #1f1d1d;"> <ma-point-values point-xid="DP_923401" point="Plant_Flow" values="Plant_FlowValues" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"> </ma-point-values> <ma-point-values point-xid="DP_299411" point="U1_Flow" values="U1_FlowValues" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"> </ma-point-values> <ma-point-values point-xid="DP_777475" point="U2_Flow" values="U2_FlowValues" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"> </ma-point-values> <ma-point-values point-xid="DP_030020" point="HPL_PV" values="HPL_PVValues" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"> </ma-point-values> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="Plant_FlowValues" series-1-point="Plant_Flow" series-1-color="green" series-1-title="Plant Flow" series-2-values="U1_FlowValues" series-2-point="U1_Flow" series-2-color="white" series-2-title="U1 Flow" series-3-values="U2_FlowValues" series-3-point="U2_Flow" series-3-color="pink" series-3-title="U2 Flow" series-4-values="HPL_PVValues" series-4-point="HPL_PV" series-4-color="blue" series-4-title="Headpond Level" series-4-axis="right" options="{ legend:{spacing:0, fontSize:10, valueWidth:32, color:'#D8D9DA'}, color:'#D8D9DA', titles:[{text:'Flow and Level'}], valueAxes:[{title:'Flow (m³/s)', gridColor:'#444343', axisColor:'#444343'}, {title:'Level (m ASL)', gridColor:'#444343', axisColor:'#444343'}], categoryAxis:{gridColor:'#444343', axisColor:'#444343'} }"> </ma-serial-chart> <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds"> </ma-date-range-picker> <md-button class="md-raised" ng-click="preset='LAST_12_HOURS'">12 hr</md-button> To: {{to}} From: {{from}} Preset: {{preset}} </div> <script src="/resources/require.js"></script> <script src="/resources/loaderConfig.js"></script> <script src="../js/loaderConfig.js"></script> <script type="text/javascript">require(['dashboards/templates/extendApp']);</script> </body> </html> -
This is a great post Craig thank you for all the details and code. It's posts like these that can really benefit the whole community.
I understand the problem but I don't have a solution. Perhaps some others will jump in soon and help out. I think the best place to look for clues is in the directive code scripts to see how this all comes together.
Here's the path <Mango Root>/web/modules/dashboards/web/js/mango-3.0/directives
I'll keep looking to this as I have time. I'm sure there's a solution right around the corner.
-
Preset on <md-date-range-picker> takes a string as well and therefore you could use angular variables to dynamically set it. Here are the possible options for the preset:
LAST_5_MINUTES
LAST_15_MINUTES
LAST_30_MINUTES
LAST_1_HOURS
LAST_3_HOURS
LAST_6_HOURS
LAST_12_HOURS
LAST_1_DAYS
LAST_1_WEEKS
LAST_2_WEEKS
LAST_1_MONTHS
LAST_3_MONTHS
LAST_6_MONTHS
LAST_1_YEARS
LAST_2_YEARS
DAY_SO_FAR
WEEK_SO_FAR
MONTH_SO_FAR
YEAR_SO_FAR
PREVIOUS_DAY
PREVIOUS_WEEK
PREVIOUS_MONTH
PREVIOUS_YEARHere is some code that may work to set the default to last 30 min, make the date picker hidden, and have a button that will set the preset to last 12 hours ( I have not tested yet though I will update if needed)
<div ng-init="myPreset='LAST_30_MINUTES'"> <ma-date-range-picker from="from" to="to" preset="{{myPreset}}" update-interval="5 seconds" style="display:none;"> </ma-date-range-picker> <md-button class="md-raised" ng-click="myPreset ='LAST_12_HOURS'">12 hr</md-button> </div> -
right, works now:
<ma-point-values point-xid="DP_923401" point="Plant_Flow" values="Plant_FlowValues" from="from" to="to" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_299411" point="U1_Flow" values="U1_FlowValues" from="from" to="to" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_777475" point="U2_Flow" values="U2_FlowValues" from="from" to="to" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_030020" point="HPL_PV" values="HPL_PVValues" from="from" to="to" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="Plant_FlowValues" series-1-point="Plant_Flow" series-1-color="green" series-1-title="Plant Flow" series-2-values="U1_FlowValues" series-2-point="U1_Flow" series-2-color="white" series-2-title="U1 Flow" series-3-values="U2_FlowValues" series-3-point="U2_Flow" series-3-color="pink" series-3-title="U2 Flow" series-4-values="HPL_PVValues" series-4-point="HPL_PV" series-4-color="blue" series-4-title="Headpond Level" series-4-axis="right" options="{ legend:{spacing:0, fontSize:10, valueWidth:32, color:'#D8D9DA'}, color:'#D8D9DA', titles:[{text:'Flow and Level'}], valueAxes:[{title:'Flow (m³/s)', gridColor:'#444343', axisColor:'#444343'}, {title:'Level (m ASL)', gridColor:'#444343', axisColor:'#444343'}], categoryAxis:{gridColor:'#444343', axisColor:'#444343', startEffect:'elastic'} }"> </ma-serial-chart> <ma-date-range-picker from="from" to="to" preset="{{presetPeriod}}" update-interval="{{updateInterval}}" style="display: none"> </ma-date-range-picker> <md-button class="md-raised" ng-click="presetPeriod='LAST_15_MINUTES';rollupInterval='1 seconds'; updateInterval='5 seconds'">15 min</md-button> <md-button class="md-raised" ng-click="presetPeriod='LAST_1_HOURS'; rollupInterval='1 seconds'; updateInterval='10 seconds'">1 hour</md-button> <md-button class="md-raised" ng-click="presetPeriod='LAST_1_DAYS'; rollupInterval='1 minutes'; updateInterval='1 minutes'">1 day</md-button> <md-button class="md-raised" ng-click="presetPeriod='LAST_1_WEEKS'; rollupInterval='5 minutes'; updateInterval='15 minutes'">1 week</md-button> <md-button class="md-raised" ng-click="presetPeriod='LAST_1_MONTHS'; rollupInterval='15 minutes'; updateInterval='15 minutes'">1 month</md-button> -
Yep looks like you got the hang of it
-
Hi Craig, this is an alternative aproach you may be interested in. It is more flexible in that you can use whatever periods you desire and you don't need to use <ma-date-range-picker>.
<md-button class="md-raised" ng-click="subtractX=15;subtractUnit='minute';rollupInterval='1 seconds'; updateInterval='5 seconds'">15 min</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='hour'; rollupInterval='1 seconds'; updateInterval='10 seconds'">1 hour</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='day'; rollupInterval='1 minutes'; updateInterval='1 minutes'">1 day</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='week'; rollupInterval='5 minutes'; updateInterval='15 minutes'">1 week</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='month'; rollupInterval='15 minutes'; updateInterval='15 minutes'">1 month</md-button> <ma-now update-interval="{{updateInterval}}" output="now"></ma-now> <ma-calc input="now | moment:'subtract':subtractX:subtractUnit" output="from"></ma-calc> <ma-point-values point-xid="DP_923401" point="Plant_Flow" values="Plant_FlowValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_299411" point="U1_Flow" values="U1_FlowValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_777475" point="U2_Flow" values="U2_FlowValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_030020" point="HPL_PV" values="HPL_PVValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values>
