ma-serial-chart can not set multiple axis and max-min
-
Hi Support.
Can I help me please.I can not set the Y axis to the left without the 1 value 1 axis.
and I want to set the maximum and minimum values for each axes.<md-input-container style="position: absolute; left: 0px; top: 0px; width: 150px;"> <label>Maximum value</label> <input type="number" ng-model="max"> </md-input-container> <md-input-container style="position: absolute; left: 155px; top: 0px; width: 150px;"> <label>Minimum value</label> <input type="number" ng-model="min"> </md-input-container> <div layout="row"> <div ng-init="myPreset='DAY_SO_FAR'"></div> <div ng-init="myInterval='1 minutes'"></div> <ma-date-range-picker from="from" to="to" style="display: none" update-interval="{{myInterval}}" preset="{{myPreset}}"></ma-date-range-picker> <md-input-container flex="" style="position: absolute; left: 320px; top: 0px; width: 240px; height: 100px;"> <label>From date</label> <font size="3"><ma-date-picker ng-model="from" mode="both" format="DD-MM-YYYY"></ma-date-picker></font> </md-input-container> <md-input-container flex="" style="position: absolute; left: 565px; top: 0px; width: 240px; height: 100px;"> <label>To date</label> <font size="3"><ma-date-picker ng-model="to" mode="both" format="DD-MM-YYYY"></ma-date-picker></font> </md-input-container> </div> <div layout="row" ng-init="points=[]"><font size="3"> <md-input-container style="position: absolute; left: 810px; top: 0px; width: 240px; height: 100px;"> <label>Search by Name</label> <ma-data-source-list ng-model="myDataSource"></ma-data-source-list> </md-input-container></font> <md-input-container style="position: absolute; left: 1060px; top: 0px; width: 240px; height: 100px;"> <label>Add a point</label> <ma-point-list limit="2000" ng-model="point" init-point="false" ng-change="point &&points.push(point); point=null" query="{deviceName:nameFilter}"></ma-point-list> </md-input-container> </div> <md-whiteframe id="inv11" style="position: absolute; left: 320px; top: 70px; border-width: thin; border-style: solid; width: 980px; height: 0px; border-color: rgb(181, 181, 181); background-color: rgb(255, 255, 255);"> <md-chips ng-model="points" name="name" readonly="true" md-max-chips="10"> <md-chip-template ng-click="points.splice($$replacedScope.$index,1)"> <strong>{{$chip.name}}</strong> <em>({{$chip.deviceName}})</em> <md-icon>close</md-icon> </md-chip-template> </md-chips> <div style="position: absolute; left: 0px; top: 50px; height: 0px; width: 100%;"> <font size="3"> <ma-point-query query="{$and: true, deviceName:points, name:checkboxModel.value4}" limit="0" points="points"></ma-point-query> <ma-point-values points="points" values="combined" from="from" to="to"></ma-point-values> <ma-serial-chart style="height: 280px; width: 100%" stack-type="regular" values="combined" series-1-axis="left" series-1-axis="left-2" points="points" legend="true" options="{synchronizeGrid: false, valueAxes:[{ minimum:min, maximum:max}]}"></ma-serial-chart></font> </div>
Thank you for support.
-
This post is deleted! -
@benaznbe said in ma-serial-chart can not set multiple axis and max-min:
Can I help me please.I can not set the Y axis to the left without the 1 value 1 axis.
You're going to have to try and re-phrase that, I don't understand what you are asking.
@benaznbe said in ma-serial-chart can not set multiple axis and max-min:
I want to set the maximum and minimum values for each axes.
You can set options for each axis via the options attribute as you already had in your code. Each item in the
valueAxes
array corresponds to the y-axes 'left', 'right', 'left-2', 'right-2' respectively. e.g. you can do something like this.options="{valueAxes:[{minimum:0, maximum:100}, {minimum:0, maximum:100}, {minimum:-50, maximum:150}, {minimum:0, maximum:200}]}"
See here for all of the documentation for the value axes - https://docs.amcharts.com/3/javascriptcharts/ValueAxis
-
@Jared-Wiltshire
Hi Jared
I just cant get my left axis to be 0-100.Really not sure what i'm doing wrong. BTW it would be really great if we could we could set the axis of the watch list charts. I get asked on a weekly bases from clients how to do it.
Would of preferred to use the watch list chart but instead used <ma-serial-chart> so that I can set the axis, but still not winning. Any help will be appreciated!<div flex="66" flex-xs="100" ng-if="designer.points | filter:{deviceName:'Reservoir'}:false | maFirst"> <ma-calc input="designer.points | filter:{deviceName:'Reservoir'}:false | maFirst" output="res1" on-change="myVar = $value"> </ma-calc> <ma-point-values point="res1" values="res1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"> </ma-point-values> <ma-calc input="designer.points | filter:{deviceName:'Reservoir 2'}:false | maFirst" output="res2" on-change="myVar = $value"> </ma-calc> <ma-point-values point="res2" values="res2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"> </ma-point-values> <ma-calc input="designer.points | filter:{deviceName:'Reservoir 3'}:false | maFirst" output="res3" on-change="myVar = $value"> </ma-calc> <ma-point-values point="res3" values="res3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"> </ma-point-values> <ma-serial-chart flex style="height: 300px; width: 100%" series-1-point="res1" series-1-values="res1Values" series-1-color="rgb(45,197,255)" series-1-type="line" series-1-axis="left" series-2-point="res2" series-2-values="res2Values" series-2-color="blue" series-2-type="line" series-2-axis="left" series-3-point="res3" series-3-values="res3Values" series-3-color="green" series-3-type="line" series-3-axis="left" legend=" true" balloon="true" options="{valueAxes:[{minimum:0, maximum:100}]}" default-balloon-text="[[title]]: [[value]]" export="true" stack-type="none"> </ma-serial-chart> </div>
-
Hi CraigWeb,
I suspect the answer is in this thread: https://forum.infiniteautomation.com/topic/2863/set-chart-minimum-and-maximum-axes-values-ignored/3
TLDR: Try turning off synchronizeGrid in the options, like,
options="{synchronizeGrid: false, valueAxes:[{ minimum:0, maximum:100,title:'Your axis title here'}]}"
-
Spot on thank you!