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.

135 lines
4.0 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. // Get the CSV and create the chart
  13. $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
  14. $('#container').highcharts({
  15. data: {
  16. csv: csv
  17. },
  18. title: {
  19. text: 'Daily visits at www.highcharts.com'
  20. },
  21. subtitle: {
  22. text: 'Source: Google Analytics'
  23. },
  24. xAxis: {
  25. tickInterval: 7 * 24 * 3600 * 1000, // one week
  26. tickWidth: 0,
  27. gridLineWidth: 1,
  28. labels: {
  29. align: 'left',
  30. x: 3,
  31. y: -3
  32. }
  33. },
  34. yAxis: [{ // left y axis
  35. title: {
  36. text: null
  37. },
  38. labels: {
  39. align: 'left',
  40. x: 3,
  41. y: 16,
  42. format: '{value:.,0f}'
  43. },
  44. showFirstLabel: false
  45. }, { // right y axis
  46. linkedTo: 0,
  47. gridLineWidth: 0,
  48. opposite: true,
  49. title: {
  50. text: null
  51. },
  52. labels: {
  53. align: 'right',
  54. x: -3,
  55. y: 16,
  56. format: '{value:.,0f}'
  57. },
  58. showFirstLabel: false
  59. }],
  60. legend: {
  61. align: 'left',
  62. verticalAlign: 'top',
  63. y: 20,
  64. floating: true,
  65. borderWidth: 0
  66. },
  67. tooltip: {
  68. shared: true,
  69. crosshairs: true
  70. },
  71. plotOptions: {
  72. series: {
  73. cursor: 'pointer',
  74. point: {
  75. events: {
  76. click: function (e) {
  77. hs.htmlExpand(null, {
  78. pageOrigin: {
  79. x: e.pageX || e.clientX,
  80. y: e.pageY || e.clientY
  81. },
  82. headingText: this.series.name,
  83. maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
  84. this.y + ' visits',
  85. width: 200
  86. });
  87. }
  88. }
  89. },
  90. marker: {
  91. lineWidth: 1
  92. }
  93. }
  94. },
  95. series: [{
  96. name: 'All visits',
  97. lineWidth: 4,
  98. marker: {
  99. radius: 4
  100. }
  101. }, {
  102. name: 'New visitors'
  103. }]
  104. });
  105. });
  106. });
  107. </script>
  108. </head>
  109. <body>
  110. <script src="../../js/highcharts.js"></script>
  111. <script src="../../js/modules/data.js"></script>
  112. <script src="../../js/modules/exporting.js"></script>
  113. <!-- Additional files for the Highslide popup effect -->
  114. <script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide-full.min.js"></script>
  115. <script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
  116. <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/joomla/media/com_demo/highslide.css" />
  117. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  118. </body>
  119. </html>