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>
