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;
}); // define
userModule.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>
ref: https://forum.infiniteautomation.com/topic/3503/how-to-chart-with-data-points-in-the-x-axis-instead-of-time
I wish you good luck in all.
Thomas
