You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
4.6 KiB

9 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <style type="text/css">
  8. ${demo.css}
  9. </style>
  10. <script type="text/javascript">
  11. // Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
  12. $(function () {
  13. $('#container').highcharts({
  14. chart: {
  15. type: 'spline'
  16. },
  17. title: {
  18. text: 'Wind speed during two days'
  19. },
  20. subtitle: {
  21. text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
  22. },
  23. xAxis: {
  24. type: 'datetime',
  25. labels: {
  26. overflow: 'justify'
  27. }
  28. },
  29. yAxis: {
  30. title: {
  31. text: 'Wind speed (m/s)'
  32. },
  33. min: 0,
  34. minorGridLineWidth: 0,
  35. gridLineWidth: 0,
  36. alternateGridColor: null,
  37. plotBands: [{ // Light air
  38. from: 0.3,
  39. to: 1.5,
  40. color: 'rgba(68, 170, 213, 0.1)',
  41. label: {
  42. text: 'Light air',
  43. style: {
  44. color: '#606060'
  45. }
  46. }
  47. }, { // Light breeze
  48. from: 1.5,
  49. to: 3.3,
  50. color: 'rgba(0, 0, 0, 0)',
  51. label: {
  52. text: 'Light breeze',
  53. style: {
  54. color: '#606060'
  55. }
  56. }
  57. }, { // Gentle breeze
  58. from: 3.3,
  59. to: 5.5,
  60. color: 'rgba(68, 170, 213, 0.1)',
  61. label: {
  62. text: 'Gentle breeze',
  63. style: {
  64. color: '#606060'
  65. }
  66. }
  67. }, { // Moderate breeze
  68. from: 5.5,
  69. to: 8,
  70. color: 'rgba(0, 0, 0, 0)',
  71. label: {
  72. text: 'Moderate breeze',
  73. style: {
  74. color: '#606060'
  75. }
  76. }
  77. }, { // Fresh breeze
  78. from: 8,
  79. to: 11,
  80. color: 'rgba(68, 170, 213, 0.1)',
  81. label: {
  82. text: 'Fresh breeze',
  83. style: {
  84. color: '#606060'
  85. }
  86. }
  87. }, { // Strong breeze
  88. from: 11,
  89. to: 14,
  90. color: 'rgba(0, 0, 0, 0)',
  91. label: {
  92. text: 'Strong breeze',
  93. style: {
  94. color: '#606060'
  95. }
  96. }
  97. }, { // High wind
  98. from: 14,
  99. to: 15,
  100. color: 'rgba(68, 170, 213, 0.1)',
  101. label: {
  102. text: 'High wind',
  103. style: {
  104. color: '#606060'
  105. }
  106. }
  107. }]
  108. },
  109. tooltip: {
  110. valueSuffix: ' m/s'
  111. },
  112. plotOptions: {
  113. spline: {
  114. lineWidth: 4,
  115. states: {
  116. hover: {
  117. lineWidth: 5
  118. }
  119. },
  120. marker: {
  121. enabled: false
  122. },
  123. pointInterval: 3600000, // one hour
  124. pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
  125. }
  126. },
  127. series: [{
  128. name: 'Hestavollane',
  129. data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
  130. }, {
  131. name: 'Vik',
  132. data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
  133. }],
  134. navigation: {
  135. menuItemStyle: {
  136. fontSize: '10px'
  137. }
  138. }
  139. });
  140. });
  141. </script>
  142. </head>
  143. <body>
  144. <script src="../../js/highcharts.js"></script>
  145. <script src="../../js/modules/exporting.js"></script>
  146. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  147. </body>
  148. </html>