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.

422 lines
16 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. #container {
  9. min-width: 300px;
  10. max-width: 1000px;
  11. height: 420px;
  12. margin: 1em auto;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. /**
  17. * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
  18. * It also shows custom graphics drawn in the chart area on chart load.
  19. */
  20. /**
  21. * Fires on chart load, called from the chart.events.load option.
  22. */
  23. function onChartLoad() {
  24. var centerX = 140,
  25. centerY = 110,
  26. path = [],
  27. angle,
  28. radius,
  29. badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
  30. spike,
  31. empImage,
  32. big5,
  33. label,
  34. left,
  35. right,
  36. years,
  37. renderer;
  38. if (this.chartWidth < 530) {
  39. return;
  40. }
  41. // Draw the spiked disc
  42. for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
  43. radius = spike ? 80 : 70;
  44. path.push(
  45. 'L',
  46. centerX + radius * Math.cos(angle),
  47. centerY + radius * Math.sin(angle)
  48. );
  49. spike = !spike;
  50. }
  51. path[0] = 'M';
  52. path.push('z');
  53. this.renderer.path(path)
  54. .attr({
  55. fill: badgeColor,
  56. zIndex: 6
  57. })
  58. .add();
  59. // Employee image overlay
  60. empImage = this.renderer.path(path)
  61. .attr({
  62. zIndex: 7,
  63. opacity: 0,
  64. stroke: badgeColor,
  65. 'stroke-width': 1
  66. })
  67. .add();
  68. // Big 5
  69. big5 = this.renderer.text('5')
  70. .attr({
  71. zIndex: 6
  72. })
  73. .css({
  74. color: 'white',
  75. fontSize: '100px',
  76. fontStyle: 'italic',
  77. fontFamily: "'Brush Script MT', sans-serif"
  78. })
  79. .add();
  80. big5.attr({
  81. x: centerX - big5.getBBox().width / 2,
  82. y: centerY + 14
  83. });
  84. // Draw the label
  85. label = this.renderer.text('Highcharts Anniversary')
  86. .attr({
  87. zIndex: 6
  88. })
  89. .css({
  90. color: '#FFFFFF'
  91. })
  92. .add();
  93. left = centerX - label.getBBox().width / 2;
  94. right = centerX + label.getBBox().width / 2;
  95. label.attr({
  96. x: left,
  97. y: centerY + 44
  98. });
  99. // The band
  100. left = centerX - 90;
  101. right = centerX + 90;
  102. this.renderer
  103. .path([
  104. 'M', left, centerY + 30,
  105. 'L', right, centerY + 30,
  106. right, centerY + 50,
  107. left, centerY + 50,
  108. 'z',
  109. 'M', left, centerY + 40,
  110. 'L', left - 20, centerY + 40,
  111. left - 10, centerY + 50,
  112. left - 20, centerY + 60,
  113. left + 10, centerY + 60,
  114. left, centerY + 50,
  115. left + 10, centerY + 60,
  116. left + 10, centerY + 50,
  117. left, centerY + 50,
  118. 'z',
  119. 'M', right, centerY + 40,
  120. 'L', right + 20, centerY + 40,
  121. right + 10, centerY + 50,
  122. right + 20, centerY + 60,
  123. right - 10, centerY + 60,
  124. right, centerY + 50,
  125. right - 10, centerY + 60,
  126. right - 10, centerY + 50,
  127. right, centerY + 50,
  128. 'z'
  129. ])
  130. .attr({
  131. fill: badgeColor,
  132. stroke: '#FFFFFF',
  133. 'stroke-width': 1,
  134. zIndex: 5
  135. })
  136. .add();
  137. // 2009-2014
  138. years = this.renderer.text('2009-2014')
  139. .attr({
  140. zIndex: 6
  141. })
  142. .css({
  143. color: '#FFFFFF',
  144. fontStyle: 'italic',
  145. fontSize: '10px'
  146. })
  147. .add();
  148. years.attr({
  149. x: centerX - years.getBBox().width / 2,
  150. y: centerY + 62
  151. });
  152. // Prepare mouseover
  153. renderer = this.renderer;
  154. if (renderer.defs) { // is SVG
  155. $.each(this.get('employees').points, function () {
  156. var point = this,
  157. pattern;
  158. if (point.image) {
  159. pattern = renderer.createElement('pattern').attr({
  160. id: 'pattern-' + point.image,
  161. patternUnits: 'userSpaceOnUse',
  162. width: 400,
  163. height: 400
  164. }).add(renderer.defs);
  165. renderer.image(
  166. 'http://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
  167. centerX - 80,
  168. centerY - 80,
  169. 160,
  170. 213
  171. ).add(pattern);
  172. Highcharts.addEvent(point, 'mouseOver', function () {
  173. empImage
  174. .attr({
  175. fill: 'url(#pattern-' + point.image + ')'
  176. })
  177. .animate({ opacity: 1 }, { duration : 500 });
  178. });
  179. Highcharts.addEvent(point, 'mouseOut', function () {
  180. empImage.animate({ opacity: 0 }, { duration : 500 });
  181. });
  182. }
  183. });
  184. }
  185. }
  186. $(function () {
  187. var options = {
  188. chart: {
  189. events: {
  190. load: onChartLoad
  191. }
  192. },
  193. xAxis: {
  194. type: 'datetime',
  195. minTickInterval: 365 * 24 * 36e5,
  196. labels: {
  197. align: 'left'
  198. },
  199. plotBands: [{
  200. from: Date.UTC(2009, 10, 27),
  201. to: Date.UTC(2010, 11, 1),
  202. color: '#EFFFFF',
  203. label: {
  204. text: '<em>Offices:</em><br> Torstein\'s basement',
  205. style: {
  206. color: '#999999'
  207. },
  208. y: 180
  209. }
  210. }, {
  211. from: Date.UTC(2010, 11, 1),
  212. to: Date.UTC(2013, 9, 1),
  213. color: '#FFFFEF',
  214. label: {
  215. text: '<em>Offices:</em><br> Tomtebu',
  216. style: {
  217. color: '#999999'
  218. },
  219. y: 30
  220. }
  221. }, {
  222. from: Date.UTC(2013, 9, 1),
  223. to: Date.UTC(2014, 10, 27),
  224. color: '#FFEFFF',
  225. label: {
  226. text: '<em>Offices:</em><br> VikØrsta',
  227. style: {
  228. color: '#999999'
  229. },
  230. y: 30
  231. }
  232. }]
  233. },
  234. title: {
  235. text: 'Highcharts and Highsoft timeline'
  236. },
  237. tooltip: {
  238. style: {
  239. width: '250px'
  240. }
  241. },
  242. yAxis: [{
  243. max: 100,
  244. labels: {
  245. enabled: false
  246. },
  247. title: {
  248. text: ''
  249. },
  250. gridLineColor: 'rgba(0, 0, 0, 0.07)'
  251. }, {
  252. allowDecimals: false,
  253. max: 15,
  254. labels: {
  255. style: {
  256. color: Highcharts.getOptions().colors[2]
  257. }
  258. },
  259. title: {
  260. text: 'Employees',
  261. style: {
  262. color: Highcharts.getOptions().colors[2]
  263. }
  264. },
  265. opposite: true,
  266. gridLineWidth: 0
  267. }],
  268. plotOptions: {
  269. series: {
  270. marker: {
  271. enabled: false,
  272. symbol: 'circle',
  273. radius: 2
  274. },
  275. fillOpacity: 0.5
  276. },
  277. flags: {
  278. tooltip: {
  279. xDateFormat: '%B %e, %Y'
  280. }
  281. }
  282. },
  283. series: [{
  284. type: 'spline',
  285. id: 'google-trends',
  286. dashStyle: 'dash',
  287. name: 'Google search for <em>highcharts</em>',
  288. data: [{ x: 1258322400000, /* November 2009 */ y: 0}, { x: 1260961200000, y: 5}, { x: 1263639600000, y: 7}, { x: 1266188400000, y: 5}, { x: 1268740800000, y: 6}, { x: 1271368800000, y: 8}, { x: 1274004000000, y: 11}, { x: 1276639200000, y: 9}, { x: 1279274400000, y: 12}, { x: 1281952800000, y: 13}, { x: 1284588000000, y: 17}, { x: 1287223200000, y: 17}, { x: 1289858400000, y: 18}, { x: 1292497200000, y: 20}, { x: 1295175600000, y: 20}, { x: 1297724400000, y: 27}, { x: 1300276800000, y: 32}, { x: 1302904800000, y: 29}, { x: 1305540000000, y: 34}, { x: 1308175200000, y: 34}, { x: 1310810400000, y: 36}, { x: 1313488800000, y: 43}, { x: 1316124000000, y: 44}, { x: 1318759200000, y: 42}, { x: 1321394400000, y: 47}, { x: 1324033200000, y: 46}, { x: 1326711600000, y: 50}, { x: 1329303600000, y: 57}, { x: 1331899200000, y: 54}, { x: 1334527200000, y: 59}, { x: 1337162400000, y: 62}, { x: 1339797600000, y: 66}, { x: 1342432800000, y: 61}, { x: 1345111200000, y: 68}, { x: 1347746400000, y: 67}, { x: 1350381600000, y: 73}, { x: 1353016800000, y: 63}, { x: 1355655600000, y: 54}, { x: 1358334000000, y: 67}, { x: 1360882800000, y: 74}, { x: 1363435200000, y: 81}, { x: 1366063200000, y: 89}, { x: 1368698400000, y: 83}, { x: 1371333600000, y: 88}, { x: 1373968800000, y: 86}, { x: 1376647200000, y: 81}, { x: 1379282400000, y: 83}, { x: 1381917600000, y: 95}, { x: 1384552800000, y: 86}, { x: 1387191600000, y: 83}, { x: 1389870000000, y: 89}, { x: 1392418800000, y: 90}, { x: 1394971200000, y: 94}, { x: 1397599200000, y: 100}, { x: 1400234400000, y: 100}, { x: 1402869600000, y: 99}, { x: 1405504800000, y: 99}, { x: 1408183200000, y: 93}, { x: 1410818400000, y: 97}, { x: 1413453600000, y: 98}],
  289. tooltip: {
  290. xDateFormat: '%B %Y',
  291. valueSuffix: ' % of best month'
  292. }
  293. }, {
  294. name: 'Revenue',
  295. id: 'revenue',
  296. type: 'area',
  297. data: [[1257033600000, 2], [1259625600000, 3], [1262304000000, 2], [1264982400000, 3], [1267401600000, 4], [1270080000000, 4], [1272672000000, 4], [1275350400000, 4], [1277942400000, 5], [1280620800000, 7], [1283299200000, 6], [1285891200000, 9], [1288569600000, 10], [1291161600000, 8], [1293840000000, 10], [1296518400000, 13], [1298937600000, 15], [1301616000000, 14], [1304208000000, 15], [1306886400000, 16], [1309478400000, 22], [1312156800000, 19], [1314835200000, 20], [1317427200000, 32], [1320105600000, 34], [1322697600000, 36], [1325376000000, 34], [1328054400000, 40], [1330560000000, 37], [1333238400000, 35], [1335830400000, 40], [1338508800000, 38], [1341100800000, 39], [1343779200000, 43], [1346457600000, 49], [1349049600000, 43], [1351728000000, 54], [1354320000000, 44], [1356998400000, 43], [1359676800000, 43], [1362096000000, 52], [1364774400000, 52], [1367366400000, 56], [1370044800000, 62], [1372636800000, 66], [1375315200000, 62], [1377993600000, 63], [1380585600000, 60], [1383264000000, 60], [1385856000000, 58], [1388534400000, 65], [1391212800000, 52], [1393632000000, 72], [1396310400000, 57], [1398902400000, 70], [1401580800000, 63], [1404172800000, 65], [1406851200000, 65], [1409529600000, 89], [1412121600000, 100]],
  298. tooltip: {
  299. xDateFormat: '%B %Y',
  300. valueSuffix: ' % of best month'
  301. }
  302. }, {
  303. yAxis: 1,
  304. name: 'Highsoft employees',
  305. id: 'employees',
  306. type: 'area',
  307. step: 'left',
  308. tooltip: {
  309. headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
  310. pointFormat: '{point.name}<br><b>{point.y}</b>',
  311. valueSuffix: ' employees'
  312. },
  313. data: [
  314. { x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' },
  315. { x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' },
  316. { x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null },
  317. { x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' },
  318. { x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' },
  319. { x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' },
  320. { x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
  321. { x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' },
  322. { x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null },
  323. { x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' },
  324. { x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' },
  325. { x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' },
  326. { x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' },
  327. { x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
  328. ]
  329. }]
  330. };
  331. // Add flags for important milestones. This requires Highstock.
  332. if (Highcharts.seriesTypes.flags) {
  333. options.series.push({
  334. type: 'flags',
  335. name: 'Cloud',
  336. color: '#333333',
  337. shape: 'squarepin',
  338. y: -80,
  339. data: [
  340. { x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' }
  341. ],
  342. showInLegend: false
  343. }, {
  344. type: 'flags',
  345. name: 'Highmaps',
  346. color: '#333333',
  347. shape: 'squarepin',
  348. y: -55,
  349. data: [
  350. { x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' }
  351. ],
  352. showInLegend: false
  353. }, {
  354. type: 'flags',
  355. name: 'Highcharts',
  356. color: '#333333',
  357. shape: 'circlepin',
  358. data: [
  359. { x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' },
  360. { x: Date.UTC(2010, 6, 13), text: 'Ported from canvas to SVG rendering', title: '2.0' },
  361. { x: Date.UTC(2010, 10, 23), text: 'Dynamically resize and scale to text labels', title: '2.1' },
  362. { x: Date.UTC(2011, 9, 18), text: 'Highstock version 1.0 released', title: 'Stock', shape: 'squarepin' },
  363. { x: Date.UTC(2012, 7, 24), text: 'Gauges, polar charts and range series', title: '2.3' },
  364. { x: Date.UTC(2013, 2, 22), text: 'Multitouch support, more series types', title: '3.0' },
  365. { x: Date.UTC(2014, 3, 22), text: '3D charts, heatmaps', title: '4.0' }
  366. ],
  367. showInLegend: false
  368. }, {
  369. type: 'flags',
  370. name: 'Events',
  371. color: '#333333',
  372. fillColor: 'rgba(255,255,255,0.8)',
  373. data: [
  374. { x: Date.UTC(2012, 10, 1), text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway', title: 'Award' },
  375. { x: Date.UTC(2012, 11, 25), text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.', title: 'First book' },
  376. { x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' },
  377. { x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' }
  378. ],
  379. onSeries: 'revenue',
  380. showInLegend: false
  381. });
  382. }
  383. $('#container').highcharts(options);
  384. });
  385. </script>
  386. </head>
  387. <body>
  388. <script src="../../js/highstock.js"></script>
  389. <script src="../../js/modules/exporting.js"></script>
  390. <div id="container"></div>
  391. </body>
  392. </html>