js/tbl_zoom_plot.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  ** @fileoverview JavaScript functions used on tbl_select.php
   4  **
   5  ** @requires    jQuery
   6  ** @requires    js/functions.js
   7  **/
   8
   9
  10 /**
  11  **  Display Help/Info
  12  **/
  13 function displayHelp() {
  14     var msgbox = PMA_ajaxShowMessage(PMA_messages['strDisplayHelp'],10000);
  15     msgbox.click(function() {
  16         PMA_ajaxRemoveMessage(msgbox);
  17     });
  18 }
  19
  20 /**
  21  ** Extend the array object for max function
  22  ** @param array
  23  **/
  24 Array.max = function (array) {
  25     return Math.max.apply( Math, array );
  26 }
  27
  28 /**
  29  ** Extend the array object for min function
  30  ** @param array
  31  **/
  32 Array.min = function (array) {
  33     return Math.min.apply( Math, array );
  34 }
  35
  36 /**
  37  ** Checks if a string contains only numeric value
  38  ** @param n: String (to be checked)
  39  **/
  40 function isNumeric(n) {
  41     return !isNaN(parseFloat(n)) && isFinite(n);
  42 }
  43
  44 /**
  45  ** Checks if an object is empty
  46  ** @param n: Object (to be checked)
  47  **/
  48 function isEmpty(obj) {
  49     var name;
  50     for (name in obj) {
  51         return false;
  52     }
  53     return true;
  54 }
  55
  56 /**
  57  ** Converts a timestamp into the format of its field type
  58  ** @param val  Integer Timestamp
  59  ** @param type String  Field type(datetime/timestamp/time/date)
  60  **/
  61 function getDate(val,type) {
  62     if(type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
  63         return Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', val)
  64     }
  65     else if(type.toString().search(/time/i) != -1) {
  66         return Highcharts.dateFormat('%H:%M:%S', val)
  67     }
  68     else if (type.toString().search(/date/i) != -1) {
  69         return Highcharts.dateFormat('%Y-%m-%e', val)
  70     }
  71 }
  72
  73 /**
  74  ** Converts a date/time into timestamp
  75  ** @param val  String Date
  76  ** @param type Sring  Field type(datetime/timestamp/time/date)
  77  **/
  78 function getTimeStamp(val,type) {
  79     if(type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
  80         return getDateFromFormat(val,'yyyy-MM-dd HH:mm:ss', val)
  81     }
  82     else if(type.toString().search(/time/i) != -1) {
  83         return getDateFromFormat('1970-01-01 ' + val,'yyyy-MM-dd HH:mm:ss')
  84     }
  85     else if (type.toString().search(/date/i) != -1) {
  86         return getDateFromFormat(val,'yyyy-MM-dd')
  87     }
  88 }
  89
  90 /**
  91  ** Classifies the field type into numeric,timeseries or text
  92  ** @param field: field type (as in database structure)
  93  **/
  94 function getType(field) {
  95         if(field.toString().search(/int/i) != -1 || field.toString().search(/decimal/i) != -1 || field.toString().search(/year/i) != -1)
  96             return 'numeric';
  97         else if(field.toString().search(/time/i) != -1 || field.toString().search(/date/i) != -1)
  98             return 'time';
  99         else
 100             return 'text';
 101 }
 102 /**
 103  ** Converts a categorical array into numeric array
 104  ** @param array categorical values array
 105  **/
 106 function getCord(arr) {
 107     var newCord = new Array();
 108     var original = $.extend(true,[],arr);
 109     var arr = jQuery.unique(arr).sort();
 110     $.each(original, function(index,value) {
 111         newCord.push(jQuery.inArray(value,arr));
 112     });
 113     return [newCord,arr,original];
 114 }
 115
 116 /**
 117  ** Scrolls the view to the display section
 118  **/
 119 function scrollToChart() {
 120    var x = $('#dataDisplay').offset().top - 100; // 100 provides buffer in viewport
 121    $('html,body').animate({scrollTop: x}, 500);
 122 }
 123
 124 /**
 125  ** Handlers for panning feature
 126  **/
 127 function includePan(currentChart) {
 128     var mouseDown;
 129     var lastX;
 130     var lastY;
 131     var chartWidth = $('#resizer').width() - 3;
 132     var chartHeight = $('#resizer').height() - 20;
 133     $('#querychart').mousedown(function() {
 134         mouseDown = 1;
 135     });
 136
 137     $('#querychart').mouseup(function() {
 138         mouseDown = 0;
 139     });
 140     $('#querychart').mousemove(function(e) {
 141         if (mouseDown == 1) {
 142             if (e.pageX > lastX) {
 143                 var xExtremes = currentChart.xAxis[0].getExtremes();
 144                 var diff = (e.pageX - lastX) * (xExtremes.max - xExtremes.min) / chartWidth;
 145                 currentChart.xAxis[0].setExtremes(xExtremes.min - diff, xExtremes.max - diff);
 146             }
 147             else if (e.pageX < lastX) {
 148                 var xExtremes = currentChart.xAxis[0].getExtremes();
 149                 var diff = (lastX - e.pageX) * (xExtremes.max - xExtremes.min) / chartWidth;
 150                 currentChart.xAxis[0].setExtremes(xExtremes.min + diff, xExtremes.max + diff);
 151             }
 152
 153             if (e.pageY > lastY) {
 154                 var yExtremes = currentChart.yAxis[0].getExtremes();
 155                 var ydiff = 1.0 * (e.pageY - lastY) * (yExtremes.max - yExtremes.min) / chartHeight;
 156                 currentChart.yAxis[0].setExtremes(yExtremes.min + ydiff, yExtremes.max + ydiff);
 157             }
 158             else if (e.pageY < lastY) {
 159                 var yExtremes = currentChart.yAxis[0].getExtremes();
 160                 var ydiff = 1.0 * (lastY - e.pageY) * (yExtremes.max - yExtremes.min) / chartHeight;
 161                 currentChart.yAxis[0].setExtremes(yExtremes.min - ydiff, yExtremes.max - ydiff);
 162             }
 163         }
 164         lastX = e.pageX;
 165         lastY = e.pageY;
 166     });
 167 }
 168
 169 $(document).ready(function() {
 170
 171    /**
 172     ** Set a parameter for all Ajax queries made on this page.  Don't let the
 173     ** web server serve cached pages
 174     **/
 175     $.ajaxSetup({
 176         cache: 'false'
 177     });
 178
 179     var cursorMode = ($("input[name='mode']:checked").val() == 'edit') ? 'crosshair' : 'pointer';
 180     var currentChart = null;
 181     var currentData = null;
 182     var xLabel = $('#tableid_0').val();
 183     var yLabel = $('#tableid_1').val();
 184     var xType = $('#types_0').val();
 185     var yType = $('#types_1').val();
 186     var dataLabel = $('#dataLabel').val();
 187     var lastX;
 188     var lastY;
 189     var zoomRatio = 1;
 190
 191
 192     // Get query result
 193     var data = jQuery.parseJSON($('#querydata').html());
 194
 195     /**
 196      ** Input form submit on field change
 197      **/
 198     $('#tableid_0').change(function() {
 199           $('#zoom_search_form').submit();
 200     })
 201
 202     $('#tableid_1').change(function() {
 203           $('#zoom_search_form').submit();
 204     })
 205
 206     $('#tableid_2').change(function() {
 207           $('#zoom_search_form').submit();
 208     })
 209
 210     $('#tableid_3').change(function() {
 211           $('#zoom_search_form').submit();
 212     })
 213
 214     /**
 215      * Input form validation
 216      **/
 217     $('#inputFormSubmitId').click(function() {
 218         if ($('#tableid_0').get(0).selectedIndex == 0 || $('#tableid_1').get(0).selectedIndex == 0)
 219             PMA_ajaxShowMessage(PMA_messages['strInputNull']);
 220         else if (xLabel == yLabel)
 221             PMA_ajaxShowMessage(PMA_messages['strSameInputs']);
 222     });
 223
 224     /**
 225       ** Prepare a div containing a link, otherwise it's incorrectly displayed
 226       ** after a couple of clicks
 227       **/
 228     $('<div id="togglesearchformdiv"><a id="togglesearchformlink"></a></div>')
 229     .insertAfter('#zoom_search_form')
 230     // don't show it until we have results on-screen
 231     .hide();
 232
 233     $('#togglesearchformlink')
 234         .html(PMA_messages['strShowSearchCriteria'])
 235         .bind('click', function() {
 236             var $link = $(this);
 237             $('#zoom_search_form').slideToggle();
 238             if ($link.text() == PMA_messages['strHideSearchCriteria']) {
 239                 $link.text(PMA_messages['strShowSearchCriteria']);
 240             } else {
 241                 $link.text(PMA_messages['strHideSearchCriteria']);
 242             }
 243              // avoid default click action
 244             return false;
 245          });
 246
 247     /**
 248      ** Set dialog properties for the data display form
 249      **/
 250     $("#dataDisplay").dialog({
 251         autoOpen: false,
 252         title: 'Data point content',
 253         modal: false, //false otherwise other dialogues like timepicker may not function properly
 254         height: $('#dataDisplay').height() + 80,
 255         width: $('#dataDisplay').width() + 80
 256     });
 257
 258     /*
 259      * Handle submit of zoom_display_form
 260      */
 261
 262     $("#submitForm").click(function(event) {
 263
 264         //Prevent default submission of form
 265         event.preventDefault();
 266
 267         //Find changed values by comparing form values with selectedRow Object
 268         var newValues = new Array();//Stores the values changed from original
 269         var it = 4;
 270         var xChange = false;
 271         var yChange = false;
 272         for (key in selectedRow) {
 273             if (key != 'where_clause'){
 274                 var oldVal = selectedRow[key];
 275                 var newVal = ($('#fields_null_id_' + it).attr('checked')) ? null : $('#fieldID_' + it).val();
 276                 if (oldVal != newVal){
 277                     selectedRow[key] = newVal;
 278                     newValues[key] = newVal;
 279                     if(key == xLabel) {
 280                         xChange = true;
 281                         data[currentData][xLabel] = newVal;
 282                     }
 283                     else if(key == yLabel) {
 284                         yChange = true;
 285                         data[currentData][yLabel] = newVal;
 286                     }
 287                 }
 288             }
 289             it++
 290         }//End data update
 291
 292         //Update the chart series and replot
 293         if (xChange || yChange) {
 294             var newSeries = new Array();
 295             newSeries[0] = new Object();
 296             newSeries[0].marker = {
 297                 symbol: 'circle'
 298             };
 299             //Logic similar to plot generation, replot only if xAxis changes or yAxis changes. Code includes a lot of checks so as to replot only when necessary
 300             if(xChange) {
 301                 xCord[currentData] = selectedRow[xLabel];
 302                 if(xType == 'numeric') {
 303                     currentChart.series[0].data[currentData].update({ x : selectedRow[xLabel] });
 304                     currentChart.xAxis[0].setExtremes(Array.min(xCord) - 6,Array.max(xCord) + 6);
 305                 }
 306                 else if(xType == 'time') {
 307                     currentChart.series[0].data[currentData].update({ x : getTimeStamp(selectedRow[xLabel],$('#types_0').val())});
 308                 }
 309                 else {
 310                     var tempX = getCord(xCord);
 311                     var tempY = getCord(yCord);
 312                     var i = 0;
 313                     newSeries[0].data = new Array();
 314                     xCord = tempX[2];
 315                     yCord = tempY[2];
 316
 317                     $.each(data,function(key,value) {
 318                         if(yType != 'text')
 319                             newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: value[yLabel], marker: {fillColor: colorCodes[i % 8]} , id: i } );
 320                         else
 321                             newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
 322                         i++;
 323                     });
 324                     currentSettings.xAxis.labels = { formatter : function() {
 325                         if(tempX[1][this.value] && tempX[1][this.value].length > 10)
 326                             return tempX[1][this.value].substring(0,10)
 327                         else
 328                             return tempX[1][this.value];
 329                         }
 330                     }
 331                     currentSettings.series = newSeries;
 332                     currentChart = PMA_createChart(currentSettings);
 333                 }
 334
 335             }
 336             if(yChange) {
 337
 338                 yCord[currentData] = selectedRow[yLabel];
 339                 if(yType == 'numeric') {
 340                     currentChart.series[0].data[currentData].update({ y : selectedRow[yLabel] });
 341                     currentChart.yAxis[0].setExtremes(Array.min(yCord) - 6,Array.max(yCord) + 6);
 342                 }
 343                 else if(yType =='time') {
 344                     currentChart.series[0].data[currentData].update({ y : getTimeStamp(selectedRow[yLabel],$('#types_1').val())});
 345                 }
 346                 else {
 347                     var tempX = getCord(xCord);
 348                     var tempY = getCord(yCord);
 349                     var i = 0;
 350                     newSeries[0].data = new Array();
 351                     xCord = tempX[2];
 352                     yCord = tempY[2];
 353
 354                     $.each(data,function(key,value) {
 355                         if(xType != 'text' )
 356                             newSeries[0].data.push({ name: value[dataLabel], x: value[xLabel], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
 357                         else
 358                             newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
 359                         i++;
 360                     });
 361                     currentSettings.yAxis.labels = { formatter : function() {
 362                         if(tempY[1][this.value] && tempY[1][this.value].length > 10)
 363                             return tempY[1][this.value].substring(0,10)
 364                         else
 365                             return tempY[1][this.value];
 366                         }
 367                     }
 368                     currentSettings.series = newSeries;
 369                     currentChart = PMA_createChart(currentSettings);
 370                 }
 371             }
 372             currentChart.series[0].data[currentData].select();
 373         }
 374         //End plot update
 375
 376         //Generate SQL query for update
 377         if (!isEmpty(newValues)) {
 378             var sql_query = 'UPDATE `' + window.parent.table + '` SET ';
 379             for (key in newValues) {
 380                 if(key != 'where_clause') {
 381                     sql_query += '`' + key + '`=' ;
 382                     var value = newValues[key];
 383                     if(!isNumeric(value) && value != null)
 384                         sql_query += '\'' + value + '\' ,';
 385                     else
 386                         sql_query += value + ' ,';
 387                 }
 388             }
 389             sql_query = sql_query.substring(0, sql_query.length - 1);
 390             sql_query += ' WHERE ' + PMA_urldecode(data[currentData]['where_clause']);
 391
 392             //Post SQL query to sql.php
 393             $.post('sql.php', {
 394                 'token' : window.parent.token,
 395                 'db' : window.parent.db,
 396                 'ajax_request' : true,
 397                 'sql_query' : sql_query,
 398                 'inline_edit' : false
 399                 }, function(data) {
 400                     if(data.success == true) {
 401                         $('#sqlqueryresults').html(data.sql_query);
 402                         $("#sqlqueryresults").trigger('appendAnchor');
 403                     }
 404                     else
 405                         PMA_ajaxShowMessage(data.error);
 406             })//End $.post
 407         }//End database update
 408         $("#dataDisplay").dialog("close");
 409     });//End submit handler
 410
 411     /*
 412      * Generate plot using Highcharts
 413      */
 414
 415     if (data != null) {
 416         $('#zoom_search_form')
 417          .slideToggle()
 418          .hide();
 419         $('#togglesearchformlink')
 420          .text(PMA_messages['strShowSearchCriteria'])
 421         $('#togglesearchformdiv').show();
 422         var selectedRow;
 423         var colorCodes = ['#FF0000','#00FFFF','#0000FF','#0000A0','#FF0080','#800080','#FFFF00','#00FF00','#FF00FF'];
 424         var series = new Array();
 425         var xCord = new Array();
 426         var yCord = new Array();
 427         var tempX, tempY;
 428         var it = 0;
 429         var xMax; // xAxis extreme max
 430         var xMin; // xAxis extreme min
 431         var yMax; // yAxis extreme max
 432         var yMin; // yAxis extreme min
 433
 434         // Set the basic plot settings
 435         var currentSettings = {
 436             chart: {
 437                 renderTo: 'querychart',
 438                 type: 'scatter',
 439                 //zoomType: 'xy',
 440                 width:$('#resizer').width() -3,
 441                 height:$('#resizer').height()-20
 442             },
 443             credits: {
 444                 enabled: false
 445             },
 446             exporting: { enabled: false },
 447             label: { text: $('#dataLabel').val() },
 448             plotOptions: {
 449                 series: {
 450                     allowPointSelect: true,
 451                     cursor: 'pointer',
 452                     showInLegend: false,
 453                     dataLabels: {
 454                         enabled: false,
 455                     },
 456                     point: {
 457                         events: {
 458                             click: function() {
 459                                 var id = this.id;
 460                                 var fid = 4;
 461                                 currentData = id;
 462                                 // Make AJAX request to tbl_zoom_select.php for getting the complete row info
 463                                 var post_params = {
 464                                     'ajax_request' : true,
 465                                     'get_data_row' : true,
 466                                     'db' : window.parent.db,
 467                                     'table' : window.parent.table,
 468                                     'where_clause' : data[id]['where_clause'],
 469                                     'token' : window.parent.token,
 470                                 }
 471                                 $.post('tbl_zoom_select.php', post_params, function(data) {
 472                                     // Row is contained in data.row_info, now fill the displayResultForm with row values
 473                                     for ( key in data.row_info) {
 474                                         if (data.row_info[key] == null)
 475                                             $('#fields_null_id_' + fid).attr('checked', true);
 476                                         else
 477                                             $('#fieldID_' + fid).val(data.row_info[key]);
 478                                         fid++;
 479                                      }
 480                                      selectedRow = new Object();
 481                                      selectedRow = data.row_info;
 482                                 });
 483
 484                                 $("#dataDisplay").dialog("open");
 485                             },
 486                         }
 487                     }
 488                 }
 489             },
 490             tooltip: {
 491                 formatter: function() {
 492                     return this.point.name;
 493                 }
 494             },
 495             title: { text: 'Query Results' },
 496             xAxis: {
 497                 title: { text: $('#tableid_0').val() },
 498                 events: {
 499                     setExtremes: function(e){
 500                         this.resetZoom.show();
 501                     }
 502                 }
 503
 504             },
 505             yAxis: {
 506                 min: null,
 507                 title: { text: $('#tableid_1').val() },
 508                 endOnTick: false,
 509                 startOnTick: false,
 510                 events: {
 511                     setExtremes: function(e){
 512                         this.resetZoom.show();
 513                     }
 514                 }
 515             },
 516         }
 517
 518         $('#resizer').resizable({
 519             resize: function() {
 520                 currentChart.setSize(
 521                     this.offsetWidth -3,
 522                     this.offsetHeight -20,
 523                     false
 524                 );
 525             }
 526         });
 527
 528         // Classify types as either numeric,time,text
 529         xType = getType(xType);
 530         yType = getType(yType);
 531
 532         //Set the axis type based on the field
 533         currentSettings.xAxis.type = (xType == 'time') ? 'datetime' : 'linear';
 534         currentSettings.yAxis.type = (yType == 'time') ? 'datetime' : 'linear';
 535
 536         // Formulate series data for plot
 537         series[0] = new Object();
 538         series[0].data = new Array();
 539         series[0].marker = {
 540             symbol: 'circle'
 541         };
 542         if (xType != 'text' && yType != 'text') {
 543             $.each(data,function(key,value) {
 544                 var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel],$('#types_0').val());
 545                 var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel],$('#types_1').val());
 546                 series[0].data.push({ name: value[dataLabel], x: xVal, y: yVal, marker: {fillColor: colorCodes[it % 8]} , id: it } );
 547                 xCord.push(value[xLabel]);
 548                 yCord.push(value[yLabel]);
 549                 it++;
 550             });
 551             if(xType == 'numeric') {
 552                 currentSettings.xAxis.max = Array.max(xCord) + 6
 553                 currentSettings.xAxis.min = Array.min(xCord) - 6
 554             }
 555             else {
 556                 currentSettings.xAxis.labels = { formatter : function() {
 557                     return getDate(this.value, $('#types_0').val());
 558                 }}
 559             }
 560             if(yType == 'numeric') {
 561                 currentSettings.yAxis.max = Array.max(yCord) + 6
 562                 currentSettings.yAxis.min = Array.min(yCord) - 6
 563             }
 564             else {
 565                 currentSettings.yAxis.labels = { formatter : function() {
 566                     return getDate(this.value, $('#types_1').val());
 567                 }}
 568             }
 569
 570         }
 571
 572         else if (xType =='text' && yType !='text') {
 573             $.each(data,function(key,value) {
 574                 xCord.push(value[xLabel]);
 575                 yCord.push(value[yLabel]);
 576             });
 577
 578             tempX = getCord(xCord);
 579             $.each(data,function(key,value) {
 580                 var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel],$('#types_1').val());
 581                 series[0].data.push({ name: value[dataLabel], x: tempX[0][it], y: yVal, marker: {fillColor: colorCodes[it % 8]} , id: it } );
 582                 it++;
 583             });
 584
 585             currentSettings.xAxis.labels = { formatter : function() {
 586                     if(tempX[1][this.value] && tempX[1][this.value].length > 10)
 587                         return tempX[1][this.value].substring(0,10)
 588                     else
 589                         return tempX[1][this.value];
 590                 }
 591             }
 592             if(yType == 'numeric') {
 593                 currentSettings.yAxis.max = Array.max(yCord) + 6
 594                 currentSettings.yAxis.min = Array.min(yCord) - 6
 595             }
 596             else {
 597                 currentSettings.yAxis.labels = { formatter : function() {
 598                     return getDate(this.value, $('#types_1').val());
 599                 }}
 600             }
 601             xCord = tempX[2];
 602         }
 603
 604         else if (xType !='text' && yType =='text') {
 605             $.each(data,function(key,value) {
 606                 xCord.push(value[xLabel]);
 607                 yCord.push(value[yLabel]);
 608             });
 609             tempY = getCord(yCord);
 610             $.each(data,function(key,value) {
 611                 var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel],$('#types_0').val());
 612                 series[0].data.push({ name: value[dataLabel], y: tempY[0][it], x: xVal, marker: {fillColor: colorCodes[it % 8]} , id: it } );
 613                 it++;
 614             });
 615             if(xType == 'numeric') {
 616                 currentSettings.xAxis.max = Array.max(xCord) + 6
 617                 currentSettings.xAxis.min = Array.min(xCord) - 6
 618             }
 619             else {
 620                 currentSettings.xAxis.labels = { formatter : function() {
 621                     return getDate(this.value, $('#types_0').val());
 622                 }}
 623             }
 624             currentSettings.yAxis.labels = { formatter : function() {
 625                     if(tempY[1][this.value] && tempY[1][this.value].length > 10)
 626                         return tempY[1][this.value].substring(0,10)
 627                     else
 628                         return tempY[1][this.value];
 629                 }
 630             }
 631             yCord = tempY[2];
 632         }
 633
 634         else if (xType =='text' && yType =='text') {
 635             $.each(data,function(key,value) {
 636                 xCord.push(value[xLabel]);
 637                 yCord.push(value[yLabel]);
 638             });
 639             tempX = getCord(xCord);
 640             tempY = getCord(yCord);
 641             $.each(data,function(key,value) {
 642                 series[0].data.push({ name: value[dataLabel], x: tempX[0][it], y: tempY[0][it], marker: {fillColor: colorCodes[it % 8]} , id: it } );
 643                 it++;
 644             });
 645             currentSettings.xAxis.labels = { formatter : function() {
 646                     if(tempX[1][this.value] && tempX[1][this.value].length > 10)
 647                         return tempX[1][this.value].substring(0,10)
 648                     else
 649                         return tempX[1][this.value];
 650                 }
 651             }
 652             currentSettings.yAxis.labels = { formatter : function() {
 653                     if(tempY[1][this.value] && tempY[1][this.value].length > 10)
 654                         return tempY[1][this.value].substring(0,10)
 655                     else
 656                         return tempY[1][this.value];
 657                 }
 658             }
 659             xCord = tempX[2];
 660             yCord = tempY[2];
 661
 662         }
 663
 664         currentSettings.series = series;
 665         currentChart = PMA_createChart(currentSettings);
 666         xMin = currentChart.xAxis[0].getExtremes().min;
 667         xMax = currentChart.xAxis[0].getExtremes().max;
 668         yMin = currentChart.yAxis[0].getExtremes().min;
 669         yMax = currentChart.yAxis[0].getExtremes().max;
 670         includePan(currentChart); //Enable panning feature
 671         var setZoom = function() {
 672             var newxm = xMin + (xMax - xMin) * (1 - zoomRatio) / 2;
 673             var newxM = xMax - (xMax - xMin) * (1 - zoomRatio) / 2;
 674             var newym = yMin + (yMax - yMin) * (1 - zoomRatio) / 2;
 675             var newyM = yMax - (yMax - yMin) * (1 - zoomRatio) / 2;
 676             currentChart.xAxis[0].setExtremes(newxm,newxM);
 677             currentChart.yAxis[0].setExtremes(newym,newyM);
 678         };
 679         //Enable zoom feature
 680          $("#querychart").mousewheel(function(objEvent, intDelta) {
 681             if (intDelta > 0) {
 682                 if (zoomRatio > 0.1) {
 683                     zoomRatio = zoomRatio - 0.1;
 684                     setZoom();
 685                 }
 686             }
 687             else if (intDelta < 0) {
 688                 zoomRatio = zoomRatio + 0.1;
 689                 setZoom();
 690             }
 691         });
 692         //Add reset zoom feature
 693         currentChart.yAxis[0].resetZoom = currentChart.xAxis[0].resetZoom = $('<a href="#">Reset zoom</a>')
 694         .appendTo(currentChart.container)
 695         .css({
 696             position: 'absolute',
 697             top: 10,
 698             right: 20,
 699             display: 'none'
 700         })
 701         .click(function(){
 702             currentChart.xAxis[0].setExtremes(null, null)
 703             currentChart.yAxis[0].setExtremes(null, null)
 704             this.style.display = 'none'
 705         });
 706         scrollToChart();
 707     }
 708 });