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.

275 lines
7.2 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. // Create the chart
  13. $('#container').highcharts({
  14. chart: {
  15. type: 'column'
  16. },
  17. title: {
  18. text: 'Browser market shares. January, 2015 to May, 2015'
  19. },
  20. subtitle: {
  21. text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
  22. },
  23. xAxis: {
  24. type: 'category'
  25. },
  26. yAxis: {
  27. title: {
  28. text: 'Total percent market share'
  29. }
  30. },
  31. legend: {
  32. enabled: false
  33. },
  34. plotOptions: {
  35. series: {
  36. borderWidth: 0,
  37. dataLabels: {
  38. enabled: true,
  39. format: '{point.y:.1f}%'
  40. }
  41. }
  42. },
  43. tooltip: {
  44. headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  45. pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  46. },
  47. series: [{
  48. name: "Brands",
  49. colorByPoint: true,
  50. data: [{
  51. name: "Microsoft Internet Explorer",
  52. y: 56.33,
  53. drilldown: "Microsoft Internet Explorer"
  54. }, {
  55. name: "Chrome",
  56. y: 24.03,
  57. drilldown: "Chrome"
  58. }, {
  59. name: "Firefox",
  60. y: 10.38,
  61. drilldown: "Firefox"
  62. }, {
  63. name: "Safari",
  64. y: 4.77,
  65. drilldown: "Safari"
  66. }, {
  67. name: "Opera",
  68. y: 0.91,
  69. drilldown: "Opera"
  70. }, {
  71. name: "Proprietary or Undetectable",
  72. y: 0.2,
  73. drilldown: null
  74. }]
  75. }],
  76. drilldown: {
  77. series: [{
  78. name: "Microsoft Internet Explorer",
  79. id: "Microsoft Internet Explorer",
  80. data: [
  81. [
  82. "v11.0",
  83. 24.13
  84. ],
  85. [
  86. "v8.0",
  87. 17.2
  88. ],
  89. [
  90. "v9.0",
  91. 8.11
  92. ],
  93. [
  94. "v10.0",
  95. 5.33
  96. ],
  97. [
  98. "v6.0",
  99. 1.06
  100. ],
  101. [
  102. "v7.0",
  103. 0.5
  104. ]
  105. ]
  106. }, {
  107. name: "Chrome",
  108. id: "Chrome",
  109. data: [
  110. [
  111. "v40.0",
  112. 5
  113. ],
  114. [
  115. "v41.0",
  116. 4.32
  117. ],
  118. [
  119. "v42.0",
  120. 3.68
  121. ],
  122. [
  123. "v39.0",
  124. 2.96
  125. ],
  126. [
  127. "v36.0",
  128. 2.53
  129. ],
  130. [
  131. "v43.0",
  132. 1.45
  133. ],
  134. [
  135. "v31.0",
  136. 1.24
  137. ],
  138. [
  139. "v35.0",
  140. 0.85
  141. ],
  142. [
  143. "v38.0",
  144. 0.6
  145. ],
  146. [
  147. "v32.0",
  148. 0.55
  149. ],
  150. [
  151. "v37.0",
  152. 0.38
  153. ],
  154. [
  155. "v33.0",
  156. 0.19
  157. ],
  158. [
  159. "v34.0",
  160. 0.14
  161. ],
  162. [
  163. "v30.0",
  164. 0.14
  165. ]
  166. ]
  167. }, {
  168. name: "Firefox",
  169. id: "Firefox",
  170. data: [
  171. [
  172. "v35",
  173. 2.76
  174. ],
  175. [
  176. "v36",
  177. 2.32
  178. ],
  179. [
  180. "v37",
  181. 2.31
  182. ],
  183. [
  184. "v34",
  185. 1.27
  186. ],
  187. [
  188. "v38",
  189. 1.02
  190. ],
  191. [
  192. "v31",
  193. 0.33
  194. ],
  195. [
  196. "v33",
  197. 0.22
  198. ],
  199. [
  200. "v32",
  201. 0.15
  202. ]
  203. ]
  204. }, {
  205. name: "Safari",
  206. id: "Safari",
  207. data: [
  208. [
  209. "v8.0",
  210. 2.56
  211. ],
  212. [
  213. "v7.1",
  214. 0.77
  215. ],
  216. [
  217. "v5.1",
  218. 0.42
  219. ],
  220. [
  221. "v5.0",
  222. 0.3
  223. ],
  224. [
  225. "v6.1",
  226. 0.29
  227. ],
  228. [
  229. "v7.0",
  230. 0.26
  231. ],
  232. [
  233. "v6.2",
  234. 0.17
  235. ]
  236. ]
  237. }, {
  238. name: "Opera",
  239. id: "Opera",
  240. data: [
  241. [
  242. "v12.x",
  243. 0.34
  244. ],
  245. [
  246. "v28",
  247. 0.24
  248. ],
  249. [
  250. "v27",
  251. 0.17
  252. ],
  253. [
  254. "v29",
  255. 0.16
  256. ]
  257. ]
  258. }]
  259. }
  260. });
  261. });
  262. </script>
  263. </head>
  264. <body>
  265. <script src="../../js/highcharts.js"></script>
  266. <script src="../../js/modules/data.js"></script>
  267. <script src="../../js/modules/drilldown.js"></script>
  268. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  269. </body>
  270. </html>