Translation update done using Pootle.
[phpmyadmin.git] / js / tbl_chart.js
blobbec9a5cc59cb4d013bd481d13b3ff8b083f9f96d
1 var chart_xaxis_idx = -1;
2 var chart_series;
3 var chart_series_index = -1;
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');
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     });
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     }
48     $('#querychart').html('');
50     $('input[name="chartType"]').click(function() {
51         currentSettings.chart.type = $(this).attr('value');
53         drawChart();
55         if($(this).attr('value') == 'bar' || $(this).attr('value') == 'column')
56             $('span.barStacked').show();
57         else
58             $('span.barStacked').hide();
59     });
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     });
69     $('input[name="chartTitle"]').keyup(function() {
70         var title = $(this).attr('value');
71         if(title.length == 0) title = ' ';
72         currentChart.setTitle({ text: title });
73     });
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     });
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     });
95     function drawChart(noAnimation) {
96         currentSettings.chart.width = $('#resizer').width() - 20;
97         currentSettings.chart.height = $('#resizer').height() - 20;
99         if(currentChart != null) currentChart.destroy();
101         if(noAnimation) currentSettings.plotOptions.series.animation = false;
102         currentChart = PMA_queryChart(chart_data,currentSettings);
103         if(noAnimation) currentSettings.plotOptions.series.animation = true;
104     }
106     drawChart();
107     $('#querychart').show();
110 function in_array(element,array)
112     for(var i=0; i < array.length; i++)
113         if(array[i] == element) return true;
114     return false;
117 function PMA_queryChart(data,passedSettings)
119     if($('#querychart').length == 0) return;
121     var columnNames = Array();
123     var series = new Array();
124     var xaxis = { type: 'linear' };
125     var yaxis = new Object();
127     $.each(data[0],function(index,element) {
128         columnNames.push(index);
129     });
131     switch(passedSettings.chart.type) {
132         case 'column':
133         case 'spline':
134         case 'line':
135         case 'bar':
136             xaxis.categories = new Array();
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];
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;
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                 });
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]]));
177                     if( !in_array(value[columnNames[chart_xaxis_idx]],xaxis.categories))
178                         xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
179                 });
180             }
184             if(columnNames.length == 2)
185                 yaxis.title = { text: columnNames[0] };
186             break;
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     }
200     // Prevent the user from seeing the JSON code
201     $('div#profilingchart').html('').show();
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     };
235     if(passedSettings.chart.type == 'pie')
236         settings.tooltip.formatter = function() { return '<b>'+columnNames[0]+'</b><br/>'+this.y; }
238     // Overwrite/Merge default settings with passedsettings
239     $.extend(true,settings,passedSettings);
241     return PMA_createChart(settings);