graph.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <html>
  2. <head>
  3. <script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
  4. <script type="text/javascript" src="./gethost.js"></script>
  5. <script type="text/javascript" src="./readconfigcommon.js"></script>
  6. <script type="text/javascript" src="./readconfigparam.js"></script>
  7. <style>
  8. textarea {
  9. width: 600px;
  10. height: 300px;
  11. }
  12. </style>
  13. <script>
  14. function run() {
  15. var el = document.getElementById('cnsl');
  16. el && eval(el.value);
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <div id='chart'></div>
  22. <select id="datafiles" onchange="run();"></select>
  23. <select id="numbers" onchange="run();"></select>
  24. <select id="datatype" onchange="run();">
  25. <option value="3">Value</option>
  26. <option value="4">PreValue</option>
  27. <option value="5">Change-Rate</option>
  28. <option value="6">Change-Absolut</option>
  29. </select>
  30. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=fileserver/log/data/>Download</a>
  31. <!-- <button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button> -->
  32. <div id='editor' hidden='true'>
  33. <textarea id="cnsl">
  34. datefile = document.getElementById("datafiles").value;
  35. numbername = document.getElementById("numbers").value;
  36. datatype = document.getElementById("datatype").value;
  37. //alert("Auslesen: " + datefile + " " + numbername);
  38. _basepath = getbasepath();
  39. fetch(_basepath + '/fileserver/log/data/' + datefile)
  40. .then(response => {
  41. // handle the response
  42. if (response.status == 404) {
  43. alert("no log data available for "+dateString);
  44. }
  45. response.text()
  46. .then( result => {
  47. var lines = result.split("\n");
  48. var trace = {
  49. x: [],
  50. y: [],
  51. type: 'scatter'
  52. };
  53. var timex = 1;
  54. for (let line of lines) {
  55. {
  56. console.log(line);
  57. if (line.split(",")[1] == numbername)
  58. {
  59. var value = line.split(",")[datatype];
  60. var time = line.split(",")[0];
  61. console.log("> "+time+" "+value+"\n");
  62. trace.x.push(time);
  63. // timex += 1;
  64. trace.y.push(value);
  65. }
  66. }
  67. }
  68. console.log(trace);
  69. var data = [trace];
  70. Plotly.newPlot('chart', data);
  71. });
  72. }).catch((error) => {
  73. // handle the error
  74. console.log(error);
  75. alert("test");
  76. });
  77. </textarea><br />
  78. <button onclick="run();">run</button>
  79. </div>
  80. <script>
  81. function WriteModelFiles()
  82. {
  83. list_data = getDATAList();
  84. var _indexDig = document.getElementById("datafiles");
  85. while (_indexDig.length)
  86. _indexDig.remove(0);
  87. for (var i = list_data.length - 1; i >= 0; --i)
  88. {
  89. var optionDig = document.createElement("option");
  90. var text = list_data[i];
  91. optionDig.text = text;
  92. optionDig.value = list_data[i];
  93. _indexDig.add(optionDig);
  94. }
  95. }
  96. function WriteNumbers()
  97. {
  98. list_data = getNUMBERSList();
  99. var _indexDig = document.getElementById("numbers");
  100. while (_indexDig.length)
  101. _indexDig.remove(0);
  102. for (var i = 0; i < list_data.length; ++i)
  103. {
  104. var optionDig = document.createElement("option");
  105. var text = list_data[i];
  106. optionDig.text = text;
  107. optionDig.value = list_data[i];
  108. _indexDig.add(optionDig);
  109. }
  110. }
  111. WriteModelFiles();
  112. WriteNumbers();
  113. run();
  114. </script>
  115. </body>
  116. </html>