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.

94 lines
2.9 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. // Data gathered from http://populationpyramid.net/germany/2015/
  12. $(function () {
  13. // Age categories
  14. var categories = ['0-4', '5-9', '10-14', '15-19',
  15. '20-24', '25-29', '30-34', '35-39', '40-44',
  16. '45-49', '50-54', '55-59', '60-64', '65-69',
  17. '70-74', '75-79', '80-84', '85-89', '90-94',
  18. '95-99', '100 + '];
  19. $(document).ready(function () {
  20. $('#container').highcharts({
  21. chart: {
  22. type: 'bar'
  23. },
  24. title: {
  25. text: 'Population pyramid for Germany, 2015'
  26. },
  27. subtitle: {
  28. text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
  29. },
  30. xAxis: [{
  31. categories: categories,
  32. reversed: false,
  33. labels: {
  34. step: 1
  35. }
  36. }, { // mirror axis on right side
  37. opposite: true,
  38. reversed: false,
  39. categories: categories,
  40. linkedTo: 0,
  41. labels: {
  42. step: 1
  43. }
  44. }],
  45. yAxis: {
  46. title: {
  47. text: null
  48. },
  49. labels: {
  50. formatter: function () {
  51. return Math.abs(this.value) + '%';
  52. }
  53. }
  54. },
  55. plotOptions: {
  56. series: {
  57. stacking: 'normal'
  58. }
  59. },
  60. tooltip: {
  61. formatter: function () {
  62. return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
  63. 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
  64. }
  65. },
  66. series: [{
  67. name: 'Male',
  68. data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
  69. -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
  70. -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
  71. }, {
  72. name: 'Female',
  73. data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
  74. 3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
  75. 1.8, 1.2, 0.6, 0.1, 0.0]
  76. }]
  77. });
  78. });
  79. });
  80. </script>
  81. </head>
  82. <body>
  83. <script src="../../js/highcharts.js"></script>
  84. <script src="../../js/modules/exporting.js"></script>
  85. <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
  86. </body>
  87. </html>