My goal is to create a simple javaScript real time serial chart that gets its data using a mango automation data point.
I don't have any issues regarding the data point itself, but trying to link the chart to the data point is a real pain. There are two different kinds of tutorials that I have tried to use (\pointHierarchyExamples\realtimeSerialChart.shtm) and (\tutorials\dataPointChart.shtm).
Former example seemed a lot more practical because it gave a clear example of how to link a data point to a graph, but unfortunately even the example page itself didn't work, thus I couldn't use it. The latter example on the other hand did work, but it had a lot of stuff that I don't want (mostly time and data representation form related widgets) and seemed to be hard to remove and modify. At first I want to be able to create only the chart with no other widgets on the page. In addition I couldn't find any documentation
Below you'll find the problems I encountered and the code that I managed to create by modifying the second example. I also added my thoughts and questions in as comments.
The first problem is that while creating the chart MangoAPI is the one that creates the graph, so I don't have complete freedom in designing the chart (Fe. I can't change the theme).
Second problem is that I'm not able to have the chart appear when the page is loaded but only after a function is called.
Third problem is that I haven't been able to find almost any documentation or examples that have relevant mango classes/functions in it.
TL:DR I would like to find some good documentation about these Mango libraries. Any other help is welcome as well
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Add the Mango Favicon -->
<link rel="icon" href="/images/favicon.ico">
<!-- Base Library -->
<script type="text/javascript" src="/resources/loaderConfig.js"></script>
<script type="text/javascript" src="/resources/require.js"></script>
<script type="text/javascript" src="/resources/main.js"></script>
<script type="text/javascript">
var points = {}; //Map of xids to points where points['xid'] = point;
//Import needed libraries
require(['jquery', 'mango/api', 'mango/TimePresetPicker', 'mango/SerialChart',
'mango/PointValueDataProvider', 'mango/ProviderOptionsManager', 'jquery.notify'],
//Creating the main function
function($, MangoAPI, TimePresetPicker, SerialChart, PointValueDataProvider,
ProviderOptionsManager, point) {
//Setting up the chart
var chart = new SerialChart({
divId: 'Graafi',
amChart: {
theme: "light", //Doesn't do anything
chartScrollbar: {
enabled: true,
graph: 'DP_211607',
offset: 30,
oppositeAxis: false,
scrollbarHeight: 90
},
legend: {
align: 'center',
},
categoryAxis: {
minPeriod: 'ss'
}
}
});
//Creating the display on the page
chart.createDisplay();
// create a point value data provider
var dataProvider = new PointValueDataProvider(null, {
// convert point values to their specified unit
apiOptions: { converted: true }
});
// setup the time picker with its inputs
//The time picker requires all three elements even if I didn't want to. In addition, I couldn't find anything to help me customize it
var timePicker = new TimePresetPicker({
presetPicker: $('#presetPicker') //Uses a drop down menu, but I'd rather like fever options that each had their own buttons.
//fromPicker: $('#fromPicker'), these can be deleted like I did, but their element will still be on the screen for some reason. And it looks dumb.
//toPicker: $('#toPicker')
});
//The provider manager seems to be really rigid, because it requires timePicker or it won't work. In addition I couldn't find any documentation about how to use it
var providerManager = new ProviderOptionsManager({
errorFunction: MangoAPI.logError,
timePicker: timePicker
});
// link the chart to the data provider
dataProvider.addListener(chart);
// link the provider to the provider manager
providerManager.addProvider(dataProvider);
$('#presetPicker').on('change', function() {
// update the data provider
dataProvider.addDataPoint(point);// These two lines are the ones that make the graph show on the screen. I would like to be able to do these when the page is loaded, but for some reason they only work when the value of an element is changed
providerManager.refreshProviders();
});
function loadPoints() {
MangoAPI.defaultApi.queryPoints('limit(50)').then(function(results){ // I couldn't find any documentation about how to use this query function so I just copied the 'limit(50)' keyword and filtered out the one I wanted based on its XID
for (var i=0; i<results.items.length; i++) {
var point = results.items[i];
if (point.xid === 'DP_211607') {
points[point.xid] = point;
dataProvider.addDataPoint(point); //these two lines of code should update the chart and view it, but for some reason it gives this error "TypeError: this.amChart.validateData is not a function"
providerManager.refreshProviders();
break;
};
}
}).fail(MangoAPI.logError);
}
loadPoints();
});
</script>
</head>
<body>
<div id="data">
<header></header>
<div id="Graafi"></div>
<div class="input">
<select id="presetPicker" class="form-control"></select>
</div>
<footer></footer>
</div>
</body>
They have a great API reference as well as a lot of demos embedded.
http://YOUR_MANGO_HOST:PORT/mango-api-docs/index.shtm
https://help.infiniteautomation.com
You can bring your own code and objects. The Mango app is built on jetty and is pretty configurable. You have to source a point(virtual or real) register for updates(websocket or RESTful query) and then plug the value into the chart of your choice. You can embed your own libraries or draw using any HTML5 component. The interface is a cut and paste dream or a full-ended "roll your own" that supports jquery or angularjs<2.0 coding. It is a pretty phenomenal piece of software, IMHO.
Hope this helps.