1 var chart_xaxis_idx
= -1;
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({
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'.
20 this.offsetWidth
- 20,
21 this.offsetHeight
- 20,
27 var currentSettings
= {
30 width
: $('#resizer').width() - 20,
31 height
: $('#resizer').height() - 20
34 title
: { text
: $('input[name="xaxis_label"]').attr('value') }
37 title
: { text
: $('input[name="yaxis_label"]').attr('value') }
40 text
: $('input[name="chartTitle"]').attr('value'),
48 $('#querychart').html('');
50 $('input[name="chartType"]').click(function() {
51 currentSettings
.chart
.type
= $(this).attr('value');
55 if($(this).attr('value') == 'bar' || $(this).attr('value') == 'column')
56 $('span.barStacked').show();
58 $('span.barStacked').hide();
61 $('input[name="barStacked"]').click(function() {
63 $.extend(true,currentSettings
,{ plotOptions
: { series
: { stacking
:'normal' } } });
65 $.extend(true,currentSettings
,{ plotOptions
: { series
: { stacking
:null } } });
69 $('input[name="chartTitle"]').keyup(function() {
70 var title
= $(this).attr('value');
71 if(title
.length
== 0) title
= ' ';
72 currentChart
.setTitle({ text
: title
});
75 $('select[name="chartXAxis"]').change(function() {
76 chart_xaxis_idx
= this.value
;
79 $('select[name="chartSeries"]').change(function() {
80 chart_series
= this.value
;
81 chart_series_index
= this.selectedIndex
;
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');
90 $('input[name="yaxis_label"]').keyup(function() {
91 currentSettings
.yAxis
.title
.text
= $(this).attr('value');
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;
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;
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
);
131 switch(passedSettings
.chart
.type
) {
136 xaxis
.categories
= new Array();
138 if(chart_series
== 'columns') {
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
]]);
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;
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];
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
]]);
184 if(columnNames
.length
== 2)
185 yaxis
.title
= { text
: columnNames
[0] };
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]])
200 // Prevent the user from seeing the JSON code
201 $('div#profilingchart').html('').show();
205 renderTo
: 'querychart'
216 allowPointSelect
: true,
221 formatter: function() {
222 return '<b>'+ this.point
.name
+'</b><br/>'+ Highcharts
.numberFormat(this.percentage
, 2) +' %';
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
;
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
);