/xhprof_lib/templates/chart.phtml

  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                }],
 47                
 48                yAxis: [
 49                { // Primary yAxis
 50                    labels:
 51                    {   
 52                        formatter: function() {
 53                            return this.value;
 54                        },
 55                        style: {
 56                            color: '#89A54E'
 57                        }
 58                    },
 59                    title: {
 60                        text: 'Peak Memory Usage',
 61                        style: {
 62                            color: '#89A54E'
 63                        },
 64                        margin: 80
 65                    },
 66                    opposite: true
 67                    
 68                }, { // Secondary yAxis
 69                    title: {
 70                        text: 'CPU',
 71                        margin: 50,
 72                        style: {
 73                            color: '#4572A7'
 74                        }
 75                    },
 76                    labels: {
 77                        formatter: function() {
 78                            return this.value;
 79                        },
 80                        style: {
 81                            color: '#4572A7'
 82                        }
 83                    }
 84                    
 85                }, { // Tertiary yAxis
 86                    title: {
 87                        text: 'Wall Time (ms)',
 88                        margin: 80,
 89                        style: {
 90                            color: '#AA4643'
 91                        }
 92                    },
 93                    labels: {
 94                        formatter: function() {
 95                            return this.value;
 96                        },
 97                        style: {
 98                            color: '#AA4643'
 99                        }
100                    },
101                    opposite: true,
102                    offset: 100
103                }],
104                tooltip: {
105                    formatter: function() {
106                        var unit = {
107                            '': '',
108                            '': '',
109                            '': ''
110                        }[this.series.name];
111                          
112                        return '<b>'+ this.series.name +'</b><br/><br/>' + this.y +'';
113                    }
114                },
115                legend: {
116                    layout: 'vertical',
117                    style: {
118                        left: '120px',
119                        bottom: 'auto',
120                        right: 'auto',
121                        top: '90px'
122                    },
123                    backgroundColor: '#FFFFFF'
124                },
125                plotOptions: {
126                      series: {
127                        lineWidth: 1,
128                          point: {
129                            events: {
130                                'click': function() {
131                                      
132                                      if (this.series.data.length > 1)  
133                                      {
134                                        var runid = (this.category).split(" ");
135                                        document.location = '?run=' + runid[2];               
136                                      }                                   
137                                }
138                            }
139                        }
140                    }
141                },                     
142                series: [{
143                    name: 'CPU',
144                    color: '#4572A7',
145                    type: 'line',
146                    yAxis: 1,
147                    data: [<?php echo $cpuJS;?>],
148                                 
149                },{
150                    name: 'Wall Time',
151                    type: 'line',
152                    color: '#AA4643',
153                    yAxis: 2,
154                    data: [<?php echo $wtJS;?>]        
155                
156                },{
157                    name: 'Peak Memory Usage',
158                    color: '#89A54E',
159                    type: 'line',
160                    data: [<?php echo $pmuJS;?>,]        
161                }]
162              });            
163            
164        });
165</script>