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     for(var i=0; i < array.length; i++)
 112         if(array[i] == element) return true;
 113     return false;
 114 }
 115
 116 function PMA_queryChart(data,passedSettings) {
 117     if($('#querychart').length == 0) return;
 118
 119     var columnNames = Array();
 120
 121     var series = new Array();
 122     var xaxis = { type: 'linear' };
 123     var yaxis = new Object();
 124
 125     $.each(data[0],function(index,element) {
 126         columnNames.push(index);
 127     });
 128
 129     switch(passedSettings.chart.type) {
 130         case 'column':
 131         case 'spline':
 132         case 'line':
 133         case 'bar':
 134             xaxis.categories = new Array();
 135
 136             if(chart_series == 'columns') {
 137                 var j = 0;
 138                 for(var i=0; i<columnNames.length; i++)
 139                     if(i != chart_xaxis_idx) {
 140                         series[j] = new Object();
 141                         series[j].data = new Array();
 142                         series[j].name = columnNames[i];
 143
 144                         $.each(data,function(key,value) {
 145                             series[j].data.push(parseFloat(value[columnNames[i]]));
 146                             if( j== 0 && chart_xaxis_idx != -1 && ! xaxis.categories[value[columnNames[chart_xaxis_idx]]])
 147                                 xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
 148                         });
 149                         j++;
 150                     }
 151             } else {
 152                 var j=0;
 153                 var seriesIndex = new Object();
 154                 // Get series types and build series object from the query data
 155                 $.each(data,function(index,element) {
 156                     var contains = false;
 157                     for(var i=0; i < series.length; i++)
 158                         if(series[i].name == element[chart_series]) contains = true;
 159
 160                     if(!contains) {
 161                         seriesIndex[element[chart_series]] = j;
 162                         series[j] = new Object();
 163                         series[j].data = new Array();
 164                         series[j].name = element[chart_series]; // columnNames[i];
 165                         j++;
 166                     }
 167                 });
 168
 169                 var type;
 170                 // Get series points from query data
 171                 $.each(data,function(key,value) {
 172                     type = value[chart_series];
 173                     series[seriesIndex[type]].data.push(parseFloat(value[columnNames[0]]));
 174
 175                     if( !in_array(value[columnNames[chart_xaxis_idx]],xaxis.categories))
 176                         xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
 177                 });
 178             }
 179
 180
 181
 182             if(columnNames.length == 2)
 183                 yaxis.title = { text: columnNames[0] };
 184             break;
 185
 186         case 'pie':
 187             series[0] = new Object();
 188             series[0].data = new Array();
 189             $.each(data,function(key,value) {
 190                     series[0].data.push({
 191                         name: value[columnNames[chart_xaxis_idx]],
 192                         y: parseFloat(value[columnNames[0]])
 193                     });
 194                 });
 195             break;
 196     }
 197
 198     // Prevent the user from seeing the JSON code
 199     $('div#profilingchart').html('').show();
 200
 201     var settings = {
 202         chart: {
 203             renderTo: 'querychart'
 204         },
 205         title: {
 206             text: '',
 207             margin: 0
 208         },
 209         series: series,
 210         xAxis: xaxis,
 211         yAxis: yaxis,
 212         plotOptions: {
 213             pie: {
 214                 allowPointSelect: true,
 215                 cursor: 'pointer',
 216                 dataLabels: {
 217                     enabled: true,
 218                     distance: 35,
 219                     formatter: function() {
 220                         return '<b>'+ this.point.name +'</b><br/>'+ Highcharts.numberFormat(this.percentage, 2) +' %';
 221                    }
 222                 }
 223             }
 224         },
 225         tooltip: {
 226             formatter: function() {
 227                 if(this.point.name) return '<b>'+this.series.name+'</b><br/>'+this.point.name+'<br/>'+this.y;
 228                 return '<b>'+this.series.name+'</b><br/>'+this.y;
 229             }
 230         }
 231     };
 232
 233     if(passedSettings.chart.type == 'pie')
 234         settings.tooltip.formatter = function() { return '<b>'+columnNames[0]+'</b><br/>'+this.y; }
 235
 236     // Overwrite/Merge default settings with passedsettings
 237     $.extend(true,settings,passedSettings);
 238
 239     return PMA_createChart(settings);
 240 }