index.htm 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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. <script type="text/javascript">
  8. $(function () {
  9. $('#container').highcharts({
  10. chart: {
  11. type: 'spline'
  12. },
  13. title: {
  14. text: 'Snow depth at Vikjafjellet, Norway'
  15. },
  16. subtitle: {
  17. text: 'Irregular time data in Highcharts JS'
  18. },
  19. xAxis: {
  20. type: 'datetime',
  21. dateTimeLabelFormats: { // don't display the dummy year
  22. month: '%e. %b',
  23. year: '%b'
  24. }
  25. },
  26. yAxis: {
  27. title: {
  28. text: 'Snow depth (m)'
  29. },
  30. min: 0
  31. },
  32. tooltip: {
  33. formatter: function() {
  34. return '<b>'+ this.series.name +'</b><br/>'+
  35. Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
  36. }
  37. },
  38. series: [{
  39. name: 'Winter 2007-2008',
  40. // Define the data points. All series have a dummy year
  41. // of 1970/71 in order to be compared on the same x axis. Note
  42. // that in JavaScript, months start at 0 for January, 1 for February etc.
  43. data: [
  44. [Date.UTC(1970, 9, 27), 0 ],
  45. [Date.UTC(1970, 10, 10), 0.6 ],
  46. [Date.UTC(1970, 10, 18), 0.7 ],
  47. [Date.UTC(1970, 11, 2), 0.8 ],
  48. [Date.UTC(1970, 11, 9), 0.6 ],
  49. [Date.UTC(1970, 11, 16), 0.6 ],
  50. [Date.UTC(1970, 11, 28), 0.67],
  51. [Date.UTC(1971, 0, 1), 0.81],
  52. [Date.UTC(1971, 0, 8), 0.78],
  53. [Date.UTC(1971, 0, 12), 0.98],
  54. [Date.UTC(1971, 0, 27), 1.84],
  55. [Date.UTC(1971, 1, 10), 1.80],
  56. [Date.UTC(1971, 1, 18), 1.80],
  57. [Date.UTC(1971, 1, 24), 1.92],
  58. [Date.UTC(1971, 2, 4), 2.49],
  59. [Date.UTC(1971, 2, 11), 2.79],
  60. [Date.UTC(1971, 2, 15), 2.73],
  61. [Date.UTC(1971, 2, 25), 2.61],
  62. [Date.UTC(1971, 3, 2), 2.76],
  63. [Date.UTC(1971, 3, 6), 2.82],
  64. [Date.UTC(1971, 3, 13), 2.8 ],
  65. [Date.UTC(1971, 4, 3), 2.1 ],
  66. [Date.UTC(1971, 4, 26), 1.1 ],
  67. [Date.UTC(1971, 5, 9), 0.25],
  68. [Date.UTC(1971, 5, 12), 0 ]
  69. ]
  70. }, {
  71. name: 'Winter 2008-2009',
  72. data: [
  73. [Date.UTC(1970, 9, 18), 0 ],
  74. [Date.UTC(1970, 9, 26), 0.2 ],
  75. [Date.UTC(1970, 11, 1), 0.47],
  76. [Date.UTC(1970, 11, 11), 0.55],
  77. [Date.UTC(1970, 11, 25), 1.38],
  78. [Date.UTC(1971, 0, 8), 1.38],
  79. [Date.UTC(1971, 0, 15), 1.38],
  80. [Date.UTC(1971, 1, 1), 1.38],
  81. [Date.UTC(1971, 1, 8), 1.48],
  82. [Date.UTC(1971, 1, 21), 1.5 ],
  83. [Date.UTC(1971, 2, 12), 1.89],
  84. [Date.UTC(1971, 2, 25), 2.0 ],
  85. [Date.UTC(1971, 3, 4), 1.94],
  86. [Date.UTC(1971, 3, 9), 1.91],
  87. [Date.UTC(1971, 3, 13), 1.75],
  88. [Date.UTC(1971, 3, 19), 1.6 ],
  89. [Date.UTC(1971, 4, 25), 0.6 ],
  90. [Date.UTC(1971, 4, 31), 0.35],
  91. [Date.UTC(1971, 5, 7), 0 ]
  92. ]
  93. }, {
  94. name: 'Winter 2009-2010',
  95. data: [
  96. [Date.UTC(1970, 9, 9), 0 ],
  97. [Date.UTC(1970, 9, 14), 0.15],
  98. [Date.UTC(1970, 10, 28), 0.35],
  99. [Date.UTC(1970, 11, 12), 0.46],
  100. [Date.UTC(1971, 0, 1), 0.59],
  101. [Date.UTC(1971, 0, 24), 0.58],
  102. [Date.UTC(1971, 1, 1), 0.62],
  103. [Date.UTC(1971, 1, 7), 0.65],
  104. [Date.UTC(1971, 1, 23), 0.77],
  105. [Date.UTC(1971, 2, 8), 0.77],
  106. [Date.UTC(1971, 2, 14), 0.79],
  107. [Date.UTC(1971, 2, 24), 0.86],
  108. [Date.UTC(1971, 3, 4), 0.8 ],
  109. [Date.UTC(1971, 3, 18), 0.94],
  110. [Date.UTC(1971, 3, 24), 0.9 ],
  111. [Date.UTC(1971, 4, 16), 0.39],
  112. [Date.UTC(1971, 4, 21), 0 ]
  113. ]
  114. }]
  115. });
  116. });
  117. </script>
  118. </head>
  119. <body>
  120. <script src="../../js/highcharts.js"></script>
  121. <script src="../../js/modules/exporting.js"></script>
  122. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  123. </body>
  124. </html>