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.

260 lines
9.4 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. $(function () {
  12. $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
  13. var detailChart;
  14. $(document).ready(function () {
  15. // create the detail chart
  16. function createDetail(masterChart) {
  17. // prepare the detail chart
  18. var detailData = [],
  19. detailStart = data[0][0];
  20. $.each(masterChart.series[0].data, function () {
  21. if (this.x >= detailStart) {
  22. detailData.push(this.y);
  23. }
  24. });
  25. // create a detail chart referenced by a global variable
  26. detailChart = $('#detail-container').highcharts({
  27. chart: {
  28. marginBottom: 120,
  29. reflow: false,
  30. marginLeft: 50,
  31. marginRight: 20,
  32. style: {
  33. position: 'absolute'
  34. }
  35. },
  36. credits: {
  37. enabled: false
  38. },
  39. title: {
  40. text: 'Historical USD to EUR Exchange Rate'
  41. },
  42. subtitle: {
  43. text: 'Select an area by dragging across the lower chart'
  44. },
  45. xAxis: {
  46. type: 'datetime'
  47. },
  48. yAxis: {
  49. title: {
  50. text: null
  51. },
  52. maxZoom: 0.1
  53. },
  54. tooltip: {
  55. formatter: function () {
  56. var point = this.points[0];
  57. return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
  58. '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
  59. },
  60. shared: true
  61. },
  62. legend: {
  63. enabled: false
  64. },
  65. plotOptions: {
  66. series: {
  67. marker: {
  68. enabled: false,
  69. states: {
  70. hover: {
  71. enabled: true,
  72. radius: 3
  73. }
  74. }
  75. }
  76. }
  77. },
  78. series: [{
  79. name: 'USD to EUR',
  80. pointStart: detailStart,
  81. pointInterval: 24 * 3600 * 1000,
  82. data: detailData
  83. }],
  84. exporting: {
  85. enabled: false
  86. }
  87. }).highcharts(); // return chart
  88. }
  89. // create the master chart
  90. function createMaster() {
  91. $('#master-container').highcharts({
  92. chart: {
  93. reflow: false,
  94. borderWidth: 0,
  95. backgroundColor: null,
  96. marginLeft: 50,
  97. marginRight: 20,
  98. zoomType: 'x',
  99. events: {
  100. // listen to the selection event on the master chart to update the
  101. // extremes of the detail chart
  102. selection: function (event) {
  103. var extremesObject = event.xAxis[0],
  104. min = extremesObject.min,
  105. max = extremesObject.max,
  106. detailData = [],
  107. xAxis = this.xAxis[0];
  108. // reverse engineer the last part of the data
  109. $.each(this.series[0].data, function () {
  110. if (this.x > min && this.x < max) {
  111. detailData.push([this.x, this.y]);
  112. }
  113. });
  114. // move the plot bands to reflect the new detail span
  115. xAxis.removePlotBand('mask-before');
  116. xAxis.addPlotBand({
  117. id: 'mask-before',
  118. from: data[0][0],
  119. to: min,
  120. color: 'rgba(0, 0, 0, 0.2)'
  121. });
  122. xAxis.removePlotBand('mask-after');
  123. xAxis.addPlotBand({
  124. id: 'mask-after',
  125. from: max,
  126. to: data[data.length - 1][0],
  127. color: 'rgba(0, 0, 0, 0.2)'
  128. });
  129. detailChart.series[0].setData(detailData);
  130. return false;
  131. }
  132. }
  133. },
  134. title: {
  135. text: null
  136. },
  137. xAxis: {
  138. type: 'datetime',
  139. showLastTickLabel: true,
  140. maxZoom: 14 * 24 * 3600000, // fourteen days
  141. plotBands: [{
  142. id: 'mask-before',
  143. from: data[0][0],
  144. to: data[data.length - 1][0],
  145. color: 'rgba(0, 0, 0, 0.2)'
  146. }],
  147. title: {
  148. text: null
  149. }
  150. },
  151. yAxis: {
  152. gridLineWidth: 0,
  153. labels: {
  154. enabled: false
  155. },
  156. title: {
  157. text: null
  158. },
  159. min: 0.6,
  160. showFirstLabel: false
  161. },
  162. tooltip: {
  163. formatter: function () {
  164. return false;
  165. }
  166. },
  167. legend: {
  168. enabled: false
  169. },
  170. credits: {
  171. enabled: false
  172. },
  173. plotOptions: {
  174. series: {
  175. fillColor: {
  176. linearGradient: [0, 0, 0, 70],
  177. stops: [
  178. [0, Highcharts.getOptions().colors[0]],
  179. [1, 'rgba(255,255,255,0)']
  180. ]
  181. },
  182. lineWidth: 1,
  183. marker: {
  184. enabled: false
  185. },
  186. shadow: false,
  187. states: {
  188. hover: {
  189. lineWidth: 1
  190. }
  191. },
  192. enableMouseTracking: false
  193. }
  194. },
  195. series: [{
  196. type: 'area',
  197. name: 'USD to EUR',
  198. pointInterval: 24 * 3600 * 1000,
  199. pointStart: data[0][0],
  200. data: data
  201. }],
  202. exporting: {
  203. enabled: false
  204. }
  205. }, function (masterChart) {
  206. createDetail(masterChart);
  207. })
  208. .highcharts(); // return chart instance
  209. }
  210. // make the container smaller and add a second container for the master chart
  211. var $container = $('#container')
  212. .css('position', 'relative');
  213. $('<div id="detail-container">')
  214. .appendTo($container);
  215. $('<div id="master-container">')
  216. .css({
  217. position: 'absolute',
  218. top: 300,
  219. height: 100,
  220. width: '100%'
  221. })
  222. .appendTo($container);
  223. // create master and in its callback, create the detail chart
  224. createMaster();
  225. });
  226. });
  227. });
  228. </script>
  229. </head>
  230. <body>
  231. <script src="../../js/highcharts.js"></script>
  232. <script src="../../js/modules/exporting.js"></script>
  233. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  234. </body>
  235. </html>