index.htm 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  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; max-width: 600px; height: 400px; margin: 0 auto"></div>
  15. <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
  16. <pre id="tsv" style="display:none">Browser Version Total Market Share
  17. Microsoft Internet Explorer 8.0 26.61%
  18. Microsoft Internet Explorer 9.0 16.96%
  19. Chrome 18.0 8.01%
  20. Chrome 19.0 7.73%
  21. Firefox 12 6.72%
  22. Microsoft Internet Explorer 6.0 6.40%
  23. Firefox 11 4.72%
  24. Microsoft Internet Explorer 7.0 3.55%
  25. Safari 5.1 3.53%
  26. Firefox 13 2.16%
  27. Firefox 3.6 1.87%
  28. Opera 11.x 1.30%
  29. Chrome 17.0 1.13%
  30. Firefox 10 0.90%
  31. Safari 5.0 0.85%
  32. Firefox 9.0 0.65%
  33. Firefox 8.0 0.55%
  34. Firefox 4.0 0.50%
  35. Chrome 16.0 0.45%
  36. Firefox 3.0 0.36%
  37. Firefox 3.5 0.36%
  38. Firefox 6.0 0.32%
  39. Firefox 5.0 0.31%
  40. Firefox 7.0 0.29%
  41. Proprietary or Undetectable 0.29%
  42. Chrome 18.0 - Maxthon Edition 0.26%
  43. Chrome 14.0 0.25%
  44. Chrome 20.0 0.24%
  45. Chrome 15.0 0.18%
  46. Chrome 12.0 0.16%
  47. Opera 12.x 0.15%
  48. Safari 4.0 0.14%
  49. Chrome 13.0 0.13%
  50. Safari 4.1 0.12%
  51. Chrome 11.0 0.10%
  52. Firefox 14 0.10%
  53. Firefox 2.0 0.09%
  54. Chrome 10.0 0.09%
  55. Opera 10.x 0.09%
  56. Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>
  57. <script type="text/javascript">
  58. // Create the chart
  59. Highcharts.chart('container', {
  60. chart: {
  61. type: 'pie'
  62. },
  63. title: {
  64. text: 'Browser market shares. January, 2018'
  65. },
  66. subtitle: {
  67. text: 'Click the slices to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
  68. },
  69. plotOptions: {
  70. series: {
  71. dataLabels: {
  72. enabled: true,
  73. format: '{point.name}: {point.y:.1f}%'
  74. }
  75. }
  76. },
  77. tooltip: {
  78. headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  79. pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  80. },
  81. "series": [
  82. {
  83. "name": "Browsers",
  84. "colorByPoint": true,
  85. "data": [
  86. {
  87. "name": "Chrome",
  88. "y": 62.74,
  89. "drilldown": "Chrome"
  90. },
  91. {
  92. "name": "Firefox",
  93. "y": 10.57,
  94. "drilldown": "Firefox"
  95. },
  96. {
  97. "name": "Internet Explorer",
  98. "y": 7.23,
  99. "drilldown": "Internet Explorer"
  100. },
  101. {
  102. "name": "Safari",
  103. "y": 5.58,
  104. "drilldown": "Safari"
  105. },
  106. {
  107. "name": "Edge",
  108. "y": 4.02,
  109. "drilldown": "Edge"
  110. },
  111. {
  112. "name": "Opera",
  113. "y": 1.92,
  114. "drilldown": "Opera"
  115. },
  116. {
  117. "name": "Other",
  118. "y": 7.62,
  119. "drilldown": null
  120. }
  121. ]
  122. }
  123. ],
  124. "drilldown": {
  125. "series": [
  126. {
  127. "name": "Chrome",
  128. "id": "Chrome",
  129. "data": [
  130. [
  131. "v65.0",
  132. 0.1
  133. ],
  134. [
  135. "v64.0",
  136. 1.3
  137. ],
  138. [
  139. "v63.0",
  140. 53.02
  141. ],
  142. [
  143. "v62.0",
  144. 1.4
  145. ],
  146. [
  147. "v61.0",
  148. 0.88
  149. ],
  150. [
  151. "v60.0",
  152. 0.56
  153. ],
  154. [
  155. "v59.0",
  156. 0.45
  157. ],
  158. [
  159. "v58.0",
  160. 0.49
  161. ],
  162. [
  163. "v57.0",
  164. 0.32
  165. ],
  166. [
  167. "v56.0",
  168. 0.29
  169. ],
  170. [
  171. "v55.0",
  172. 0.79
  173. ],
  174. [
  175. "v54.0",
  176. 0.18
  177. ],
  178. [
  179. "v51.0",
  180. 0.13
  181. ],
  182. [
  183. "v49.0",
  184. 2.16
  185. ],
  186. [
  187. "v48.0",
  188. 0.13
  189. ],
  190. [
  191. "v47.0",
  192. 0.11
  193. ],
  194. [
  195. "v43.0",
  196. 0.17
  197. ],
  198. [
  199. "v29.0",
  200. 0.26
  201. ]
  202. ]
  203. },
  204. {
  205. "name": "Firefox",
  206. "id": "Firefox",
  207. "data": [
  208. [
  209. "v58.0",
  210. 1.02
  211. ],
  212. [
  213. "v57.0",
  214. 7.36
  215. ],
  216. [
  217. "v56.0",
  218. 0.35
  219. ],
  220. [
  221. "v55.0",
  222. 0.11
  223. ],
  224. [
  225. "v54.0",
  226. 0.1
  227. ],
  228. [
  229. "v52.0",
  230. 0.95
  231. ],
  232. [
  233. "v51.0",
  234. 0.15
  235. ],
  236. [
  237. "v50.0",
  238. 0.1
  239. ],
  240. [
  241. "v48.0",
  242. 0.31
  243. ],
  244. [
  245. "v47.0",
  246. 0.12
  247. ]
  248. ]
  249. },
  250. {
  251. "name": "Internet Explorer",
  252. "id": "Internet Explorer",
  253. "data": [
  254. [
  255. "v11.0",
  256. 6.2
  257. ],
  258. [
  259. "v10.0",
  260. 0.29
  261. ],
  262. [
  263. "v9.0",
  264. 0.27
  265. ],
  266. [
  267. "v8.0",
  268. 0.47
  269. ]
  270. ]
  271. },
  272. {
  273. "name": "Safari",
  274. "id": "Safari",
  275. "data": [
  276. [
  277. "v11.0",
  278. 3.39
  279. ],
  280. [
  281. "v10.1",
  282. 0.96
  283. ],
  284. [
  285. "v10.0",
  286. 0.36
  287. ],
  288. [
  289. "v9.1",
  290. 0.54
  291. ],
  292. [
  293. "v9.0",
  294. 0.13
  295. ],
  296. [
  297. "v5.1",
  298. 0.2
  299. ]
  300. ]
  301. },
  302. {
  303. "name": "Edge",
  304. "id": "Edge",
  305. "data": [
  306. [
  307. "v16",
  308. 2.6
  309. ],
  310. [
  311. "v15",
  312. 0.92
  313. ],
  314. [
  315. "v14",
  316. 0.4
  317. ],
  318. [
  319. "v13",
  320. 0.1
  321. ]
  322. ]
  323. },
  324. {
  325. "name": "Opera",
  326. "id": "Opera",
  327. "data": [
  328. [
  329. "v50.0",
  330. 0.96
  331. ],
  332. [
  333. "v49.0",
  334. 0.82
  335. ],
  336. [
  337. "v12.1",
  338. 0.14
  339. ]
  340. ]
  341. }
  342. ]
  343. }
  344. });
  345. </script>
  346. </body>
  347. </html>