index.htm 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. max-width: 800px;
  10. height: 400px;
  11. margin: 1em auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="../../code/highcharts.js"></script>
  17. <script src="../../code/modules/histogram-bellcurve.js"></script>
  18. <div id="container"></div>
  19. <script type="text/javascript">
  20. var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
  21. 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
  22. 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
  23. 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
  24. 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
  25. 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
  26. 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
  27. 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
  28. 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
  29. 3.2, 3.3, 3, 2.5, 3, 3.4, 3];
  30. Highcharts.chart('container', {
  31. title: {
  32. text: 'Bell curve'
  33. },
  34. xAxis: [{
  35. title: {
  36. text: 'Data'
  37. },
  38. alignTicks: false
  39. }, {
  40. title: {
  41. text: 'Bell curve'
  42. },
  43. alignTicks: false,
  44. opposite: true
  45. }],
  46. yAxis: [{
  47. title: { text: 'Data' }
  48. }, {
  49. title: { text: 'Bell curve' },
  50. opposite: true
  51. }],
  52. series: [{
  53. name: 'Bell curve',
  54. type: 'bellcurve',
  55. xAxis: 1,
  56. yAxis: 1,
  57. baseSeries: 1,
  58. zIndex: -1
  59. }, {
  60. name: 'Data',
  61. type: 'scatter',
  62. data: data,
  63. marker: {
  64. radius: 1.5
  65. }
  66. }]
  67. });
  68. </script>
  69. </body>
  70. </html>