index.htm 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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: 300px;
  10. max-width: 800px;
  11. height: 300px;
  12. margin: 1em auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../../code/highcharts.js"></script>
  18. <script src="../../code/modules/xrange.js"></script>
  19. <script src="../../code/modules/exporting.js"></script>
  20. <div id="container"></div>
  21. <script type="text/javascript">
  22. Highcharts.chart('container', {
  23. chart: {
  24. type: 'xrange'
  25. },
  26. title: {
  27. text: 'Highcharts X-range'
  28. },
  29. xAxis: {
  30. type: 'datetime'
  31. },
  32. yAxis: {
  33. title: {
  34. text: ''
  35. },
  36. categories: ['Prototyping', 'Development', 'Testing'],
  37. reversed: true
  38. },
  39. series: [{
  40. name: 'Project 1',
  41. // pointPadding: 0,
  42. // groupPadding: 0,
  43. borderColor: 'gray',
  44. pointWidth: 20,
  45. data: [{
  46. x: Date.UTC(2014, 10, 21),
  47. x2: Date.UTC(2014, 11, 2),
  48. y: 0,
  49. partialFill: 0.25
  50. }, {
  51. x: Date.UTC(2014, 11, 2),
  52. x2: Date.UTC(2014, 11, 5),
  53. y: 1
  54. }, {
  55. x: Date.UTC(2014, 11, 8),
  56. x2: Date.UTC(2014, 11, 9),
  57. y: 2
  58. }, {
  59. x: Date.UTC(2014, 11, 9),
  60. x2: Date.UTC(2014, 11, 19),
  61. y: 1
  62. }, {
  63. x: Date.UTC(2014, 11, 10),
  64. x2: Date.UTC(2014, 11, 23),
  65. y: 2
  66. }],
  67. dataLabels: {
  68. enabled: true
  69. }
  70. }]
  71. });
  72. </script>
  73. </body>
  74. </html>