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.
Changing the standard charts in the angular JS
-
I found a cool AMChart I would like to use as opposed to the standard Charts that come in your templates. Have you built the capability for me to copy hte AMChrt code and paste to the angular system?
-
You should be able to configure just about every aspect of the AmCharts using the options attribute. If you link me to the chart you found I can help you get it working.
-
Here is the code to a chart we would like to implement. Basically we would like to add the Chart Scrollbar to the Chart as well as the download button.
{
"type": "serial",
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"export": {
"enabled": true
},
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"chartCursor": {
"enabled": true,
"categoryBalloonDateFormat": "JJ:NN"
},
"chartScrollbar": {
"enabled": true,
"autoGridCount": true,
"maximum": 9
},
"trendLines": [],
"graphs": [
{
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "column-1"
},
{
"bullet": "square",
"id": "AmGraph-2",
"title": "graph 2",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"column-1": 8,
"column-2": 5,
"date": "2014-03-01 07:57"
},
{
"column-1": 6,
"column-2": 7,
"date": "2014-03-01 07:58"
},
{
"column-1": 2,
"column-2": 3,
"date": "2014-03-01 07:59"
},
{
"column-1": 1,
"column-2": 3,
"date": "2014-03-01 08:00"
},
{
"column-1": 2,
"column-2": 1,
"date": "2014-03-01 08:01"
},
{
"column-1": 3,
"column-2": 2,
"date": "2014-03-01 08:02"
},
{
"column-1": 6,
"column-2": 8,
"date": "2014-03-01 08:03"
}
]
} -
Hey Jared, this is what we put into the play-area. I wonder if I filledthe option out wrong
<div layout="row">
<md-input-container flex="" class="no-errors-spacer">
<label>Choose a point</label>
<ma-point-list ng-model="point1"></ma-point-list>
</md-input-container>
</div><div layout="row">
<md-input-container flex="33" class="no-errors-spacer">
<label>Date preset</label>
<ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="1 minutes"></ma-date-range-picker>
</md-input-container>
<md-input-container flex="33" class="no-errors-spacer">
<label>From date</label>
<ma-date-picker ng-model="from"></ma-date-picker>
</md-input-container>
<md-input-container flex="33" class="no-errors-spacer">
<label>To date</label>
<ma-date-picker ng-model="to"></ma-date-picker>
</md-input-container>
</div><ma-point-values point="point1" values="point1Values" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes">
</ma-point-values><ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" options="chartScrollbar:{}">
</ma-serial-chart> -
Jared. I figured out the Scrollbar. Question though. In AMCharts it has an export function. Have you incorporated that option in this Angular Version?
-
@atkins.chrisw
Yes we have implemented the export functionality in the Dashboards v3.2 module which will be released Monday. Hang tight! -
That is fantastic. Ill hold. Loving it
-
Hello Jared. Loving the new 3.2 Lots of good changes.
So am I able to have a 3rd menu item then with 3.2? Or... more specifically, I need to have some links to pages that are not on the menu. Do I still have to reference them in the app.js?
-
If you are still using the "adminTemplate" which you have copied into your overrides folder then you will still need to maintain your menu structure in your app.js file. You could also try copying your pages into new custom pages in the standard dashboards admin view (mdAdmin) instead.
Yes you can now use multi-level menus in both mdAdmin and the adminTemplate. If you want to use them in the adminTemplate refer to the mdAdmin app.js for how to do it.
-
What if I want to link to a page I have made, but I do not want the page to be on the menu?
Also, what if I make a page that has a specific graph, labels, and layout. I have a site with 5 buildiungs. I want to make 1 page that has the graphs, textboxes, etc. I want to make it so if I press a button that says Gas, it keeps the graph and layout, it just uses the gas device_xid's for reverence.
Do you have an example of that?
-
What version of the dashboards module are you using? Have you copied the adminTemplate or any other template? Or are you using the custom pages in the v3.2 version of the module?
Yes you can definitely do what you specified, I'd suggest setting the data point's "device name" to whatever the name of the building is. Use a set of buttons that do something like
ng-click="buildingName='Building 1'"Then use this to get the points for that building<ma-point-query query="{deviceName:buildingName}" points="points"></ma-point-query> -
I'm still using the adminTemplate. I am trying to understand better the new msAdmin and how to recreate our website with it.
-
Using the adminTemplate you will want to add a Page to the MENU_ITEMS array in app.js but you will want to set its menuHidden property to true.
For example this is the errors Page definition:
{ name: 'dashboard.apiErrors', url: '/api-errors', templateUrl: 'views/dashboard/errors.html', menuTr: 'dashboards.v3.dox.apiErrors', menuIcon: 'warning', menuHidden: true }So you would want to do this for the custom page you have created. You will still need a url, template, state name, and menuTr or menuText (as it is used in the breadcrumbs header on the page when viewed.
and then you can link to them via the state name and ui-sref property on a link:
eg:<a ui-sref="dashboard.apiErrors" class="md-mangoDefault-theme"><md-icon class="md-mangoDefault-theme material-icons">warning</md-icon></a>or simply the href set by the url property:
<a href="/dashboards/api-errors" class="md-mangoDefault-theme"><md-icon class="md-mangoDefault-theme material-icons">warning</md-icon></a> -
I am getting this error:
angular.js:118 Error: Could not resolve 'dashboard.cooling' from state 'dashboard.section1.page1'
at Object.y.transitionTo (angular-ui-router.js:7)
at Object.y.go (angular-ui-router.js:7)
at angular-ui-router.js:7
at angular.js:158
at e (angular.js:45)
at angular.js:48 -
When are you getting the error? Please post up the URL you are trying to navigate to and/or the HTML code for your link.
Please also post the contents of your app.js file.We cannot even begin to start guessing why you are getting that error without knowing more details.
Can you please try and explain the context of your errors more completely when you are asking questions. It will make it a lot faster and easier for us to help you out. -
Sorry Jared. You are right. I am getting an error opening a custom page from a button click on one of my pages.
Here is my app.js file.
0_1472833196236_apps.jsHere is my HTML code for the page where I am using a button to go to a custom page.
0_1472833228093_page1.htmlI added the custom pages into the views/dashboards/ file
For quick reference, here is a snippet of the app.js file// define our pages, these are added to the $stateProvider in the config block below
myAdminApp.constant('PAGES', [
{
state: 'dashboard',
url: '/dashboard',
templateUrl: 'views/dashboard/main.html',
resolve: {
auth: ['$rootScope', 'User', function($rootScope, User) {
// retrieves the current user when we navigate to a dashboard page
// if an error occurs the $stateChangeError listener redirects to the login page
$rootScope.user = User.current();
return $rootScope.user.$promise;
}],
dashboardTranslations: ['Translate', function(Translate) {
// load any translation namespaces you want to use in your app up-front
// so they can be used by the 'tr' filter
return Translate.loadNamespaces(['dashboards']);
}]
}
},
{
state: 'login',
url: '/login',
templateUrl: 'views/login.html',
resolve: {
loginTranslations: ['Translate', function(Translate) {
return Translate.loadNamespaces('login');
}]
}
},
{
state: 'dashboard.home',
url: '/home',
templateUrl: 'views/dashboard/home.html',
menuTr: 'dashboards.v3.dox.home',
//menuIcon: 'fa fa-home', // font awesome css classes for icon
menuType: 'link'
},
{
state: 'dashboard.apiErrors',
url: '/api-errors',
templateUrl: 'views/dashboard/errors.html',
menuTr: 'dashboards.v3.dox.apiErrors'
},
{
state: 'dashboard.power',
url: '/power',
templateUrl: 'views/dashboard/power.html',
// menuTr: 'dashboards.v3.dox.power'
menuhidden: true
},
{
state: 'dashboard.heating',
url: '/gas',
templateUrl: 'views/dashboard/heating.html',
// menuTr: 'dashboards.v3.dox.gas'
menuhidden: true
},
{
state: 'dashboard.cooling',
url: '/power',
templateUrl: 'views/dashboard/cooling.html',
// menuTr: 'dashboards.v3.dox.cooling'
menuhidden: true
},
{
state: 'dashboard.water',
url: '/water',
templateUrl: 'views/dashboard/water.html',
// menuTr: 'dashboards.v3.dox.water'
menuhidden: true
}, -
OK I think that your problem is that you have the same url in both state
dashboard.poweranddashboard.cooling.
Also your menu items won't be hidden as the property name ismenuHiddennotmenuhidden(should have a capital H). -
OK. I have fixed those items. It is still giving me that error.
-
@atkins.chrisw
Have you cleared your browser cache? -
Yes. Whats weird is that the Home button works. It will send me back home.
