API tools faq
paste
Advertisement
7sat

example index.html

7sat
Feb 5th, 2022 (edited)
27
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
  7. <title>DynamicShop-Graph</title>
  8.  
  9. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  10. <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" type="text/css"
  11. rel="stylesheet" media="screen,projection" />
  12. <style>
  13. body {
  14. display: flex;
  15. min-height: 100vh;
  16. flex-direction: column;
  17. }
  18.  
  19. main {
  20. flex: 1 0 auto;
  21. }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26.  
  27. <header>
  28.  
  29. <nav class="light-blue lighten-1" role="navigation">
  30. <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">슈퍼라쿤서버 아이템 차트</a>
  31. </div>
  32. </nav>
  33.  
  34. </header>
  35.  
  36. <main>
  37.  
  38. <div class="section no-pad-bot" id="index-banner">
  39. <div class="container">
  40. <div class="row center">
  41. <div class="input-field">
  42.  
  43. <select id="data-select">
  44. <option value="" selected>아이템을 선택하세요</option>
  45. </select>
  46.  
  47. </div>
  48. </div>
  49. <br>
  50. </div>
  51. </div>
  52.  
  53. <div class="container">
  54. <div class="graphSection">
  55.  
  56. <div id="graphContainer"></div>
  57.  
  58. </div>
  59. </div>
  60.  
  61. </main>
  62.  
  63. <footer class="page-footer blue">
  64.  
  65. <div class="container">
  66. <div class="row">
  67. <div class="col l6 s12">
  68. <p class="grey-text text-lighten-4">DynamicShop-Graph v0.2.4-custom</p>
  69. </div>
  70. <div class="col l4 offset-l2 s12">
  71. <ul>
  72. <li><a class="grey-text text-lighten-3" href="https://github.com/jmanpenilla/DynamicShop-Graph">GitHub</a>
  73. </li>
  74. <li><a class="grey-text text-lighten-3" href="https://www.spigotmc.org/resources/dynamicshop-graph.80638/">Spigot</a></li>
  75. </ul>
  76. </div>
  77. </div>
  78. </div>
  79.  
  80. <div class="footer-copyright">
  81. <div class="container">
  82. Made using <a class="blue-text text-lighten-3" href="http://materializecss.com">Materialize</a>
  83. </div>
  84. </div>
  85.  
  86. </footer>
  87.  
  88.  
  89. <!-- Scripts-->
  90. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  91. <script src="https://code.highcharts.com/stock/highstock.js"></script>
  92. <script src="https://code.highcharts.com/stock/modules/data.js"></script>
  93. <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
  94. <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
  95. <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  96. <script language="JavaScript">
  97. const urlParams = new URLSearchParams(window.location.search);
  98. const dataFile = urlParams.get('data');
  99.  
  100. $(document).ready(function () {
  101.  
  102. $('select').formSelect();
  103. $.get('data/availableData.json', function (a) {
  104. for (var i = 0; i < a.length; i++) {
  105. var newValue = ["?data=" + a[i]];
  106. var $newOpt = $("<option>").attr("value", newValue).text(a[i]);
  107. $("#data-select").append($newOpt);
  108. }
  109. $('select').formSelect();
  110. });
  111.  
  112. $('#data-select').bind('change', function () {
  113. var url = $(this).val();
  114. window.location = url;
  115. return false;
  116. });
  117.  
  118. function createChart() {
  119.  
  120. Highcharts.setOptions({
  121. colors: ['#dd2c00', '#00ff40', '#005eff'],
  122. lang: {
  123. months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
  124. weekdays: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
  125. shortMonths: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  126. },
  127. numericSymbolMagnitude: 10000
  128. });
  129.  
  130. var gHeight = window.innerHeight - $('header').height() - $('footer').height() - 200;
  131. if (gHeight < 400) {
  132. gHeight = 400;
  133. }
  134.  
  135. chartOptions = {
  136. chart: {
  137. renderTo: 'graphContainer',
  138. height: gHeight,
  139. },
  140.  
  141. rangeSelector: {
  142. allButtonsEnabled: true,
  143. buttons: [{
  144. type: 'day',
  145. count: 1,
  146. text: '오늘',
  147. dataGrouping: {
  148. forced: false,
  149. units: [
  150. ['minute', [5]]
  151. ]
  152. }
  153. }, {
  154. type: 'week',
  155. count: 1,
  156. text: '이번주',
  157. dataGrouping: {
  158. forced: true,
  159. units: [
  160. ['hour', [1]]
  161. ]
  162. }
  163. }, {
  164. type: 'all',
  165. text: '전체',
  166. dataGrouping: {
  167. forced: true,
  168. units: [
  169. ['hour', [1]]
  170. ]
  171. }
  172. }],
  173. buttonTheme: {
  174. width: 60
  175. },
  176. selected: 1
  177. },
  178.  
  179. title: {
  180. text: dataFile
  181. },
  182.  
  183. data: {
  184. csvURL: window.location.origin + '/data/' + dataFile + '.csv',
  185. enablePolling: true,
  186. dataRefreshRate: 10
  187. },
  188.  
  189. yAxis: [{
  190. opposite: false,
  191. labels: {
  192. enabled: false
  193. }
  194. }, {
  195. opposite: false,
  196. labels: {
  197. enabled: true,
  198. format: '{value}개'
  199. }
  200. }, {
  201. opposite: false,
  202. labels: {
  203. enabled: true,
  204. format: '{value}원'
  205. }
  206. }],
  207.  
  208. legend: {
  209. enabled: true
  210. },
  211.  
  212. xAxis: {
  213. ordinal: false,
  214. followPointer: false,
  215. type: "datetime",
  216.  
  217. showLastLabel: true,
  218. tickWidth: 1,
  219. labels: {
  220. enabled: true
  221. }
  222. },
  223.  
  224. plotOptions: {
  225. series: {
  226. showInNavigator: true,
  227. events: {
  228. legendItemClick: function () {
  229. let series = this.chart.series,
  230. i = series.length,
  231. otherSeries;
  232. while (i--) {
  233. otherSeries = series[i]
  234. if (otherSeries != this && otherSeries.visible) {
  235. otherSeries.hide();
  236. }
  237. }
  238. }
  239. }
  240. },
  241. },
  242.  
  243. tooltip: {
  244. pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
  245. valueDecimals: 2,
  246. split: true
  247. },
  248.  
  249. series: [{
  250. yAxis: 0,
  251. visible: false,
  252. showInLegend: false
  253. }, {
  254. yAxis: 1,
  255. visible: false
  256. }, {
  257. yAxis: 2
  258. }]
  259. }
  260.  
  261. chart = new Highcharts.stockChart(chartOptions);
  262. }
  263.  
  264. createChart();
  265.  
  266. })
  267. </script>
  268.  
  269. </body>
  270.  
  271. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!