js/tbl_chart.js

   1 var chart_xaxis_idx = -1;
   2 var chart_series;
   3 var chart_series_index = -1;
   4
   5 $(document).ready(function() {
   6     var currentChart = null;
   7     var chart_data = jQuery.parseJSON($('#querychart').html());
   8     chart_series = 'columns';
   9     chart_xaxis_idx = $('select[name="chartXAxis"]').attr('value');
  10
  11     $('#resizer').resizable({
  12         minHeight:240,
  13         minWidth:300,
  14         // On resize, set the chart size to that of the
  15         // resizer minus padding. If your chart has a lot of data or other
  16         // content, the redrawing might be slow. In that case, we recommend
  17         // that you use the 'stop' event instead of 'resize'.
  18         resize: function() {
  19             currentChart.setSize(
  20                 this.offsetWidth - 20,
  21                 this.offsetHeight - 20,
  22                 false
  23             );
  24         }
  25     });
  26
  27     var currentSettings = {
  28         chart: {
  29             type: 'line',
  30             width: $('#resizer').width() - 20,
  31             height: $('#resizer').height() - 20
  32         },
  33         xAxis: {
  34             title: { text: $('input[name="xaxis_label"]').attr('value') }
  35         },
  36         yAxis: {
  37             title: { text: $('input[name="yaxis_label"]').attr('value') }
  38         },
  39         title: {
  40             text: $('input[name="chartTitle"]').attr('value'),
  41             margin:20
  42         },
  43         plotOptions: {
  44             series: {}
  45         }
  46     }
  47
  48     $('#querychart').html('');
  49
  50     $('input[name="chartType"]').click(function() {
  51         currentSettings.chart.type = $(this).attr('value');
  52
  53         drawChart();
  54
  55         if($(this).attr('value') == 'bar' || $(this).attr('value') == 'column')
  56             $('span.barStacked').show();
  57         else
  58             $('span.barStacked').hide();
  59     });
  60
  61     $('input[name="barStacked"]').click(function() {
  62         if(this.checked)
  63             $.extend(true,currentSettings,{ plotOptions: { series: { stacking:'normal' } } });
  64         else
  65             $.extend(true,currentSettings,{ plotOptions: { series: { stacking:null } } });
  66         drawChart();
  67     });
  68
  69     $('input[name="chartTitle"]').keyup(function() {
  70         var title = $(this).attr('value');
  71         if(title.length == 0) title = ' ';
  72         currentChart.setTitle({ text: title });
  73     });
  74
  75     $('select[name="chartXAxis"]').change(function() {
  76         chart_xaxis_idx = this.value;
  77         drawChart();
  78     });
  79     $('select[name="chartSeries"]').change(function() {
  80         chart_series = this.value;
  81         chart_series_index = this.selectedIndex;
  82         drawChart();
  83     });
  84
  85     /* Sucks, we cannot just set axis labels, we have to redraw the chart completely */
  86     $('input[name="xaxis_label"]').keyup(function() {
  87         currentSettings.xAxis.title.text = $(this).attr('value');
  88         drawChart(true);
  89     });
  90     $('input[name="yaxis_label"]').keyup(function() {
  91         currentSettings.yAxis.title.text = $(this).attr('value');
  92         drawChart(true);
  93     });
  94
  95     function drawChart(noAnimation) {
  96         currentSettings.chart.width = $('#resizer').width() - 20;
  97         currentSettings.chart.height = $('#resizer').height() - 20;
  98
  99         if(currentChart != null) currentChart.destroy();
 100
 101         if(noAnimation) currentSettings.plotOptions.series.animation = false;
 102         currentChart = PMA_queryChart(chart_data,currentSettings);
 103         if(noAnimation) currentSettings.plotOptions.series.animation = true;
 104     }
 105
 106     drawChart();
 107     $('#querychart').show();
 108 });
 109
 110 function in_array(element,array)
 111 {
 112     for(var i=0; i < array.length; i++)
 113         if(array[i] == element) return true;
 114     return false;
 115 }
 116
 117 function PMA_queryChart(data,passedSettings)
 118 {
 119     if($('#querychart').length == 0) return;
 120
 121     var columnNames = Array();
 122
 123     var series = new Array();
 124     var xaxis = { type: 'linear' };
 125     var yaxis = new Object();
 126
 127     $.each(data[0],function(index,element) {
 128         columnNames.push(index);
 129     });
 130
 131     switch(passedSettings.chart.type) {
 132         case 'column':
 133         case 'spline':
 134         case 'line':
 135         case 'bar':
 136             xaxis.categories = new Array();
 137
 138             if(chart_series == 'columns') {
 139                 var j = 0;
 140                 for(var i=0; i<columnNames.length; i++)
 141                     if(i != chart_xaxis_idx) {
 142                         series[j] = new Object();
 143                         series[j].data = new Array();
 144                         series[j].name = columnNames[i];
 145
 146                         $.each(data,function(key,value) {
 147                             series[j].data.push(parseFloat(value[columnNames[i]]));
 148                             if( j== 0 && chart_xaxis_idx != -1 && ! xaxis.categories[value[columnNames[chart_xaxis_idx]]])
 149                                 xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
 150                         });
 151                         j++;
 152                     }
 153             } else {
 154                 var j=0;
 155                 var seriesIndex = new Object();
 156                 // Get series types and build series object from the query data
 157                 $.each(data,function(index,element) {
 158                     var contains = false;
 159                     for(var i=0; i < series.length; i++)
 160                         if(series[i].name == element[chart_series]) contains = true;
 161
 162                     if(!contains) {
 163                         seriesIndex[element[chart_series]] = j;
 164                         series[j] = new Object();
 165                         series[j].data = new Array();
 166                         series[j].name = element[chart_series]; // columnNames[i];
 167                         j++;
 168                     }
 169                 });
 170
 171                 var type;
 172                 // Get series points from query data
 173                 $.each(data,function(key,value) {
 174                     type = value[chart_series];
 175                     series[seriesIndex[type]].data.push(parseFloat(value[columnNames[0]]));
 176
 177                     if( !in_array(value[columnNames[chart_xaxis_idx]],xaxis.categories))
 178                         xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
 179                 });
 180             }
 181
 182
 183
 184             if(columnNames.length == 2)
 185                 yaxis.title = { text: columnNames[0] };
 186             break;
 187
 188         case 'pie':
 189             series[0] = new Object();
 190             series[0].data = new Array();
 191             $.each(data,function(key,value) {
 192                     series[0].data.push({
 193                         name: value[columnNames[chart_xaxis_idx]],
 194                         y: parseFloat(value[columnNames[0]])
 195                     });
 196                 });
 197             break;
 198     }
 199
 200     // Prevent the user from seeing the JSON code
 201     $('div#profilingchart').html('').show();
 202
 203     var settings = {
 204         chart: {
 205             renderTo: 'querychart'
 206         },
 207         title: {
 208             text: '',
 209             margin: 0
 210         },
 211         series: series,
 212         xAxis: xaxis,
 213         yAxis: yaxis,
 214         plotOptions: {
 215             pie: {
 216                 allowPointSelect: true,
 217                 cursor: 'pointer',
 218                 dataLabels: {
 219                     enabled: true,
 220                     distance: 35,
 221                     formatter: function() {
 222                         return '<b>'+ this.point.name +'</b><br/>'+ Highcharts.numberFormat(this.percentage, 2) +' %';
 223                    }
 224                 }
 225             }
 226         },
 227         tooltip: {
 228             formatter: function() {
 229                 if(this.point.name) return '<b>'+this.series.name+'</b><br/>'+this.point.name+'<br/>'+this.y;
 230                 return '<b>'+this.series.name+'</b><br/>'+this.y;
 231             }
 232         }
 233     };
 234
 235     if(passedSettings.chart.type == 'pie')
 236         settings.tooltip.formatter = function() { return '<b>'+columnNames[0]+'</b><br/>'+this.y; }
 237
 238     // Overwrite/Merge default settings with passedsettings
 239     $.extend(true,settings,passedSettings);
 240
 241     return PMA_createChart(settings);
 242 }