index.htm 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Highcharts Example</title>
  7. <style type="text/css">
  8. </style>
  9. </head>
  10. <body>
  11. <script src="../../code/highcharts.js"></script>
  12. <script src="../../code/modules/data.js"></script>
  13. <script src="../../code/modules/drilldown.js"></script>
  14. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  15. <script type="text/javascript">
  16. // Create the chart
  17. Highcharts.chart('container', {
  18. chart: {
  19. type: 'column'
  20. },
  21. title: {
  22. text: 'Browser market shares. January, 2018'
  23. },
  24. subtitle: {
  25. text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
  26. },
  27. xAxis: {
  28. type: 'category'
  29. },
  30. yAxis: {
  31. title: {
  32. text: 'Total percent market share'
  33. }
  34. },
  35. legend: {
  36. enabled: false
  37. },
  38. plotOptions: {
  39. series: {
  40. borderWidth: 0,
  41. dataLabels: {
  42. enabled: true,
  43. format: '{point.y:.1f}%'
  44. }
  45. }
  46. },
  47. tooltip: {
  48. headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  49. pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  50. },
  51. "series": [
  52. {
  53. "name": "Browsers",
  54. "colorByPoint": true,
  55. "data": [
  56. {
  57. "name": "Chrome",
  58. "y": 62.74,
  59. "drilldown": "Chrome"
  60. },
  61. {
  62. "name": "Firefox",
  63. "y": 10.57,
  64. "drilldown": "Firefox"
  65. },
  66. {
  67. "name": "Internet Explorer",
  68. "y": 7.23,
  69. "drilldown": "Internet Explorer"
  70. },
  71. {
  72. "name": "Safari",
  73. "y": 5.58,
  74. "drilldown": "Safari"
  75. },
  76. {
  77. "name": "Edge",
  78. "y": 4.02,
  79. "drilldown": "Edge"
  80. },
  81. {
  82. "name": "Opera",
  83. "y": 1.92,
  84. "drilldown": "Opera"
  85. },
  86. {
  87. "name": "Other",
  88. "y": 7.62,
  89. "drilldown": null
  90. }
  91. ]
  92. }
  93. ],
  94. "drilldown": {
  95. "series": [
  96. {
  97. "name": "Chrome",
  98. "id": "Chrome",
  99. "data": [
  100. [
  101. "v65.0",
  102. 0.1
  103. ],
  104. [
  105. "v64.0",
  106. 1.3
  107. ],
  108. [
  109. "v63.0",
  110. 53.02
  111. ],
  112. [
  113. "v62.0",
  114. 1.4
  115. ],
  116. [
  117. "v61.0",
  118. 0.88
  119. ],
  120. [
  121. "v60.0",
  122. 0.56
  123. ],
  124. [
  125. "v59.0",
  126. 0.45
  127. ],
  128. [
  129. "v58.0",
  130. 0.49
  131. ],
  132. [
  133. "v57.0",
  134. 0.32
  135. ],
  136. [
  137. "v56.0",
  138. 0.29
  139. ],
  140. [
  141. "v55.0",
  142. 0.79
  143. ],
  144. [
  145. "v54.0",
  146. 0.18
  147. ],
  148. [
  149. "v51.0",
  150. 0.13
  151. ],
  152. [
  153. "v49.0",
  154. 2.16
  155. ],
  156. [
  157. "v48.0",
  158. 0.13
  159. ],
  160. [
  161. "v47.0",
  162. 0.11
  163. ],
  164. [
  165. "v43.0",
  166. 0.17
  167. ],
  168. [
  169. "v29.0",
  170. 0.26
  171. ]
  172. ]
  173. },
  174. {
  175. "name": "Firefox",
  176. "id": "Firefox",
  177. "data": [
  178. [
  179. "v58.0",
  180. 1.02
  181. ],
  182. [
  183. "v57.0",
  184. 7.36
  185. ],
  186. [
  187. "v56.0",
  188. 0.35
  189. ],
  190. [
  191. "v55.0",
  192. 0.11
  193. ],
  194. [
  195. "v54.0",
  196. 0.1
  197. ],
  198. [
  199. "v52.0",
  200. 0.95
  201. ],
  202. [
  203. "v51.0",
  204. 0.15
  205. ],
  206. [
  207. "v50.0",
  208. 0.1
  209. ],
  210. [
  211. "v48.0",
  212. 0.31
  213. ],
  214. [
  215. "v47.0",
  216. 0.12
  217. ]
  218. ]
  219. },
  220. {
  221. "name": "Internet Explorer",
  222. "id": "Internet Explorer",
  223. "data": [
  224. [
  225. "v11.0",
  226. 6.2
  227. ],
  228. [
  229. "v10.0",
  230. 0.29
  231. ],
  232. [
  233. "v9.0",
  234. 0.27
  235. ],
  236. [
  237. "v8.0",
  238. 0.47
  239. ]
  240. ]
  241. },
  242. {
  243. "name": "Safari",
  244. "id": "Safari",
  245. "data": [
  246. [
  247. "v11.0",
  248. 3.39
  249. ],
  250. [
  251. "v10.1",
  252. 0.96
  253. ],
  254. [
  255. "v10.0",
  256. 0.36
  257. ],
  258. [
  259. "v9.1",
  260. 0.54
  261. ],
  262. [
  263. "v9.0",
  264. 0.13
  265. ],
  266. [
  267. "v5.1",
  268. 0.2
  269. ]
  270. ]
  271. },
  272. {
  273. "name": "Edge",
  274. "id": "Edge",
  275. "data": [
  276. [
  277. "v16",
  278. 2.6
  279. ],
  280. [
  281. "v15",
  282. 0.92
  283. ],
  284. [
  285. "v14",
  286. 0.4
  287. ],
  288. [
  289. "v13",
  290. 0.1
  291. ]
  292. ]
  293. },
  294. {
  295. "name": "Opera",
  296. "id": "Opera",
  297. "data": [
  298. [
  299. "v50.0",
  300. 0.96
  301. ],
  302. [
  303. "v49.0",
  304. 0.82
  305. ],
  306. [
  307. "v12.1",
  308. 0.14
  309. ]
  310. ]
  311. }
  312. ]
  313. }
  314. });
  315. </script>
  316. </body>
  317. </html>