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.
Angular JS, Area Charts
-
Does the new AngularJS support "Area" AM Charts? I see line, column, but not area,
-
I believe what you want is the following:
<ma-serial-chart default-balloon-text="[[title]]: [[value]]" style="width: 100%; height:100%;" points="points" values="chartValues" default-type="smoothedLine" stack-type="regular" legend="true" balloon="true" export="true"> </ma-serial-chart>If you are trying to set this via a dropdown selector along with the other options you can do something like this (note usage of stack-type and default-type attributes within the template logic):
<md-select ng-model="chartType" ng-init="chartType='smoothedLine'" aria-label="Chart Type"> <md-option value="smoothedLine"> Smooth </md-option> <md-option value="line"> Line </md-option> <md-option value="step"> Step </md-option> <md-option value="column"> Bar </md-option> <md-option value="stacked"> Stacked </md-option> <md-option value="area"> Area </md-option> </md-select> <ma-serial-chart ng-if="chartType!='stacked' && chartType!='area'" default-balloon-text="[[title]]: [[value]]" style="width: 100%; height:100%;" points="points" values="chartValues" default-type="{{chartType}}" stack-type="none" legend="true" balloon="true" export="true"> </ma-serial-chart> <ma-serial-chart ng-if="chartType=='stacked'" default-balloon-text="[[title]]: [[value]]" style="width: 100%; height:100%;" points="points" values="chartValues" default-type="column" stack-type="regular" legend="true" balloon="true" export="true"> </ma-serial-chart> <ma-serial-chart ng-if="chartType=='area'" default-balloon-text="[[title]]: [[value]]" style="width: 100%; height:100%;" points="points" values="chartValues" default-type="smoothedLine" stack-type="regular" legend="true" balloon="true" export="true"> </ma-serial-chart> -
What if I don't want it to be a stacked area?
-
It's not currently possible to do it as such via attributes on the directive, we may make the serial chart directive capable of handling this type of customization in the future.
If you are feeling adventurous you can look into editing web/js/mango-3.3/directives/serialChart.js to customize the chart component to your liking.
-
OK. Here is another code snippet of a serial chart. the export button isn't showing up.
<div ng-show="graphselector == 'kWh'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="energy" series-1-values="energyValues" series-1-color="blue" series-1-type= "column" series-4-point="myVars.temp" series-4-values="myVars.tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" default-type="smoothedLine" stack-type="regular" options="{chartScrollbar:{'enabled': true}}" export="true" legend="true" balloon="true"></ma-serial-chart> </div>Is there a special width I need to keep the div's at?
-
I just copied the following code. I pasted it into the play area and it is working fine. I paste it into my pages, the export button isnt' showing. Is there a new js or css that needs to be added to my pages.
<ma-point-values point="point1" values="point1Values" from="from" to="to" rollup="AVERAGE" rollup-interval="1 hours">
</ma-point-values><ma-serial-chart default-balloon-text="[[title]]: [[value]]" style="height: 300px; width: 100%" default-type="smoothedLine" stack-type="regular" legend="true" balloon="true" export="true" series-1-values="point1Values" series-1-point="point1" default-type="column">
</ma-serial-chart>My pages are referencing...
<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"> <link rel ="stylesheet" ng-href="/modules/dashboards/web/clayground/styles/vitality.css"> -
@atkins.chrisw said in Angular JS, Area Charts:
OK. Here is another code snippet of a serial chart. the export button isn't showing up.
You need to be using v3.2 of the dashboards module and make sure the adminTemplate you are using is based on the version included in v.3.2. I'd copy index.html and the directives folder over from the adminTemplate folder. Then review the differences between app.js and your version of the file. The main thing is that the two references at the start of the file refer to
'mango-3.2/maMaterialDashboards'and'mango-3.2/maAppComponents'.Is there a special width I need to keep the div's at?
No thats totally up to you.
-
I've also posted a topic here with more detail on upgrading your dashboard.
