Advertisement
Guest User

Untitled

a guest
Jan 21st, 2016
90
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.43 KB | None
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>NitraattiTyppi</title>
  6. <style>
  7. #data{
  8. width:60%;
  9. margin: 0 auto;
  10. }
  11.  
  12. #Graafi {
  13. height: 600px;
  14. background-color: #FFFFFF;
  15. border: 2px outset black;
  16. padding: 50px;
  17. background-color: rgba(255,255,255, 0.8);
  18. }
  19. </style>
  20.  
  21. <!-- JQuery -->
  22. <script type="text/javascript" src="/resources/jquery/jquery-1.11.2.js"></script>
  23.  
  24. <link href="/resources/jquery-ui/jquery.datetimepicker.css" rel="stylesheet">
  25.  
  26. <script type="text/javascript" src="/resources/jquery-ui/jquery.datetimepicker.js"></script>
  27. <!-- Charting Library -->
  28. <script type="text/javascript" src="/resources/amcharts/amcharts.js"></script>
  29. <script type="text/javascript" src="/resources/amcharts/serial.js"></script>
  30. <script type="text/javascript" src="/resources/amcharts/gauge.js"></script>
  31.  
  32. <!-- Mango Rest API Helper -->
  33. <script type="text/javascript" src="/mango-javascript/mango/v1/mangoApi.js"></script>
  34.  
  35. <!-- Mango Templating API -->
  36. <!-- Display Widgets -->
  37. <script type="text/javascript" src="/mango-javascript/mango/v1/serialChart.js"></script>
  38. <script type="text/javascript" src="/mango-javascript/mango/v1/barChart.js"></script>
  39. <script type="text/javascript" src="/mango-javascript/mango/v1/statisticsBarChart.js"></script>
  40. <script type="text/javascript" src="/mango-javascript/mango/v1/pieChart.js"></script>
  41. <script type="text/javascript" src="/mango-javascript/mango/v1/statistics.js"></script>
  42. <script type="text/javascript" src="/mango-javascript/mango/v1/gaugeChart.js"></script>
  43.  
  44. <!-- Data Providers -->
  45. <script type="text/javascript" src="/resources/extend.js"></script>
  46. <script type="text/javascript" src="/mango-javascript/mango/v1/dataProvider.js"></script>
  47. <script type="text/javascript" src="/mango-javascript/mango/v1/pointValueDataProvider.js"></script>
  48. <script type="text/javascript" src="/mango-javascript/mango/v1/realtimePointValueDataProvider.js"></script>
  49. <script type="text/javascript" src="/mango-javascript/mango/v1/statisticsDataProvider.js"></script>
  50. <!-- Input Widgets -->
  51. <script type="text/javascript" src="/mango-javascript/mango/v1/dateTimePicker.js"></script>
  52. <script type="text/javascript" src="/mango-javascript/mango/v1/rollupPicker.js"></script>
  53. <script type="text/javascript" src="/mango-javascript/mango/v1/timePeriodTypePicker.js"></script>
  54. <script type="text/javascript" src="/mango-javascript/mango/v1/input.js"></script>
  55. <script type="text/javascript" src="/mango-javascript/mango/v1/select.js"></script>
  56. <script type="text/javascript" src="/mango-javascript/mango/v1/listView.js"></script>
  57. <!-- Templater Core -->
  58. <script type="text/javascript" src="/mango-javascript/mango/v1/dataDisplayManager.js"></script>
  59. <script type="text/javascript" src="/mango-javascript/mango/v1/dataPointMatcher.js"></script>
  60. <script type="text/javascript" src="/mango-javascript/mango/v1/dataPointGroup.js"></script>
  61. <script type="text/javascript" src="/mango-javascript/mango/v1/pointHierarchyGrouper.js"></script>
  62. <script type="text/javascript" src="/mango-javascript/mango/v1/dashboardTemplater.js"></script>
  63.  
  64.  
  65.  
  66. <script type="text/javascript">
  67.  
  68. var templater;
  69.  
  70. $( document ).ready(function(){
  71.  
  72. var displayConfigurations = new Array();
  73. var chart = new SerialChartConfiguration(
  74. 'Graafi',
  75. [1],
  76. {
  77. titles: [{
  78. id: "Title-1",
  79. size: 15,
  80. text: "NitraattiTyppi"
  81. }],
  82. type: "serial",
  83. categoryField: "timestamp",
  84. dataDateFormat: "YYYY-MM-DD HH",
  85. theme: "light",
  86. categoryAxis: {
  87. minPeriod: "hh",
  88. parseDates: true
  89. },
  90. chartCursor: {
  91. enabled: true,
  92. balloonPointerOrientation: " vertical",
  93. categoryBalloonDateFormat: "JJ:NN"
  94. },
  95. chartScrollbar: {
  96. enabled: true,
  97. graph: "g1",
  98. offset: 30,
  99. oppositeAxis: false,
  100. scrollbarHeight: 90
  101. },
  102. graphs: [{
  103. bullet: "round",
  104. id: "g1",
  105. title: "ug/l",
  106. valueField: "NitraattiTyppi"
  107. }],
  108. valueAxes: [{
  109. id: "a1",
  110. title: "ug/l"
  111. }]
  112. },{
  113. },{
  114. });
  115.  
  116. displayConfigurations.push(chart);
  117.  
  118. var dataProviders = new Array();
  119.  
  120. var pointConfigurations = new Array();
  121. pointConfigurations.push(new DataPointMatchConfiguration(1, [{matchAttribute: 'xid', regex: /NitraattiTyppi/}], {providerType: 'RealtimePointValue'}));
  122.  
  123. var group = new DataPointGroupConfiguration({
  124. groupBy: 'Folder',
  125. labelAttribute: 'name',
  126. matchConfigurations: [{
  127. matchAttribute: 'path',
  128. regex: /Target Folder/
  129. }]
  130. });
  131.  
  132. var groupConfigurations = new Array();
  133. groupConfigurations.push(group);
  134.  
  135. var groupListView = new ListViewConfiguration('groupsList', {}, {styleClass: "ui-btn"});
  136.  
  137. var templaterConfig = {
  138. debug: true,
  139. type: 'PointHierarchy',
  140. displayConfigurations: displayConfigurations,
  141. pointConfigurations: pointConfigurations,
  142. groupConfigurations: groupConfigurations,
  143. dataProviders: dataProviders,
  144. groupSelectConfiguration: groupListView,
  145. }
  146. templater = new DashboardTemplater(templaterConfig);
  147. });
  148. </script>
  149.  
  150. </head>
  151. <body>
  152. <div id="data">
  153. <header></header>
  154. <div id="Graafi"></div>
  155. <footer></footer>
  156. </div>
  157. </body>
  158.  
  159. </html>
Advertisement
RAW Paste Data Copied
Advertisement