my goal create simple javascript real time serial chart gets data using mango automation data point.
i don't have issues regarding data point itself, trying link chart data point real pain. there 2 different kinds of tutorials have tried use (\pointhierarchyexamples\realtimeserialchart.shtm) , (\tutorials\datapointchart.shtm).
former example seemed lot more practical because gave clear example of how link data point graph, unfortunately example page didn't work, couldn't use it. latter example on other hand did work, had lot of stuff don't want (mostly time , data representation form related widgets) , seemed hard remove , modify. @ first want able create chart no other widgets on page. in addition couldn't find documentation
below you'll find problems encountered , code managed create modifying second example. added thoughts , questions in comments.
the first problem while creating chart mangoapi 1 creates graph, don't have complete freedom in designing chart (fe. can't change theme).
second problem i'm not able have chart appear when page loaded after function called.
third problem haven't been able find documentation or examples have relevant mango classes/functions in it.
tl:dr find documentation these mango libraries. other welcome well
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- add 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 points points['xid'] = point; //import needed libraries require(['jquery', 'mango/api', 'mango/timepresetpicker', 'mango/serialchart', 'mango/pointvaluedataprovider', 'mango/provideroptionsmanager', 'jquery.notify'], //creating main function function($, mangoapi, timepresetpicker, serialchart, pointvaluedataprovider, provideroptionsmanager, point) { //setting chart var chart = new serialchart({ divid: 'graafi', amchart: { theme: "light", //doesn't chartscrollbar: { enabled: true, graph: 'dp_211607', offset: 30, oppositeaxis: false, scrollbarheight: 90 }, legend: { align: 'center', }, categoryaxis: { minperiod: 'ss' } } }); //creating display on page chart.createdisplay(); // create point value data provider var dataprovider = new pointvaluedataprovider(null, { // convert point values specified unit apioptions: { converted: true } }); // setup time picker inputs //the time picker requires 3 elements if didn't want to. in addition, couldn't find me customize var timepicker = new timepresetpicker({ presetpicker: $('#presetpicker') //uses drop down menu, i'd rather fever options each had own buttons. //frompicker: $('#frompicker'), these can deleted did, element still on screen reason. , looks dumb. //topicker: $('#topicker') }); //the provider manager seems rigid, because requires timepicker or won't work. in addition couldn't find documentation how use var providermanager = new provideroptionsmanager({ errorfunction: mangoapi.logerror, timepicker: timepicker }); // link chart data provider dataprovider.addlistener(chart); // link provider provider manager providermanager.addprovider(dataprovider); $('#presetpicker').on('change', function() { // update data provider dataprovider.adddatapoint(point);// these 2 lines ones make graph show on screen. able these when page loaded, reason work when value of element changed providermanager.refreshproviders(); }); function loadpoints() { mangoapi.defaultapi.querypoints('limit(50)').then(function(results){ // couldn't find documentation how use query function copied 'limit(50)' keyword , filtered out 1 wanted based on xid (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 2 lines of code should update chart , view it, reason gives error "typeerror: this.amchart.validatedata not 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 great api reference lot of demos embedded.
http://your_mango_host:port/mango-api-docs/index.shtm
https://help.infiniteautomation.com
you can bring own code , objects. mango app built on jetty , pretty configurable. have source point(virtual or real) register updates(websocket or restful query) , plug value chart of choice. can embed own libraries or draw using html5 component. interface cut , paste dream or full-ended "roll own" supports jquery or angularjs<2.0 coding. pretty phenomenal piece of software, imho.
hope helps.
Comments
Post a Comment