|
1
|
<!DOCTYPE html
|
|
2
|
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
3
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
4
|
<html>
|
|
5
|
<?php
|
|
6
|
|
|
7
|
require_once('controller.php');
|
|
8
|
$controller = new Controller(false);
|
|
9
|
|
|
10
|
if(!isset($_GET['com'])) {
|
|
11
|
echo "no command given";
|
|
12
|
return;
|
|
13
|
}
|
|
14
|
if($_GET['com'] != "query"){
|
|
15
|
echo "unknown command code";
|
|
16
|
return;
|
|
17
|
}
|
|
18
|
|
|
19
|
//make the query
|
|
20
|
if(!isset($_GET['persistent'])){
|
|
21
|
|
|
22
|
$persistent="true";
|
|
23
|
}
|
|
24
|
else
|
|
25
|
{
|
|
26
|
$persistent="false";
|
|
27
|
}
|
|
28
|
$selectedData = json_encode($_GET['data']);
|
|
29
|
$resp = $controller->makeQuery('chart',$persistent);
|
|
30
|
|
|
31
|
//echo "selected ".json_encode($_GET['data'],JSON_NUMERIC_CHECK);
|
|
32
|
//each filter to be included get its data and build the json object for the javascript
|
|
33
|
//echo "will include ".count($_GET['data']['incfilters'])." filters";
|
|
34
|
|
|
35
|
$myData = json_decode($_GET['data']);
|
|
36
|
|
|
37
|
if(isset($myData->incfilters))
|
|
38
|
$myfilters = $myData->incfilters;
|
|
39
|
else
|
|
40
|
$myfilters = array();
|
|
41
|
|
|
42
|
|
|
43
|
for($i=0;$i<count($myfilters);$i++){
|
|
44
|
if(isset($myfilters[$i]->values) && $myfilters[$i]->values=='all'){
|
|
45
|
$temp = $controller->getFilterData($myData->table,$myfilters[$i]->name);
|
|
46
|
if(!is_array($temp)){
|
|
47
|
$temp = json_decode($temp);
|
|
48
|
}
|
|
49
|
//print_r($temp->data);
|
|
50
|
$myfilters[$i]->values = $temp->data;
|
|
51
|
}
|
|
52
|
}
|
|
53
|
|
|
54
|
?>
|
|
55
|
<head>
|
|
56
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
57
|
<title>chart</title>
|
|
58
|
<!-- Include JQuery Core-->
|
|
59
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
|
|
60
|
<script type="text/javascript" src="./js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
|
|
61
|
|
|
62
|
<!-- HighCharts -->
|
|
63
|
<script src="./js/Highcharts-4.0.1/js/highcharts.js" type="text/javascript"></script>
|
|
64
|
<script src="./js/Highcharts-4.0.1/js/modules/exporting.js" type="text/javascript"></script>
|
|
65
|
|
|
66
|
<script src="./js/themes9.js" type="text/javascript"></script>
|
|
67
|
<!--Styles-->
|
|
68
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
|
|
69
|
<link type="text/css" href="./js/jquery/css/start/jquery-ui-1.8.20.custom.css" />
|
|
70
|
<link type="text/css" href="./js/highcharts.css" rel="stylesheet" />
|
|
71
|
<link rel="stylesheet" href="js/filters.css" />
|
|
72
|
|
|
73
|
|
|
74
|
<script type='text/javascript'>
|
|
75
|
var chart;
|
|
76
|
var chart2;
|
|
77
|
var chartData;
|
|
78
|
var chartData2;
|
|
79
|
var chartDataFromServer;
|
|
80
|
var selectedData;
|
|
81
|
var filterData;
|
|
82
|
var myFilter;
|
|
83
|
//----------------- inits --------------------//
|
|
84
|
var wflag = <?php if(isset($_GET['w']) && $_GET['w']!='' && $_GET['w'][strlen($_GET['w'])-1] == '%'){ echo "true"; }
|
|
85
|
else{ echo "false"; }?>
|
|
86
|
|
|
87
|
var mywidth = <?php if(isset($_GET['w']) && $_GET['w']!=''){
|
|
88
|
if($_GET['w'][strlen($_GET['w'])-1] == '%'){
|
|
89
|
echo substr($_GET['w'],0,strlen($_GET['w'])-1);
|
|
90
|
|
|
91
|
}else{
|
|
92
|
if($_GET['w'][strlen($_GET['w'])-1] == 'x'){
|
|
93
|
echo substr($_GET['w'],0,strlen($_GET['w'])-2);
|
|
94
|
}else echo $_GET['w'];
|
|
95
|
}
|
|
96
|
}else echo '700'; ?>;
|
|
97
|
|
|
98
|
var hflag = <?php if(isset($_GET['h']) && $_GET['h']!='' && $_GET['h'][strlen($_GET['h'])-1] == '%'){ echo "true"; }
|
|
99
|
else{ echo "false"; }?>
|
|
100
|
|
|
101
|
var myheight = <?php if(isset($_GET['h']) && $_GET['h']!=''){
|
|
102
|
if($_GET['h'][strlen($_GET['h'])-1] == '%'){
|
|
103
|
echo substr($_GET['h'],0,strlen($_GET['h'])-1);
|
|
104
|
}else{
|
|
105
|
if($_GET['w'][strlen($_GET['h'])-1] == 'x'){
|
|
106
|
echo substr($_GET['h'],0,strlen($_GET['h'])-2);
|
|
107
|
} else echo $_GET['h'];
|
|
108
|
}
|
|
109
|
}else echo '400'; ?>;
|
|
110
|
|
|
111
|
//----------------- document ready --------------------//
|
|
112
|
$('document').ready(function(){
|
|
113
|
chartDataFromServer = <?php echo $resp ?>;
|
|
114
|
selectedData = $.parseJSON(<?php echo $selectedData;?>);
|
|
115
|
filterData = <?php echo json_encode($myfilters);?>;
|
|
116
|
|
|
117
|
renderChart();
|
|
118
|
renderfilters();
|
|
119
|
controlsforfilters();
|
|
120
|
});
|
|
121
|
|
|
122
|
function renderChart(){
|
|
123
|
|
|
124
|
if(selectedData['in'] != undefined && selectedData['in'].length>0){
|
|
125
|
if(chartDataFromServer[0].plotOptions != undefined && chartDataFromServer[0].plotOptions.series != undefined){
|
|
126
|
chartDataFromServer[0].plotOptions.series.events = new Object();
|
|
127
|
chartDataFromServer[0].plotOptions.series.events.checkboxClick = function(event){if(event.checked == true) this.show(); else this.hide();};
|
|
128
|
}
|
|
129
|
if(chartDataFromServer[1].plotOptions != undefined && chartDataFromServer[1].plotOptions.series != undefined){
|
|
130
|
chartDataFromServer[1].plotOptions.series.events = new Object();
|
|
131
|
chartDataFromServer[1].plotOptions.series.events.checkboxClick = function(event){if(event.checked == true) this.show(); else this.hide();};
|
|
132
|
}
|
|
133
|
chartData = chartDataFromServer[0];
|
|
134
|
chartData2 = chartDataFromServer[1];
|
|
135
|
setSelections();
|
|
136
|
}
|
|
137
|
else{
|
|
138
|
if(chartDataFromServer.plotOptions != undefined && chartDataFromServer.plotOptions.series != undefined){
|
|
139
|
chartDataFromServer.plotOptions.series.events = new Object();
|
|
140
|
chartDataFromServer.plotOptions.series.events.checkboxClick = function(event){if(event.checked == true) this.show(); else this.hide();};
|
|
141
|
}
|
|
142
|
chartData = chartDataFromServer;
|
|
143
|
}
|
|
144
|
var formatter = chartData.xAxis.labels.formatter;
|
|
145
|
if(selectedData['emp'] == undefined)
|
|
146
|
selectedData['emp'] = new Array();
|
|
147
|
else{
|
|
148
|
chartData.xAxis.plotLines = new Array();
|
|
149
|
for(var e=0;e<selectedData['emp'].length;e++){
|
|
150
|
var line = new Object();
|
|
151
|
line.value = chartData['xAxis']['categories'].indexOf(selectedData['emp'][e]);
|
|
152
|
line.width = 1;
|
|
153
|
line.color = 'red';
|
|
154
|
line.dashStyle = 'dash';
|
|
155
|
line.zIndex = 100;
|
|
156
|
chartData.xAxis.plotLines.push(line);
|
|
157
|
}
|
|
158
|
}
|
|
159
|
|
|
160
|
if(selectedData['bands'] != undefined){
|
|
161
|
chartData['xAxis']['plotBands'] = new Array();
|
|
162
|
for(var b=0;b<selectedData['bands'].length;b++){
|
|
163
|
var band = new Object();
|
|
164
|
band.color = '#FCFFC5';
|
|
165
|
var from = chartData.xAxis.categories.indexOf(selectedData['bands'][b][0]);
|
|
166
|
var to = chartData.xAxis.categories.indexOf(selectedData['bands'][b][1]);
|
|
167
|
band.from = from;
|
|
168
|
band.to = (to==-1)? chartData.xAxis.categories.length:to;
|
|
169
|
band.zIndex = -100;
|
|
170
|
chartData.xAxis.plotBands.push(band);
|
|
171
|
}
|
|
172
|
}
|
|
173
|
|
|
174
|
if(selectedData['xStyle'] != undefined){
|
|
175
|
chartData.xAxis.labels = labelsforx(selectedData['xStyle'],selectedData['emp']);
|
|
176
|
}
|
|
177
|
else{
|
|
178
|
var temp = new Object(); temp['r'] = '-'; temp['s'] = '-'; temp['l'] = '-';
|
|
179
|
chartData.xAxis.labels = labelsforx(temp,selectedDatap['emp']);
|
|
180
|
}
|
|
181
|
|
|
182
|
//headers!!!!
|
|
183
|
if(typeof selectedData['title'] != 'undefined' && selectedData['title']!=''){
|
|
184
|
chartData.title = new Object();
|
|
185
|
chartData.title.text = selectedData['title'];
|
|
186
|
chartData.title.align = 'center';
|
|
187
|
}
|
|
188
|
else{
|
|
189
|
chartData.title.text = null;
|
|
190
|
}
|
|
191
|
if(selectedData['subtitle']!=''){
|
|
192
|
chartData.subtitle = new Object();
|
|
193
|
chartData.subtitle.text = selectedData['subtitle'];
|
|
194
|
}
|
|
195
|
else{
|
|
196
|
chartData.subtitle = null;
|
|
197
|
}
|
|
198
|
|
|
199
|
|
|
200
|
if(selectedData['fields'].length == 1 && selectedData['fields'][0]['type'] == 'pie'){
|
|
201
|
chartData.xAxis.title.text = null;
|
|
202
|
chartData.yAxis[0].title.text = null;
|
|
203
|
$("#zoommessage").hide();
|
|
204
|
}
|
|
205
|
|
|
206
|
//chartData.xAxis.title.text = selectedData['xaxis']['name'];
|
|
207
|
var today = new Date();
|
|
208
|
var dd = today.getDate();
|
|
209
|
var mm = today.getMonth()+1; //January is 0!
|
|
210
|
|
|
211
|
var yyyy = today.getFullYear();
|
|
212
|
chartData.credits.text = "from OpenAIRE via HighCharts (date: " + dd + "/" + mm + "/" + yyyy +")";
|
|
213
|
|
|
214
|
if(selectedData['stacking']!=undefined){
|
|
215
|
chartData['plotOptions']['column']['stacking'] = selectedData['stacking'];
|
|
216
|
chartData['plotOptions']['area']['stacking'] = selectedData['stacking'];
|
|
217
|
chartData['plotOptions']['areaspline']['stacking'] = selectedData['stacking'];
|
|
218
|
}
|
|
219
|
|
|
220
|
chartData.plotOptions['pie']['dataLabels']['formatter'] = function() {
|
|
221
|
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
|
|
222
|
};
|
|
223
|
|
|
224
|
if(chartData.series.length > 4){
|
|
225
|
chartData.legend.layout = 'horizontal';
|
|
226
|
chartData.legend.align = 'center';
|
|
227
|
chartData.legend.verticalAlign = 'bottom';
|
|
228
|
chartData.legend.x = null;
|
|
229
|
chartData.legend.y = null;
|
|
230
|
chartData.legend.floating = false;
|
|
231
|
//chartData.legend.itemStyle = new Object();
|
|
232
|
//chartData.legend.itemStyle.margin = "4px";
|
|
233
|
}
|
|
234
|
|
|
235
|
if(selectedData['type'] == 'scatter'){
|
|
236
|
if(selectedData['color'] == 'yes')
|
|
237
|
chartData.tooltip.formatter = function() { return '<b>'+ this.series.name +'</b><br/>'+ chartData['xAxis']['title']['text']+ ': '+ this.x +'<br/>'+ chartData['yAxis'][0]['title']['text']+': '+ this.y ;};
|
|
238
|
else if(selectedData['group'] != '')
|
|
239
|
chartData.tooltip.formatter = function() { return '<b>'+ this.point.name +'</b><br/>'+ chartData['xAxis']['title']['text']+ ': '+ this.x +'<br/>'+ chartData['yAxis'][0]['title']['text']+': '+ this.y ;};
|
|
240
|
else
|
|
241
|
chartData.tooltip.formatter = function() { return chartData['xAxis']['title']['text']+ ': '+ this.x +'<br/>'+ chartData['yAxis'][0]['title']['text']+': '+ this.y ;};
|
|
242
|
chartData['chart']['type'] = 'scatter';
|
|
243
|
}
|
|
244
|
else {
|
|
245
|
chartData.tooltip.percentageDecimals = 1;
|
|
246
|
chartData.tooltip.valueDecimals = 1;
|
|
247
|
if(selectedData['fields'][0]['type'] != 'pie'){
|
|
248
|
//chartData.tooltip.headerFormat = '<span style="font-size:10px">{point.key}</span><table>';
|
|
249
|
//chartData.tooltip.pointFormat = '<tr><td style="color:{series.color};padding:0">{series.name}:</td>'+'<td style="padding:0"><b>{point.y}</b></td></tr>';
|
|
250
|
//chartData.tooltip.footerFormat = '</table>';
|
|
251
|
chartData.tooltip.shared = true;
|
|
252
|
chartData.tooltip.useHTML = true;
|
|
253
|
}
|
|
254
|
//else
|
|
255
|
chartData.tooltip.formatter = function() {
|
|
256
|
if(selectedData['fields'][0]['type']!='pie'){
|
|
257
|
/*//var ind = chart.xAxis[0].categories.indexOf(this.x);
|
|
258
|
var str = '';
|
|
259
|
if(this.point.config.name)
|
|
260
|
str += '<b>'+ this.point.config.name +'</b><br/>';
|
|
261
|
//str += this.x + '<br />';
|
|
262
|
//var myseries = chart.series;
|
|
263
|
//for(var i=0;i<myseries.length;i++){
|
|
264
|
// str += myseries[i].name + ":" + numberWithCommas(myseries[i].data[ind].y) + "<br />";
|
|
265
|
//}
|
|
266
|
str += this.series.name + ': '+ '<b>' + numberWithCommas(this.y) + '</b><br/>';
|
|
267
|
str += chart.xAxis[0].axisTitle.textStr + ": <b>" + this.x + '</b>';
|
|
268
|
return str;*/
|
|
269
|
var s = '<b>'+ this.x +'</b>';
|
|
270
|
|
|
271
|
$.each(this.points, function(i, point) {
|
|
272
|
s += '<br/><span style="color:'+point.series.color+'">'+ point.series.name +'</span>: '+
|
|
273
|
numberWithCommas(point.y);
|
|
274
|
});
|
|
275
|
|
|
276
|
return s;
|
|
277
|
}
|
|
278
|
else{
|
|
279
|
var name;
|
|
280
|
if(selectedData['fieldsheaders'].length >0)
|
|
281
|
name = selectedData['fieldsheaders'][0];
|
|
282
|
else if(selectedData['yaxisheaders'].length>0)
|
|
283
|
name = selectedData['yaxisheaders'][0];
|
|
284
|
else
|
|
285
|
name = "number";
|
|
286
|
return '<b>'+ this.point.config.name +'</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' %<br/>(' + name + ": " + numberWithCommas(this.y) +")";
|
|
287
|
}
|
|
288
|
};
|
|
289
|
if(selectedData['fields'].length==1)
|
|
290
|
chartData['chart']['type'] = selectedData['fields'][0]['type'];
|
|
291
|
|
|
292
|
}
|
|
293
|
if('theme' in selectedData){
|
|
294
|
highchartsOptions = Highcharts.setOptions(themes[selectedData['theme']][1]);
|
|
295
|
}
|
|
296
|
else
|
|
297
|
highchartsOptions = Highcharts.setOptions(themes[0][1]);
|
|
298
|
|
|
299
|
|
|
300
|
//alert('Found ' + document.getElementsByTagName('div').length + ' divs');
|
|
301
|
|
|
302
|
if(mywidth>0){
|
|
303
|
if(wflag)
|
|
304
|
chartData.chart.width = mywidth * $(document).width() /100;
|
|
305
|
else
|
|
306
|
chartData.chart.width = mywidth;
|
|
307
|
}
|
|
308
|
else
|
|
309
|
chartData.chart.width = 90 * $(document).width() / 100;
|
|
310
|
if(myheight>0){
|
|
311
|
if(hflag)
|
|
312
|
chartData.chart.height = myheight * $(document).height() /100;
|
|
313
|
else
|
|
314
|
chartData.chart.height = myheight;
|
|
315
|
}
|
|
316
|
else
|
|
317
|
chartData.chart.height = 80 * $(document).height() /100;
|
|
318
|
|
|
319
|
chartData.exporting = JSON.parse( '{ "url" : "<?php echo $export_server ?>" }');
|
|
320
|
|
|
321
|
chart = new Highcharts.Chart(chartData, function(chart){
|
|
322
|
var series = chart.series;
|
|
323
|
var i=0;
|
|
324
|
for(; i<series.length; i++){
|
|
325
|
if( series[i].legendItem && series[i].checkbox) {
|
|
326
|
series[i].checkbox.style.marginLeft = '18px';
|
|
327
|
}
|
|
328
|
}
|
|
329
|
});
|
|
330
|
|
|
331
|
|
|
332
|
//chart.setSize(mywidth, myheight, false);
|
|
333
|
//alert(JSON.stringify(chartData));
|
|
334
|
if(selectedData['in'] != undefined && selectedData['in'].length>0){
|
|
335
|
if(chartData.xAxis.labels != undefined) chartData2.xAxis.labels = chartData.xAxis.labels
|
|
336
|
if(chartData.title != undefined) {chartData2.title = new Object(); chartData2.title.text = chartData.title.text;}
|
|
337
|
if(chartData.subtitle != undefined) {chartData2.subtitle = new Object(); chartData2.subtitle.text = chartData.subtitle.text;}
|
|
338
|
chartData2.xAxis.title.text = chartData.xAxis.title.text;
|
|
339
|
chartData2.yAxis[0].title.text = chartData.yAxis[0].title.text;
|
|
340
|
chartData2.credits.text = chartData.credits.text;
|
|
341
|
chartData2.plotOptions['pie']['dataLabels']['formatter'] = chartData.plotOptions['pie']['dataLabels']['formatter'];
|
|
342
|
chartData2.tooltip = chartData.tooltip;
|
|
343
|
chartData2['chart']['type'] = chartData['chart']['type'];
|
|
344
|
chartData2['chart']['renderTo'] = 'chart2';
|
|
345
|
chartData2['xAxis']['plotLines'] = chartData['xAxis']['plotLines'];
|
|
346
|
chartData2['xAxis']['plotBands'] = chartData['xAxis']['plotBands'];
|
|
347
|
if(chartData['chart']['height'] != undefined)
|
|
348
|
chartData2['chart']['height'] = chartData['chart']['height'];
|
|
349
|
if(chartData['chart']['width'] != undefined)
|
|
350
|
chartData2['chart']['width'] = chartData['chart']['width'];
|
|
351
|
if(selectedData['xStyle'] != undefined){
|
|
352
|
chartData2.xAxis.labels = labelsforx(selectedData['xStyle'],selectedData['emp']);
|
|
353
|
}
|
|
354
|
else{
|
|
355
|
var temp = new Object(); temp['r'] = '-'; temp['s'] = '-'; temp['l'] = '-';
|
|
356
|
chartData2.xAxis.labels = labelsforx(temp,selectedData['emp']);
|
|
357
|
}
|
|
358
|
if(selectedData['stacking']!=undefined){
|
|
359
|
chartData2['plotOptions']['column']['stacking'] = selectedData['stacking'];
|
|
360
|
chartData2['plotOptions']['area']['stacking'] = selectedData['stacking'];
|
|
361
|
chartData2['plotOptions']['areaspline']['stacking'] = selectedData['stacking'];
|
|
362
|
}
|
|
363
|
|
|
364
|
if(chartData2.series.length > 4)
|
|
365
|
chartData2.legend = chartData.legend;
|
|
366
|
//chartData.plotOptions.column.pointWidth = 30;
|
|
367
|
//chartData2.plotOptions.column.pointWidth = 30;
|
|
368
|
chart2 = new Highcharts.Chart(chartData2, function(chart2){
|
|
369
|
var series = chart2.series;
|
|
370
|
var i=0;
|
|
371
|
for(; i<series.length; i++){
|
|
372
|
if( series[i].legendItem && series[i].checkbox) {
|
|
373
|
series[i].checkbox.style.marginLeft = '18px';
|
|
374
|
}
|
|
375
|
}
|
|
376
|
});
|
|
377
|
|
|
378
|
}
|
|
379
|
credits();
|
|
380
|
}
|
|
381
|
|
|
382
|
|
|
383
|
function setSelections(){
|
|
384
|
var str = "<input type='radio' name='sel' checked value='not'/>"+selectedData['in'][0]['text']+"   <input type='radio' name='sel' value='cumulate'/>Cumulative" ;
|
|
385
|
$("#selections").empty().append(str);
|
|
386
|
|
|
387
|
$("input[name='sel']").live("click",function(){
|
|
388
|
if($(this).val() == "cumulate"){
|
|
389
|
$("#chart").hide();
|
|
390
|
$("#chart2").show();
|
|
391
|
}
|
|
392
|
else{
|
|
393
|
$("#chart2").hide();
|
|
394
|
$("#chart").show();
|
|
395
|
}
|
|
396
|
});
|
|
397
|
}
|
|
398
|
|
|
399
|
function controlsforfilters(){
|
|
400
|
$("a.all").live("click",function(){
|
|
401
|
$(this).siblings('.filterForm').find('input').attr("checked","checked");
|
|
402
|
newValues($(this).siblings('.filterForm').find('input')[0]);
|
|
403
|
return false;
|
|
404
|
});
|
|
405
|
|
|
406
|
$("a.none").live("click",function(){
|
|
407
|
$(this).siblings('.filterForm').find('input').removeAttr("checked");
|
|
408
|
newValues($(this).siblings('.filterForm').find('input')[0]);
|
|
409
|
return false;
|
|
410
|
});
|
|
411
|
|
|
412
|
$(".formContainer input").live("click",function(){
|
|
413
|
newValues(this);
|
|
414
|
});
|
|
415
|
}
|
|
416
|
|
|
417
|
function newValues(obj){
|
|
418
|
var field = $(obj).parent().attr('id');
|
|
419
|
var myfilters = selectedData['filters'];
|
|
420
|
var thisfilter;
|
|
421
|
for(var i=0;i<selectedData['incfilters'].length;i++){
|
|
422
|
if(selectedData['incfilters'][i]['name'] == field){
|
|
423
|
thisfilter = selectedData['incfilters'][i];
|
|
424
|
break;
|
|
425
|
}
|
|
426
|
}
|
|
427
|
|
|
428
|
//change the url params
|
|
429
|
//if is it checked
|
|
430
|
if($(obj).is(":checked")){
|
|
431
|
$(obj).parents(".filter").find("a.none").show();
|
|
432
|
var flag = false;
|
|
433
|
var i;
|
|
434
|
for(i=0;i<myfilters.length;i++){
|
|
435
|
if(myfilters[i]['name'] == field){
|
|
436
|
flag=true;
|
|
437
|
break;
|
|
438
|
}
|
|
439
|
}
|
|
440
|
//if there is already such a filter delete all values and insert all the checked
|
|
441
|
if(flag){
|
|
442
|
myfilters[i].values = new Array();
|
|
443
|
$(obj).parent().find("input:checked").each(function(){
|
|
444
|
myfilters[i].values.push($(this).val());
|
|
445
|
});
|
|
446
|
//myfilters[i].values.push($(obj).val());
|
|
447
|
}
|
|
448
|
//if there is no such filter
|
|
449
|
else{
|
|
450
|
//create one
|
|
451
|
var newfilter = new Object();
|
|
452
|
newfilter.name = field;
|
|
453
|
newfilter.values = new Array();
|
|
454
|
var ch = $(obj).parent().find("input:checked");
|
|
455
|
$(ch).each(function(){
|
|
456
|
newfilter.values.push($(this).val());
|
|
457
|
});
|
|
458
|
//newfilter.values[0] = $(obj).val();
|
|
459
|
myfilters.push(newfilter);
|
|
460
|
}
|
|
461
|
}
|
|
462
|
//if it was unchecked
|
|
463
|
else{
|
|
464
|
//there should be already such a filter
|
|
465
|
var flag = false;
|
|
466
|
var i;
|
|
467
|
for(i=0;i<myfilters.length;i++){
|
|
468
|
if(myfilters[i]['name'] == field){
|
|
469
|
flag=true;
|
|
470
|
break;
|
|
471
|
}
|
|
472
|
}
|
|
473
|
//remove the value
|
|
474
|
if($(obj).parent().find("input:checked").length == 0){
|
|
475
|
$(obj).parents(".filter").find("a.none").hide();
|
|
476
|
myfilters[i].values = new Array();
|
|
477
|
}
|
|
478
|
else{
|
|
479
|
var j;
|
|
480
|
for(j=0;j<myfilters[i].values.length;j++){
|
|
481
|
if(myfilters[i].values[j] == $(obj).val()){
|
|
482
|
myfilters[i].values.splice(j,1);
|
|
483
|
break;
|
|
484
|
}
|
|
485
|
}
|
|
486
|
}
|
|
487
|
|
|
488
|
|
|
489
|
//if no more values, add the values in the incfilter list and if it is all remove the filter
|
|
490
|
if(myfilters[i].values.length == 0){
|
|
491
|
if(thisfilter.values[0]=="all")
|
|
492
|
myfilters.splice(i,1);
|
|
493
|
else
|
|
494
|
myfilters[i].values = thisfilter.values;
|
|
495
|
}
|
|
496
|
}
|
|
497
|
//ajax call to get the new data
|
|
498
|
$.ajax({
|
|
499
|
type: "GET",
|
|
500
|
url: "ajaxRouter9.php",
|
|
501
|
data: "com=query&type=chart&data="+encodeURIComponent(JSON.stringify(selectedData)),
|
|
502
|
success: function(resp){
|
|
503
|
// we have the response
|
|
504
|
chartDataFromServer = JSON.parse(resp);
|
|
505
|
renderChart();
|
|
506
|
},
|
|
507
|
error: function(e){
|
|
508
|
alert('Error: ' + e);
|
|
509
|
}
|
|
510
|
});
|
|
511
|
|
|
512
|
}
|
|
513
|
|
|
514
|
|
|
515
|
function labelsforx(style, emp){
|
|
516
|
var st = Object();
|
|
517
|
st.justify = null;
|
|
518
|
st.style = Array();
|
|
519
|
st.style['font-size'] = '8px';
|
|
520
|
st.formatter = null;
|
|
521
|
|
|
522
|
if(style['r'] != null && style['r'] != "-"){
|
|
523
|
st.rotation = style['r'];
|
|
524
|
st.y =25;
|
|
525
|
}
|
|
526
|
if(style['s'] != null && style['s'] != "-")
|
|
527
|
st.step = style['s'];
|
|
528
|
if(style['l'] != null && style['l'] != "-")
|
|
529
|
st.staggerLines = style['l'];
|
|
530
|
|
|
531
|
if(style['ft'] != null && style['ft'] != "-"){
|
|
532
|
if(style['wt'] != null && style['wt'] != "-")
|
|
533
|
st.formatter = function(){
|
|
534
|
eflag = false;
|
|
535
|
for(var e=0;e<emp.length;e++){
|
|
536
|
if(this.value == emp[e]){
|
|
537
|
eflag = true;
|
|
538
|
break;
|
|
539
|
}
|
|
540
|
}
|
|
541
|
|
|
542
|
if (typeof this.value == 'string' || this.value instanceof String){
|
|
543
|
var ar = this.value.split(" ");
|
|
544
|
var str = '';
|
|
545
|
if(ar.length == 1){
|
|
546
|
if(eflag) return '<span style="fill:red;">' + this.value.substr(0,selectedData['xStyle']['ft']) + '</span>';
|
|
547
|
else return this.value.substr(0,selectedData['xStyle']['ft']);
|
|
548
|
}
|
|
549
|
for(var i=0;i<ar.length;i++) {
|
|
550
|
str +=ar[i].substr(0,selectedData['xStyle']['wt'])+' ';
|
|
551
|
}
|
|
552
|
if(eflag) return '<span style="fill:red;">' + str.substr(0,selectedData['xStyle']['ft']) + '</span>';
|
|
553
|
else return str.substr(0,selectedData['xStyle']['ft']);
|
|
554
|
}
|
|
555
|
else
|
|
556
|
if(eflag) return '<span style="fill:red;">' + this.value + '</span>';
|
|
557
|
};
|
|
558
|
else
|
|
559
|
st.formatter = function(){
|
|
560
|
eflag = false;
|
|
561
|
for(var e=0;e<emp.length;e++){
|
|
562
|
if(this.value == emp[e]){
|
|
563
|
eflag = true;
|
|
564
|
break;
|
|
565
|
}
|
|
566
|
}
|
|
567
|
|
|
568
|
if (typeof this.value == 'string' || this.value instanceof String){
|
|
569
|
if(this.value.length>selectedData['xStyle']['ft'])
|
|
570
|
if(eflag) return '<span style="fill:red;">' + this.value.substr(0,selectedData['xStyle']['ft']) + "..." + '</span>';
|
|
571
|
else return this.value.substr(0,selectedData['xStyle']['ft']) + "...";
|
|
572
|
else
|
|
573
|
if(eflag) return '<span style="fill:red;">' + this.value + '</span>';
|
|
574
|
else return this.value;
|
|
575
|
}
|
|
576
|
else return this.value;
|
|
577
|
};
|
|
578
|
}
|
|
579
|
else if(style['wt'] != null && style['wt'] != "-")
|
|
580
|
st.formatter = function(){
|
|
581
|
eflag = false;
|
|
582
|
for(var e=0;e<emp.length;e++){
|
|
583
|
if(this.value == emp[e]){
|
|
584
|
eflag = true;
|
|
585
|
break;
|
|
586
|
}
|
|
587
|
}
|
|
588
|
if (typeof this.value == 'string' || this.value instanceof String){
|
|
589
|
var ar = this.value.split(" ");
|
|
590
|
var str = '';
|
|
591
|
if(ar.length == 1)
|
|
592
|
if(eflag) return '<span style="fill:red;">' + this.value + '</span>';
|
|
593
|
else return this.value;
|
|
594
|
for(var i=0;i<ar.length;i++) {
|
|
595
|
str +=ar[i].substr(0,selectedData['xStyle']['wt'])+' ';
|
|
596
|
}
|
|
597
|
if(eflag) return '<span style="fill:red;">' + str + '</span>';
|
|
598
|
else return str
|
|
599
|
}
|
|
600
|
else
|
|
601
|
if(eflag) return '<span style="fill:red;">' + this.value + '</span>';
|
|
602
|
};
|
|
603
|
else{
|
|
604
|
st.formatter = function(){
|
|
605
|
for(var e=0;e<emp.length;e++){
|
|
606
|
if(this.value == emp[e]){
|
|
607
|
return '<span style="fill:red;">' + this.value + '</span>';
|
|
608
|
}
|
|
609
|
}
|
|
610
|
return this.value;
|
|
611
|
};
|
|
612
|
}
|
|
613
|
return st;
|
|
614
|
}
|
|
615
|
|
|
616
|
function isInt(n) {
|
|
617
|
return typeof n === 'number' && n % 1 == 0;
|
|
618
|
}
|
|
619
|
|
|
620
|
function numberWithCommas(num){
|
|
621
|
if(isInt(num)){
|
|
622
|
var array = num.toString().split('');
|
|
623
|
var index = -3;
|
|
624
|
var len = array.length;
|
|
625
|
while((len + index) > 0){
|
|
626
|
array.splice(index, 0 , ',');
|
|
627
|
index -= 4;
|
|
628
|
}
|
|
629
|
return array.join('');
|
|
630
|
}
|
|
631
|
else
|
|
632
|
return Math.round(num*100)/100;
|
|
633
|
}
|
|
634
|
|
|
635
|
function credits(){
|
|
636
|
var today = new Date();
|
|
637
|
var dd = today.getDate();
|
|
638
|
var mm = today.getMonth()+1; //January is 0!
|
|
639
|
var yyyy = today.getFullYear();
|
|
640
|
var cr = document.getElementById("credits");
|
|
641
|
cr.innerHTML = "from OpenAIRE via HighCharts (date: " + dd + "/" + mm + "/" + yyyy +")";
|
|
642
|
}
|
|
643
|
|
|
644
|
function renderfilters(){
|
|
645
|
var container = document.getElementById("filters");
|
|
646
|
if(filterData!=null){
|
|
647
|
var len = filterData.length;
|
|
648
|
for(var i=0;i<len;i++){
|
|
649
|
//checkboxes
|
|
650
|
if(filterData[i].values != undefined){
|
|
651
|
var str = "<div class='filter'><div class='filterHeader'><p>"+filterData[i].showname+"</p><input type='hidden' value='"+filterData[i].name+"' class='filtername'/></div><a class='all' href='#'>select all</a><a class='none' href='#' style='display:none;float:right'>clear</a><div class='filterForm'><div class='formContainer'><form id='"+filterData[i].name+"' class='filterform'>";
|
|
652
|
for(var v=0;v<filterData[i].values.length;v++){
|
|
653
|
str+="<input type='checkbox' value='"+filterData[i].values[v]+"' name='form"+filterData[i].name+"'>"+filterData[i].values[v]+"<br>";
|
|
654
|
}
|
|
655
|
str += "</form></div></div></div>";
|
|
656
|
$(container).append(str);
|
|
657
|
}
|
|
658
|
//slider
|
|
659
|
else{
|
|
660
|
var str = "<div class='filter'><div class='filterHeader'><p>"+filterData[i].showname+"</p><input type='hidden' value='"+filterData[i].name+"' class='filtername'/></div>";
|
|
661
|
str += "<div class='filter-slider'><div class='slider-container'><div id='slider"+filterData[i].name+"' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' aria-disabled='false'></div></div>";
|
|
662
|
|
|
663
|
str += "<span class='price-tip slider-user-min'><span id='userMin"+filterData[i].name+"'>"+filterData[i]['min']+"</span></span>";
|
|
664
|
str += "<span class='price-tip slider-user-max'><span id='userMax"+filterData[i].name+"'>"+filterData[i]['max']+"</span></span>";
|
|
665
|
str += "<span class='min' style='display:none'><span id='productMin"+filterData[i].name+"'>"+filterData[i]['min']+"</span></span>";
|
|
666
|
str += "<span class='max' style='display:none'><span id='productMax"+filterData[i].name+"'>"+filterData[i]['max']+"</span></span>";
|
|
667
|
str += "</div></div>";
|
|
668
|
$(container).append(str);
|
|
669
|
myFilter = filterData[i];
|
|
670
|
$(function(){
|
|
671
|
$("#slider"+myFilter.name).slider({
|
|
672
|
step: 1,
|
|
673
|
range: true,
|
|
674
|
min: parseInt(myFilter['min']),
|
|
675
|
max: parseInt(myFilter['max']),
|
|
676
|
values: [parseInt(myFilter['min']), parseInt(myFilter['max'])],
|
|
677
|
change: function(event, ui){
|
|
678
|
$(this).parent().parent().find('.slider-user-min').find('span').html(ui.values[0]);
|
|
679
|
$(this).parent().parent().find('.slider-user-max').find('span').html(ui.values[1]);
|
|
680
|
slidermove(myFilter.name,ui.values[0],ui.values[1]);
|
|
681
|
}
|
|
682
|
});
|
|
683
|
});
|
|
684
|
}
|
|
685
|
}
|
|
686
|
}
|
|
687
|
else{
|
|
688
|
$(container).css("width","0px");
|
|
689
|
}
|
|
690
|
}
|
|
691
|
|
|
692
|
function slidermove(field,min,max){
|
|
693
|
var myfilters = selectedData['filters'];
|
|
694
|
var len = myfilters.length;
|
|
695
|
for(var i=0;i<len;i++){
|
|
696
|
if(myfilters[i]['name'] == field){
|
|
697
|
myfilters[i]['min'] = min;
|
|
698
|
myfilters[i]['max'] = max;
|
|
699
|
break;
|
|
700
|
}
|
|
701
|
}
|
|
702
|
|
|
703
|
|
|
704
|
//ajax call to get the new data
|
|
705
|
$.ajax({
|
|
706
|
type: "GET",
|
|
707
|
url: "ajaxRouter9.php",
|
|
708
|
data: "com=query&type=chart&data="+encodeURIComponent(JSON.stringify(selectedData)),
|
|
709
|
success: function(resp){
|
|
710
|
// we have the response
|
|
711
|
chartDataFromServer = JSON.parse(resp);
|
|
712
|
renderChart();
|
|
713
|
},
|
|
714
|
error: function(e){
|
|
715
|
alert('Error: ' + e);
|
|
716
|
}
|
|
717
|
});
|
|
718
|
}
|
|
719
|
</script>
|
|
720
|
</head>
|
|
721
|
<body>
|
|
722
|
<div id="filters"></div>
|
|
723
|
<div id="charts-main" style="margin-right:10px;float:left">
|
|
724
|
<div id='chart' style="width:95%;height:95%;margin:auto;"></div>
|
|
725
|
<div id='chart2' style="width:95%;height:95%;margin:auto;display:none;"><!-- SECTION FOR THE GRAPHIC --></div>
|
|
726
|
|
|
727
|
<div id="selections" style="width:95%;height:5%;margin:auto;text-align:center;font-family:Verdana;font-size:small;color:#000"></div>
|
|
728
|
<div id='credits'></div>
|
|
729
|
<div id='zoommessage'>select an area to zoom in</div>
|
|
730
|
</div>
|
|
731
|
</body>
|
|
732
|
</html>
|
|
733
|
|