/xhprof_lib/templates/chart.phtml

http://github.com/preinheimer/xhprof · Unknown · 165 lines · 156 code · 9 blank · 0 comment · 0 complexity · f082b6853bb5cd8809c93b97c5890617 MD5 · raw file

  1. <script type="text/javascript">
  2. var chart;
  3. $(document).ready(function() {
  4. chart = new Highcharts.Chart({
  5. chart: {
  6. renderTo: 'container',
  7. margin: [80, 200, 60, 100],
  8. zoomType: 'xy',
  9. events:
  10. {
  11. click: function(e)
  12. {
  13. // find the clicked values and the series
  14. var x = e.xAxis[0].value,
  15. y = e.yAxis[0].value,
  16. series = this.series[0];
  17. }
  18. }
  19. },
  20. credits: {
  21. enabled:false
  22. },
  23. title: {
  24. text: 'Data for XH Gui',
  25. style: {
  26. margin: '10px 0 0 0' // center it
  27. }
  28. },
  29. subtitle: {
  30. text: 'Source: XH Gui',
  31. style: {
  32. margin: '0 0 0 0' // center it
  33. }
  34. },
  35. xAxis: [{
  36. categories: [<?php echo $dateidsJS;?>],
  37. labels: {
  38. formatter: function() {
  39. var date = (this.value).split(" ");
  40. return date[0];
  41. },
  42. rotation: -45,
  43. align: 'right',
  44. }
  45. }],
  46. yAxis: [
  47. { // Primary yAxis
  48. labels:
  49. {
  50. formatter: function() {
  51. return this.value;
  52. },
  53. style: {
  54. color: '#89A54E'
  55. }
  56. },
  57. title: {
  58. text: 'Peak Memory Usage',
  59. style: {
  60. color: '#89A54E'
  61. },
  62. margin: 80
  63. },
  64. opposite: true
  65. }, { // Secondary yAxis
  66. title: {
  67. text: 'CPU',
  68. margin: 50,
  69. style: {
  70. color: '#4572A7'
  71. }
  72. },
  73. labels: {
  74. formatter: function() {
  75. return this.value;
  76. },
  77. style: {
  78. color: '#4572A7'
  79. }
  80. }
  81. }, { // Tertiary yAxis
  82. title: {
  83. text: 'Wall Time (ms)',
  84. margin: 80,
  85. style: {
  86. color: '#AA4643'
  87. }
  88. },
  89. labels: {
  90. formatter: function() {
  91. return this.value;
  92. },
  93. style: {
  94. color: '#AA4643'
  95. }
  96. },
  97. opposite: true,
  98. offset: 100
  99. }],
  100. tooltip: {
  101. formatter: function() {
  102. var unit = {
  103. '': '',
  104. '': '',
  105. '': ''
  106. }[this.series.name];
  107. return '<b>'+ this.series.name +'</b><br/><br/>' + this.y +'';
  108. }
  109. },
  110. legend: {
  111. layout: 'vertical',
  112. style: {
  113. left: '120px',
  114. bottom: 'auto',
  115. right: 'auto',
  116. top: '90px'
  117. },
  118. backgroundColor: '#FFFFFF'
  119. },
  120. plotOptions: {
  121. series: {
  122. lineWidth: 1,
  123. point: {
  124. events: {
  125. 'click': function() {
  126. if (this.series.data.length > 1)
  127. {
  128. var runid = (this.category).split(" ");
  129. document.location = '?run=' + runid[2];
  130. }
  131. }
  132. }
  133. }
  134. }
  135. },
  136. series: [{
  137. name: 'CPU',
  138. color: '#4572A7',
  139. type: 'line',
  140. yAxis: 1,
  141. data: [<?php echo $cpuJS;?>],
  142. },{
  143. name: 'Wall Time',
  144. type: 'line',
  145. color: '#AA4643',
  146. yAxis: 2,
  147. data: [<?php echo $wtJS;?>]
  148. },{
  149. name: 'Peak Memory Usage',
  150. color: '#89A54E',
  151. type: 'line',
  152. data: [<?php echo $pmuJS;?>,]
  153. }]
  154. });
  155. });
  156. </script>