index.htm 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  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. #container {
  9. min-width: 320px;
  10. max-width: 800px;
  11. margin: 0 auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="../../code/highcharts.js"></script>
  17. <script src="../../code/highcharts-more.js"></script>
  18. <script src="../../code/modules/exporting.js"></script>
  19. <div id="container"></div>
  20. <script type="text/javascript">
  21. Highcharts.chart('container', {
  22. chart: {
  23. type: 'packedbubble',
  24. height: '100%'
  25. },
  26. title: {
  27. text: 'Carbon emissions around the world (2014)'
  28. },
  29. tooltip: {
  30. useHTML: true,
  31. pointFormat: '<b>{point.name}:</b> {point.y}m CO<sub>2</sub>'
  32. },
  33. plotOptions: {
  34. packedbubble: {
  35. dataLabels: {
  36. enabled: true,
  37. format: '{point.name}',
  38. filter: {
  39. property: 'y',
  40. operator: '>',
  41. value: 250
  42. },
  43. style: {
  44. color: 'black',
  45. textOutline: 'none',
  46. fontWeight: 'normal'
  47. }
  48. },
  49. minPointSize: 5
  50. }
  51. },
  52. series: [{
  53. name: 'Europe',
  54. data: [{
  55. name: 'Germany',
  56. value: 767.1
  57. }, {
  58. name: 'Croatia',
  59. value: 20.7
  60. },
  61. {
  62. name: "Belgium",
  63. value: 97.2
  64. },
  65. {
  66. name: "Czech Republic",
  67. value: 111.7
  68. },
  69. {
  70. name: "Netherlands",
  71. value: 158.1
  72. },
  73. {
  74. name: "Spain",
  75. value: 241.6
  76. },
  77. {
  78. name: "Ukraine",
  79. value: 249.1
  80. },
  81. {
  82. name: "Poland",
  83. value: 298.1
  84. },
  85. {
  86. name: "France",
  87. value: 323.7
  88. },
  89. {
  90. name: "Romania",
  91. value: 78.3
  92. },
  93. {
  94. name: "United Kingdom",
  95. value: 415.4
  96. }, {
  97. name: "Turkey",
  98. value: 353.2
  99. }, {
  100. name: "Italy",
  101. value: 337.6
  102. },
  103. {
  104. name: "Greece",
  105. value: 71.1
  106. },
  107. {
  108. name: "Austria",
  109. value: 69.8
  110. },
  111. {
  112. name: "Belarus",
  113. value: 67.7
  114. },
  115. {
  116. name: "Serbia",
  117. value: 59.3
  118. },
  119. {
  120. name: "Finland",
  121. value: 54.8
  122. },
  123. {
  124. name: "Bulgaria",
  125. value: 51.2
  126. },
  127. {
  128. name: "Portugal",
  129. value: 48.3
  130. },
  131. {
  132. name: "Norway",
  133. value: 44.4
  134. },
  135. {
  136. name: "Sweden",
  137. value: 44.3
  138. },
  139. {
  140. name: "Hungary",
  141. value: 43.7
  142. },
  143. {
  144. name: "Switzerland",
  145. value: 40.2
  146. },
  147. {
  148. name: "Denmark",
  149. value: 40
  150. },
  151. {
  152. name: "Slovakia",
  153. value: 34.7
  154. },
  155. {
  156. name: "Ireland",
  157. value: 34.6
  158. },
  159. {
  160. name: "Croatia",
  161. value: 20.7
  162. },
  163. {
  164. name: "Estonia",
  165. value: 19.4
  166. },
  167. {
  168. name: "Slovenia",
  169. value: 16.7
  170. },
  171. {
  172. name: "Lithuania",
  173. value: 12.3
  174. },
  175. {
  176. name: "Luxembourg",
  177. value: 10.4
  178. },
  179. {
  180. name: "Macedonia",
  181. value: 9.5
  182. },
  183. {
  184. name: "Moldova",
  185. value: 7.8
  186. },
  187. {
  188. name: "Latvia",
  189. value: 7.5
  190. },
  191. {
  192. name: "Cyprus",
  193. value: 7.2
  194. }]
  195. }, {
  196. name: 'Africa',
  197. data: [{
  198. name: "Senegal",
  199. value: 8.2
  200. },
  201. {
  202. name: "Cameroon",
  203. value: 9.2
  204. },
  205. {
  206. name: "Zimbabwe",
  207. value: 13.1
  208. },
  209. {
  210. name: "Ghana",
  211. value: 14.1
  212. },
  213. {
  214. name: "Kenya",
  215. value: 14.1
  216. },
  217. {
  218. name: "Sudan",
  219. value: 17.3
  220. },
  221. {
  222. name: "Tunisia",
  223. value: 24.3
  224. },
  225. {
  226. name: "Angola",
  227. value: 25
  228. },
  229. {
  230. name: "Libya",
  231. value: 50.6
  232. },
  233. {
  234. name: "Ivory Coast",
  235. value: 7.3
  236. },
  237. {
  238. name: "Morocco",
  239. value: 60.7
  240. },
  241. {
  242. name: "Ethiopia",
  243. value: 8.9
  244. },
  245. {
  246. name: "United Republic of Tanzania",
  247. value: 9.1
  248. },
  249. {
  250. name: "Nigeria",
  251. value: 93.9
  252. },
  253. {
  254. name: "South Africa",
  255. value: 392.7
  256. }, {
  257. name: "Egypt",
  258. value: 225.1
  259. }, {
  260. name: "Algeria",
  261. value: 141.5
  262. }]
  263. }, {
  264. name: 'Oceania',
  265. data: [{
  266. name: "Australia",
  267. value: 409.4
  268. },
  269. {
  270. name: "New Zealand",
  271. value: 34.1
  272. },
  273. {
  274. name: "Papua New Guinea",
  275. value: 7.1
  276. }]
  277. }, {
  278. name: 'North America',
  279. data: [{
  280. name: "Costa Rica",
  281. value: 7.6
  282. },
  283. {
  284. name: "Honduras",
  285. value: 8.4
  286. },
  287. {
  288. name: "Jamaica",
  289. value: 8.3
  290. },
  291. {
  292. name: "Panama",
  293. value: 10.2
  294. },
  295. {
  296. name: "Guatemala",
  297. value: 12
  298. },
  299. {
  300. name: "Dominican Republic",
  301. value: 23.4
  302. },
  303. {
  304. name: "Cuba",
  305. value: 30.2
  306. },
  307. {
  308. name: "USA",
  309. value: 5334.5
  310. }, {
  311. name: "Canada",
  312. value: 566
  313. }, {
  314. name: "Mexico",
  315. value: 456.3
  316. }]
  317. }, {
  318. name: 'South America',
  319. data: [{
  320. name: "El Salvador",
  321. value: 7.2
  322. },
  323. {
  324. name: "Uruguay",
  325. value: 8.1
  326. },
  327. {
  328. name: "Bolivia",
  329. value: 17.8
  330. },
  331. {
  332. name: "Trinidad and Tobago",
  333. value: 34
  334. },
  335. {
  336. name: "Ecuador",
  337. value: 43
  338. },
  339. {
  340. name: "Chile",
  341. value: 78.6
  342. },
  343. {
  344. name: "Peru",
  345. value: 52
  346. },
  347. {
  348. name: "Colombia",
  349. value: 74.1
  350. },
  351. {
  352. name: "Brazil",
  353. value: 501.1
  354. }, {
  355. name: "Argentina",
  356. value: 199
  357. },
  358. {
  359. name: "Venezuela",
  360. value: 195.2
  361. }]
  362. }, {
  363. name: 'Asia',
  364. data: [{
  365. name: "Nepal",
  366. value: 6.5
  367. },
  368. {
  369. name: "Georgia",
  370. value: 6.5
  371. },
  372. {
  373. name: "Brunei Darussalam",
  374. value: 7.4
  375. },
  376. {
  377. name: "Kyrgyzstan",
  378. value: 7.4
  379. },
  380. {
  381. name: "Afghanistan",
  382. value: 7.9
  383. },
  384. {
  385. name: "Myanmar",
  386. value: 9.1
  387. },
  388. {
  389. name: "Mongolia",
  390. value: 14.7
  391. },
  392. {
  393. name: "Sri Lanka",
  394. value: 16.6
  395. },
  396. {
  397. name: "Bahrain",
  398. value: 20.5
  399. },
  400. {
  401. name: "Yemen",
  402. value: 22.6
  403. },
  404. {
  405. name: "Jordan",
  406. value: 22.3
  407. },
  408. {
  409. name: "Lebanon",
  410. value: 21.1
  411. },
  412. {
  413. name: "Azerbaijan",
  414. value: 31.7
  415. },
  416. {
  417. name: "Singapore",
  418. value: 47.8
  419. },
  420. {
  421. name: "Hong Kong",
  422. value: 49.9
  423. },
  424. {
  425. name: "Syria",
  426. value: 52.7
  427. },
  428. {
  429. name: "DPR Korea",
  430. value: 59.9
  431. },
  432. {
  433. name: "Israel",
  434. value: 64.8
  435. },
  436. {
  437. name: "Turkmenistan",
  438. value: 70.6
  439. },
  440. {
  441. name: "Oman",
  442. value: 74.3
  443. },
  444. {
  445. name: "Qatar",
  446. value: 88.8
  447. },
  448. {
  449. name: "Philippines",
  450. value: 96.9
  451. },
  452. {
  453. name: "Kuwait",
  454. value: 98.6
  455. },
  456. {
  457. name: "Uzbekistan",
  458. value: 122.6
  459. },
  460. {
  461. name: "Iraq",
  462. value: 139.9
  463. },
  464. {
  465. name: "Pakistan",
  466. value: 158.1
  467. },
  468. {
  469. name: "Vietnam",
  470. value: 190.2
  471. },
  472. {
  473. name: "United Arab Emirates",
  474. value: 201.1
  475. },
  476. {
  477. name: "Malaysia",
  478. value: 227.5
  479. },
  480. {
  481. name: "Kazakhstan",
  482. value: 236.2
  483. },
  484. {
  485. name: "Thailand",
  486. value: 272
  487. },
  488. {
  489. name: "Taiwan",
  490. value: 276.7
  491. },
  492. {
  493. name: "Indonesia",
  494. value: 453
  495. },
  496. {
  497. name: "Saudi Arabia",
  498. value: 494.8
  499. },
  500. {
  501. name: "Japan",
  502. value: 1278.9
  503. },
  504. {
  505. name: "China",
  506. value: 10540.8
  507. },
  508. {
  509. name: "India",
  510. value: 2341.9
  511. },
  512. {
  513. name: "Russia",
  514. value: 1766.4
  515. },
  516. {
  517. name: "Iran",
  518. value: 618.2
  519. },
  520. {
  521. name: "Korea",
  522. value: 610.1
  523. }]
  524. }],
  525. responsive: {
  526. rules: [{
  527. condition: {
  528. maxWidth: 500
  529. },
  530. chartOptions: {
  531. legend: {
  532. align: 'right',
  533. verticalAlign: 'middle',
  534. layout: 'vertical'
  535. }
  536. }
  537. }]
  538. }
  539. });
  540. </script>
  541. </body>
  542. </html>