demo2.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
  3. <html lang="en">
  4. <head>
  5. <title>Netdata Dashboard</title>
  6. <meta name="application-name" content="netdata">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta charset="utf-8">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  13. <meta name="author" content="costa@tsaousis.gr">
  14. <meta property="og:locale" content="en_US" />
  15. <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
  16. <meta property="og:url" content="http://my-netdata.io/"/>
  17. <meta property="og:type" content="website"/>
  18. <meta property="og:site_name" content="netdata"/>
  19. <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  20. <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  21. </head>
  22. <script>var netdataTheme = 'slate';</script>
  23. <script type="text/javascript" src="http://my-netdata.io/dashboard.js?v20190902-0"></script>
  24. <body>
  25. <div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
  26. <div style="font-size: 7vw;">why netdata?</div>
  27. <br/>
  28. <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
  29. <!-- Nav tabs -->
  30. <ul class="nav nav-tabs" role="tablist">
  31. <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
  32. <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
  33. </ul>
  34. <!-- Tab panes -->
  35. <div class="tab-content">
  36. <div role="tabpanel" class="tab-pane active" id="gauge">
  37. <div style="display: inline-block; width: 35.8%">
  38. <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
  39. <br/>
  40. <div data-netdata="example.random2"
  41. data-dimensions="random"
  42. data-chart-library="gauge"
  43. data-gauge-max-value="32767"
  44. data-width="100%"
  45. data-after="-600"
  46. data-points="600"
  47. data-title="1/second (netdata&nbsp;default)"
  48. data-units="important metric"
  49. data-colors="#5A5"
  50. ></div>
  51. </div>
  52. <div style="display: inline-block; width: 50%">
  53. <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
  54. <div data-netdata="example.random2"
  55. data-dimensions="random"
  56. data-chart-library="gauge"
  57. data-gauge-max-value="32767"
  58. data-width="45%"
  59. data-after="-600"
  60. data-points="60"
  61. data-title="Updates Every 10&nbsp;Sec"
  62. data-units="important metric"
  63. data-colors="#C55"
  64. ></div>
  65. <div data-netdata="example.random2"
  66. data-dimensions="random"
  67. data-chart-library="gauge"
  68. data-gauge-max-value="32767"
  69. data-width="45%"
  70. data-after="-600"
  71. data-points="2"
  72. data-title="Updates Every 5&nbsp;Mins"
  73. data-units="important metric"
  74. data-colors="#C55"
  75. ></div>
  76. </div>
  77. </div>
  78. <div role="tabpanel" class="tab-pane" id="easypiechart">
  79. <div style="display: inline-block; width: 25%">
  80. <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
  81. <br/>
  82. <div data-netdata="example.random2"
  83. data-dimensions="random"
  84. data-chart-library="easypiechart"
  85. data-easypiechart-max-value="32767"
  86. data-width="100%"
  87. data-after="-600"
  88. data-points="600"
  89. data-title="1/second (netdata&nbsp;default)"
  90. data-units="important metric"
  91. data-colors="#5A5"
  92. ></div>
  93. </div>
  94. <div style="display: inline-block; width: 40%">
  95. <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
  96. <div data-netdata="example.random2"
  97. data-dimensions="random"
  98. data-chart-library="easypiechart"
  99. data-easypiechart-max-value="32767"
  100. data-width="45%"
  101. data-after="-600"
  102. data-points="60"
  103. data-title="Updates Every 10&nbsp;Sec"
  104. data-units="important metric"
  105. data-colors="#C55"
  106. ></div>
  107. <div data-netdata="example.random2"
  108. data-dimensions="random"
  109. data-chart-library="easypiechart"
  110. data-easypiechart-max-value="32767"
  111. data-width="45%"
  112. data-after="-600"
  113. data-points="2"
  114. data-title="Updates Every 5&nbsp;Mins"
  115. data-units="important metric"
  116. data-colors="#C55"
  117. ></div>
  118. </div>
  119. </div>
  120. </div>
  121. <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
  122. <div data-netdata="example.random2"
  123. data-dimensions="random"
  124. data-dygraph-theme="sparkline"
  125. data-width="100%"
  126. data-height="20vh"
  127. data-after="-600"
  128. data-points="600"
  129. data-title="1/second (netdata&nbsp;default)"
  130. data-units="something"
  131. data-colors="#888"
  132. ></div>
  133. </div>
  134. </body>
  135. </html>