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.
ma-serial-chart can not run
-
Hi all
I do not understand why I run the ma-serial-chart. I fix point-xid but I do not know where I write the wrong code. My graph doesn't show up.<div class="ma-designer-root" id="main-page" style="width: 1331px; height: 548px; position: relative;"> <ma-point-statistics point-xid="PJST-PVST7_Daily_yield" rendered=false rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics> <ma-point-statistics point-xid="PJST-PVST8_Daily_yield" rendered=false rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics> <ma-point-statistics point-xid="PJST-PVST9_Daily_yield" rendered=false rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics> <ma-serial-chart style="height: 300px; width: 100%" series-1-values='[{"value":statsObj1.maximum.value, "timestamp":"INV01"}]' series-2-values='[{"value":statsObj2.maximum.value, "timestamp":"INV02"}]' series-3-values='[{"value":statsObj3.maximum.value, "timestamp":"INV03"}]' default-type="column" options='{"categoryAxis":{"parseDates":false}}'></ma-serial> </div>OUTPUT :
I want :
-
Hi benaznbe,
I suspect you were inspired by this thread:
I'm not sure why it's not working for you. I changed only the XIDs in your code and my chart seemed to render fine. I don't think referencing the datebar's rollup in the ma-point-statistics does what you think (it doesn't do anything, rollups are statistics, and so the statistic directive is doing all rollups over a period. see the documentation inside the Mango UI at /ui/docs/ng-mango/ma-point-statistics)
-
Hi @phildunlap
Can I help me.If you look at the code, what I show is 18 bars. But the results show it 10 bars.I want to show 18 bars in one graph. series-X-values x have a value of 1-10.But if I use more than 10, how do I do it?<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> <md-input-container flex=""> <label>To date</label> <ma-date-picker format="DD-MM-YYYY" mode="both" ng-model="to"></ma-date-picker> </md-input-container> </div> <ma-get-point-value point-xid="INV01.DailyEnergy" point="point1"></ma-get-point-value> <ma-point-statistics point="point1" to="to" from="from" statistics="statsObj1"></ma-point-statistics> <ma-get-point-value point-xid="INV02.DailyEnergy" point="point2"></ma-get-point-value> <ma-point-statistics point="point2" to="to" from="from" statistics="statsObj2"></ma-point-statistics> <ma-get-point-value point-xid="INV03.DailyEnergy" point="point3"></ma-get-point-value> <ma-point-statistics point="point3" to="to" from="from" statistics="statsObj3"></ma-point-statistics> <ma-get-point-value point-xid="INV04.DailyEnergy" point="point4"></ma-get-point-value> <ma-point-statistics point="point4" to="to" from="from" statistics="statsObj4"></ma-point-statistics> <ma-get-point-value point-xid="INV05.DailyEnergy" point="point5"></ma-get-point-value> <ma-point-statistics point="point5" to="to" from="from" statistics="statsObj5"></ma-point-statistics> <ma-get-point-value point-xid="INV06.DailyEnergy" point="point6"></ma-get-point-value> <ma-point-statistics point="point6" to="to" from="from" statistics="statsObj6"></ma-point-statistics> <ma-get-point-value point-xid="INV07.DailyEnergy" point="point7"></ma-get-point-value> <ma-point-statistics point="point7" to="to" from="from" statistics="statsObj7"></ma-point-statistics> <ma-get-point-value point-xid="INV08.DailyEnergy" point="point8"></ma-get-point-value> <ma-point-statistics point="point8" to="to" from="from" statistics="statsObj8"></ma-point-statistics> <ma-get-point-value point-xid="INV09.DailyEnergy" point="point9"></ma-get-point-value> <ma-point-statistics point="point9" to="to" from="from" statistics="statsObj9"></ma-point-statistics> <ma-get-point-value point-xid="INV10.DailyEnergy" point="point10"></ma-get-point-value> <ma-point-statistics point="point10" to="to" from="from" statistics="statsObj10"></ma-point-statistics> <ma-get-point-value point-xid="INV11.DailyEnergy" point="point11"></ma-get-point-value> <ma-point-statistics point="point11" to="to" from="from" statistics="statsObj11"></ma-point-statistics> <ma-get-point-value point-xid="INV12.DailyEnergy" point="point12"></ma-get-point-value> <ma-point-statistics point="point12" to="to" from="from" statistics="statsObj12"></ma-point-statistics> <ma-get-point-value point-xid="INV13.DailyEnergy" point="point13"></ma-get-point-value> <ma-point-statistics point="point13" to="to" from="from" statistics="statsObj13"></ma-point-statistics> <ma-get-point-value point-xid="INV14.DailyEnergy" point="point14"></ma-get-point-value> <ma-point-statistics point="point14" to="to" from="from" statistics="statsObj14"></ma-point-statistics> <ma-get-point-value point-xid="INV15.DailyEnergy" point="point15"></ma-get-point-value> <ma-point-statistics point="point15" to="to" from="from" statistics="statsObj15"></ma-point-statistics> <ma-get-point-value point-xid="INV16.DailyEnergy" point="point16"></ma-get-point-value> <ma-point-statistics point="point16" to="to" from="from" statistics="statsObj16"></ma-point-statistics> <ma-get-point-value point-xid="INV17.DailyEnergy" point="point17"></ma-get-point-value> <ma-point-statistics point="point17" to="to" from="from" statistics="statsObj17"></ma-point-statistics> <ma-get-point-value point-xid="INV18.DailyEnergy" point="point18"></ma-get-point-value> <ma-point-statistics point="point18" to="to" from="from" statistics="statsObj18"></ma-point-statistics> <ma-serial-chart style="height: 240px; width: 100%" series-1-values='[{"value":statsObj1.last.value, "timestamp":point1.deviceName}]' series-2-values='[{"value":statsObj2.last.value, "timestamp":point2.deviceName}]' series-3-values='[{"value":statsObj3.last.value, "timestamp":point3.deviceName}]' series-4-values='[{"value":statsObj4.last.value, "timestamp":point4.deviceName}]' series-5-values='[{"value":statsObj5.last.value, "timestamp":point5.deviceName}]' series-6-values='[{"value":statsObj6.last.value, "timestamp":point6.deviceName}]' series-7-values='[{"value":statsObj7.last.value, "timestamp":point7.deviceName}]' series-8-values='[{"value":statsObj8.last.value, "timestamp":point8.deviceName}]' series-9-values='[{"value":statsObj9.last.value, "timestamp":point9.deviceName}]' series-10-values='[{"value":statsObj10.last.value, "timestamp":point10.deviceName}]' series-11-values='[{"value":statsObj11.last.value, "timestamp":point11.deviceName}]' series-12-values='[{"value":statsObj12.last.value, "timestamp":point12.deviceName}]' series-13-values='[{"value":statsObj13.last.value, "timestamp":point13.deviceName}]' series-14-values='[{"value":statsObj14.last.value, "timestamp":point14.deviceName}]' series-15-values='[{"value":statsObj15.last.value, "timestamp":point15.deviceName}]' series-16-values='[{"value":statsObj16.last.value, "timestamp":point16.deviceName}]' series-17-values='[{"value":statsObj17.last.value, "timestamp":point17.deviceName}]' series-18-values='[{"value":statsObj18.last.value, "timestamp":point18.deviceName}]' default-type="column" options='{"categoryAxis":{"parseDates":false}}'> </ma-serial> </md-whiteframe>Output:
-
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; chart.validateData(); }, true); }] }); return userModule; }); // defineuserModule.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; chart.validateData(); }, 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.
<ma-get-point-value>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> <md-input-container flex=""> <label>To date</label> <ma-date-picker format="DD-MM-YYYY" mode="both" ng-model="to"></ma-date-picker> </md-input-container> </div> <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'}]"> </category-x-axis> </md-whiteframe>I wish you good luck in all.
Thomas
-
@thomas-einasto136 Thankyou Thomas
-
Awesome reply, thanks @Thomas-Einasto136
-
@Thomas-Einasto136 Now 1 x axis has 18 data, if I want 18 axes, 18 data. The ma-chart has only 4 x axes. How can I edit in my module.js?
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; chart.validateData(); }, true); }] }); return userModule; }); // define<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'}]"> </category-x-axis>output i want:
-
Hi @benaznbe
I will quote me once more.
@thomas-einasto136 said in ma-serial-chart can not run:
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/Snippet from previous code
"valueAxes": [{ "axisAlpha": 0, "position": "left", "title": "Level" }],Documentation for customizing amcharts regarding your request.
https://www.amcharts.com/demos/multiple-value-axes/
Snippet from this documentation link regarding valueaxes.
"valueAxes": [{ "id":"v1", "axisColor": "#FF6600", "axisThickness": 2, "axisAlpha": 1, "position": "left" }, { "id":"v2", "axisColor": "#FCD202", "axisThickness": 2, "axisAlpha": 1, "position": "right" }, { "id":"v3", "axisColor": "#B0DE09", "axisThickness": 2, "gridAlpha": 0, "offset": 50, "axisAlpha": 1, "position": "left" }],For all customizations of a single axis ref here
http://docs.amcharts.com/javascriptcharts/ValueAxis
I would strongly advise to look through all amCharts documentation again and see Mango own examples section of its components...
Cheers!
Thomas
