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
  96         || field.toString().search(/year/i) != -1) {
  97         return 'numeric';
  98     } else if (field.toString().search(/time/i) != -1 || field.toString().search(/date/i) != -1) {
  99         return 'time';
 100     } else {
 101         return 'text';
 102     }
 103 }
 104 /**
 105  ** Converts a categorical array into numeric array
 106  ** @param array categorical values array
 107  **/
 108 function getCord(arr) {
 109     var newCord = new Array();
 110     var original = $.extend(true, [], arr);
 111     var arr = jQuery.unique(arr).sort();
 112     $.each(original, function(index, value) {
 113         newCord.push(jQuery.inArray(value, arr));
 114     });
 115     return [newCord, arr, original];
 116 }
 117
 118 /**
 119  ** Scrolls the view to the display section
 120  **/
 121 function scrollToChart() {
 122    var x = $('#dataDisplay').offset().top - 100; // 100 provides buffer in viewport
 123    $('html,body').animate({scrollTop: x}, 500);
 124 }
 125
 126 /**
 127  ** Handlers for panning feature
 128  **/
 129 function includePan(currentChart) {
 130     var mouseDown;
 131     var lastX;
 132     var lastY;
 133     var chartWidth = $('#resizer').width() - 3;
 134     var chartHeight = $('#resizer').height() - 20;
 135     $('#querychart').mousedown(function() {
 136         mouseDown = 1;
 137     });
 138
 139     $('#querychart').mouseup(function() {
 140         mouseDown = 0;
 141     });
 142     $('#querychart').mousemove(function(e) {
 143         if (mouseDown == 1) {
 144             if (e.pageX > lastX) {
 145                 var xExtremes = currentChart.xAxis[0].getExtremes();
 146                 var diff = (e.pageX - lastX) * (xExtremes.max - xExtremes.min) / chartWidth;
 147                 currentChart.xAxis[0].setExtremes(xExtremes.min - diff, xExtremes.max - diff);
 148             } else if (e.pageX < lastX) {
 149                 var xExtremes = currentChart.xAxis[0].getExtremes();
 150                 var diff = (lastX - e.pageX) * (xExtremes.max - xExtremes.min) / chartWidth;
 151                 currentChart.xAxis[0].setExtremes(xExtremes.min + diff, xExtremes.max + diff);
 152             }
 153
 154             if (e.pageY > lastY) {
 155                 var yExtremes = currentChart.yAxis[0].getExtremes();
 156                 var ydiff = 1.0 * (e.pageY - lastY) * (yExtremes.max - yExtremes.min) / chartHeight;
 157                 currentChart.yAxis[0].setExtremes(yExtremes.min + ydiff, yExtremes.max + ydiff);
 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     /**
 226       ** Prepare a div containing a link, otherwise it's incorrectly displayed
 227       ** after a couple of clicks
 228       **/
 229     $('<div id="togglesearchformdiv"><a id="togglesearchformlink"></a></div>')
 230         .insertAfter('#zoom_search_form')
 231         // don't show it until we have results on-screen
 232         .hide();
 233
 234     $('#togglesearchformlink')
 235         .html(PMA_messages['strShowSearchCriteria'])
 236         .bind('click', function() {
 237             var $link = $(this);
 238             $('#zoom_search_form').slideToggle();
 239             if ($link.text() == PMA_messages['strHideSearchCriteria']) {
 240                 $link.text(PMA_messages['strShowSearchCriteria']);
 241             } else {
 242                 $link.text(PMA_messages['strHideSearchCriteria']);
 243             }
 244          // avoid default click action
 245         return false;
 246      });
 247
 248     /**
 249      ** Set dialog properties for the data display form
 250      **/
 251     var buttonOptions = {};
 252     /*
 253      * Handle saving of a row in the editor
 254      */
 255     buttonOptions[PMA_messages['strSave']] = function () {
 256         //Find changed values by comparing form values with selectedRow Object
 257         var newValues = new Object();//Stores the values changed from original
 258         var sqlTypes = new Object();
 259         var it = 4;
 260         var xChange = false;
 261         var yChange = false;
 262         for (key in selectedRow) {
 263             var oldVal = selectedRow[key];
 264             var newVal = ($('#fields_null_id_' + it).attr('checked')) ? null : $('#fieldID_' + it).val();
 265             if (newVal instanceof Array) { // when the column is of type SET
 266                 newVal =  $('#fieldID_' + it).map(function(){
 267                     return $(this).val();
 268                 }).get().join(",");
 269             }
 270             if (oldVal != newVal) {
 271                 selectedRow[key] = newVal;
 272                 newValues[key] = newVal;
 273                 if (key == xLabel) {
 274                     xChange = true;
 275                     data[currentData][xLabel] = newVal;
 276                 } else if (key == yLabel) {
 277                     yChange = true;
 278                     data[currentData][yLabel] = newVal;
 279                 }
 280             }
 281             var $input = $('#fieldID_' + it);
 282             if ($input.hasClass('bit')) {
 283                 sqlTypes[key] = 'bit';
 284             }
 285             it++;
 286         } //End data update
 287
 288         //Update the chart series and replot
 289         if (xChange || yChange) {
 290             var newSeries = new Array();
 291             newSeries[0] = new Object();
 292             newSeries[0].marker = {
 293                 symbol: 'circle'
 294             };
 295             //Logic similar to plot generation, replot only if xAxis changes or yAxis changes.
 296             //Code includes a lot of checks so as to replot only when necessary
 297             if (xChange) {
 298                 xCord[currentData] = selectedRow[xLabel];
 299                 if (xType == 'numeric') {
 300                     currentChart.series[0].data[currentData].update({ x : selectedRow[xLabel] });
 301                     currentChart.xAxis[0].setExtremes(Array.min(xCord) - 6, Array.max(xCord) + 6);
 302                 } else if (xType == 'time') {
 303                     currentChart.series[0].data[currentData].update({
 304                         x : getTimeStamp(selectedRow[xLabel], $('#types_0').val())
 305                     });
 306                 } else {
 307                     var tempX = getCord(xCord);
 308                     var tempY = getCord(yCord);
 309                     var i = 0;
 310                     newSeries[0].data = new Array();
 311                     xCord = tempX[2];
 312                     yCord = tempY[2];
 313
 314                     $.each(data, function(key, value) {
 315                         if (yType != 'text') {
 316                             newSeries[0].data.push({
 317                                 name: value[dataLabel],
 318                                 x: tempX[0][i],
 319                                 y: value[yLabel],
 320                                 marker: {fillColor: colorCodes[i % 8]},
 321                                 id: i
 322                             });
 323                         } else {
 324                             newSeries[0].data.push({
 325                                 name: value[dataLabel],
 326                                 x: tempX[0][i],
 327                                 y: tempY[0][i],
 328                                 marker: {fillColor: colorCodes[i % 8]},
 329                                 id: i
 330                             });
 331                         }
 332                         i++;
 333                     });
 334                     currentSettings.xAxis.labels = {
 335                         formatter : function() {
 336                             if (tempX[1][this.value] && tempX[1][this.value].length > 10) {
 337                                 return tempX[1][this.value].substring(0, 10);
 338                             } else {
 339                                 return tempX[1][this.value];
 340                             }
 341                         }
 342                      };
 343                      currentSettings.series = newSeries;
 344                      currentChart = PMA_createChart(currentSettings);
 345                  }
 346
 347             }
 348             if (yChange) {
 349                 yCord[currentData] = selectedRow[yLabel];
 350                 if (yType == 'numeric') {
 351                     currentChart.series[0].data[currentData].update({ y : selectedRow[yLabel] });
 352                     currentChart.yAxis[0].setExtremes(Array.min(yCord) - 6, Array.max(yCord) + 6);
 353                 } else if (yType == 'time') {
 354                     currentChart.series[0].data[currentData].update({
 355                         y : getTimeStamp(selectedRow[yLabel], $('#types_1').val())
 356                     });
 357                 } else {
 358                     var tempX = getCord(xCord);
 359                     var tempY = getCord(yCord);
 360                     var i = 0;
 361                     newSeries[0].data = new Array();
 362                     xCord = tempX[2];
 363                     yCord = tempY[2];
 364
 365                     $.each(data, function(key, value) {
 366                         if (xType != 'text' ) {
 367                             newSeries[0].data.push({
 368                                 name: value[dataLabel],
 369                                 x: value[xLabel],
 370                                 y: tempY[0][i],
 371                                 marker: {fillColor: colorCodes[i % 8]},
 372                                 id: i
 373                             });
 374                         } else {
 375                             newSeries[0].data.push({
 376                                 name: value[dataLabel],
 377                                 x: tempX[0][i],
 378                                 y: tempY[0][i],
 379                                 marker: {fillColor: colorCodes[i % 8]},
 380                                 id: i
 381                             });
 382                         }
 383                         i++;
 384                     });
 385                     currentSettings.yAxis.labels = {
 386                         formatter : function() {
 387                             if (tempY[1][this.value] && tempY[1][this.value].length > 10) {
 388                                 return tempY[1][this.value].substring(0, 10);
 389                             } else {
 390                                 return tempY[1][this.value];
 391                             }
 392                         }
 393                      };
 394                      currentSettings.series = newSeries;
 395                      currentChart = PMA_createChart(currentSettings);
 396                 }
 397             }
 398             currentChart.series[0].data[currentData].select();
 399         } //End plot update
 400
 401         //Generate SQL query for update
 402         if (!isEmpty(newValues)) {
 403             var sql_query = 'UPDATE `' + window.parent.table + '` SET ';
 404             for (key in newValues) {
 405                 sql_query += '`' + key + '`=' ;
 406                 var value = newValues[key];
 407
 408                 // null
 409                 if (value == null) {
 410                     sql_query += 'NULL, ';
 411
 412                 // empty
 413                 } else if ($.trim(value) == '') {
 414                     sql_query += "'', ";
 415
 416                 // other
 417                 } else {
 418                     // type explicitly identified
 419                     if (sqlTypes[key] != null) {
 420                         if (sqlTypes[key] == 'bit') {
 421                             sql_query += "b'" + value + "', ";
 422                         }
 423                     // type not explicitly identified
 424                     } else {
 425                         if (!isNumeric(value)) {
 426                             sql_query += "'" + value + "', ";
 427                         } else {
 428                             sql_query += value + ', ';
 429                         }
 430                     }
 431                 }
 432             }
 433             sql_query = sql_query.substring(0, sql_query.length - 2);
 434             sql_query += ' WHERE ' + PMA_urldecode(data[currentData]['where_clause']);
 435
 436             //Post SQL query to sql.php
 437             $.post('sql.php', {
 438                     'token' : window.parent.token,
 439                     'db' : window.parent.db,
 440                     'ajax_request' : true,
 441                     'sql_query' : sql_query,
 442                     'inline_edit' : false
 443                 }, function(data) {
 444                     if (data.success == true) {
 445                         $('#sqlqueryresults').html(data.sql_query);
 446                         $("#sqlqueryresults").trigger('appendAnchor');
 447                     } else {
 448                         PMA_ajaxShowMessage(data.error);
 449                     }
 450             }); //End $.post
 451         }//End database update
 452         $("#dataDisplay").dialog('close');
 453     };
 454     buttonOptions[PMA_messages['strCancel']] = function () {
 455         $(this).dialog('close');
 456     };
 457     $("#dataDisplay").dialog({
 458         autoOpen: false,
 459         title: 'Data point content',
 460         modal: true,
 461         buttons: buttonOptions,
 462         width: $('#dataDisplay').width() + 24,
 463         open: function () {
 464             $(this).find('input[type=checkbox]').css('margin', '0.5em');
 465         }
 466     });
 467     /**
 468      * Attach Ajax event handlers for input fields
 469      * in the dialog. Used to submit the Ajax
 470      * request when the ENTER key is pressed.
 471      */
 472     $("#dataDisplay").find(':input').live('keydown', function (e) {
 473         if (e.which === 13) { // 13 is the ENTER key
 474             e.preventDefault();
 475             if (typeof buttonOptions[PMA_messages['strSave']] === 'function') {
 476                 buttonOptions[PMA_messages['strSave']].call();
 477             }
 478         }
 479     });
 480
 481
 482     /*
 483      * Generate plot using Highcharts
 484      */
 485
 486     if (data != null) {
 487         $('#zoom_search_form')
 488          .slideToggle()
 489          .hide();
 490         $('#togglesearchformlink')
 491          .text(PMA_messages['strShowSearchCriteria']);
 492         $('#togglesearchformdiv').show();
 493         var selectedRow;
 494         var colorCodes = ['#FF0000', '#00FFFF', '#0000FF', '#0000A0', '#FF0080', '#800080', '#FFFF00', '#00FF00', '#FF00FF'];
 495         var series = new Array();
 496         var xCord = new Array();
 497         var yCord = new Array();
 498         var tempX, tempY;
 499         var it = 0;
 500         var xMax; // xAxis extreme max
 501         var xMin; // xAxis extreme min
 502         var yMax; // yAxis extreme max
 503         var yMin; // yAxis extreme min
 504
 505         // Set the basic plot settings
 506         var currentSettings = {
 507             chart: {
 508                 renderTo: 'querychart',
 509                 type: 'scatter',
 510                 //zoomType: 'xy',
 511                 width:$('#resizer').width() - 3,
 512                 height:$('#resizer').height() - 20
 513             },
 514             credits: {
 515                 enabled: false
 516             },
 517             exporting: { enabled: false },
 518             label: { text: $('#dataLabel').val() },
 519             plotOptions: {
 520                 series: {
 521                     allowPointSelect: true,
 522                     cursor: 'pointer',
 523                     showInLegend: false,
 524                     dataLabels: {
 525                         enabled: false
 526                     },
 527                     point: {
 528                         events: {
 529                             click: function() {
 530                                 var id = this.id;
 531                                 var fid = 4;
 532                                 currentData = id;
 533                                 // Make AJAX request to tbl_zoom_select.php for getting the complete row info
 534                                 var post_params = {
 535                                     'ajax_request' : true,
 536                                     'get_data_row' : true,
 537                                     'db' : window.parent.db,
 538                                     'table' : window.parent.table,
 539                                     'where_clause' : data[id]['where_clause'],
 540                                     'token' : window.parent.token
 541                                 };
 542                                 $.post('tbl_zoom_select.php', post_params, function(data) {
 543                                     // Row is contained in data.row_info, now fill the displayResultForm with row values
 544                                     for (key in data.row_info) {
 545                                         $field = $('#fieldID_' + fid);
 546                                         $field_null = $('#fields_null_id_' + fid);
 547                                         if (data.row_info[key] == null) {
 548                                             $field_null.attr('checked', true);
 549                                             $field.val('');
 550                                         } else {
 551                                             $field_null.attr('checked', false);
 552                                             if ($field.attr('multiple')) { // when the column is of type SET
 553                                                 $field.val(data.row_info[key].split(','));
 554                                             } else {
 555                                                 $field.val(data.row_info[key]);
 556                                             }
 557                                         }
 558                                         fid++;
 559                                     }
 560                                     selectedRow = new Object();
 561                                     selectedRow = data.row_info;
 562                                 });
 563
 564                                 $("#dataDisplay").dialog("open");
 565                             }
 566                         }
 567                     }
 568                 }
 569             },
 570             tooltip: {
 571                 formatter: function() {
 572                     return this.point.name;
 573                 }
 574             },
 575             title: { text: 'Query Results' },
 576             xAxis: {
 577                 title: { text: $('#tableid_0').val() },
 578                 events: {
 579                     setExtremes: function(e) {
 580                         this.resetZoom.show();
 581                     }
 582                 }
 583
 584             },
 585             yAxis: {
 586                 min: null,
 587                 title: { text: $('#tableid_1').val() },
 588                 endOnTick: false,
 589                 startOnTick: false,
 590                 events: {
 591                     setExtremes: function(e) {
 592                         this.resetZoom.show();
 593                     }
 594                 }
 595             }
 596         };
 597
 598         // If data label is not set, do not show tooltips
 599         if (dataLabel == '') {
 600              currentSettings.tooltip.enabled = false;
 601         }
 602
 603         $('#resizer').resizable({
 604             resize: function() {
 605                 currentChart.setSize(
 606                     this.offsetWidth - 3,
 607                     this.offsetHeight - 20,
 608                     false
 609                 );
 610             }
 611         });
 612
 613         // Classify types as either numeric,time,text
 614         xType = getType(xType);
 615         yType = getType(yType);
 616
 617         //Set the axis type based on the field
 618         currentSettings.xAxis.type = (xType == 'time') ? 'datetime' : 'linear';
 619         currentSettings.yAxis.type = (yType == 'time') ? 'datetime' : 'linear';
 620
 621         // Formulate series data for plot
 622         series[0] = new Object();
 623         series[0].data = new Array();
 624         series[0].marker = {
 625             symbol: 'circle'
 626         };
 627         if (xType != 'text' && yType != 'text') {
 628             $.each(data, function(key, value) {
 629                 var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel], $('#types_0').val());
 630                 var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel], $('#types_1').val());
 631                 series[0].data.push({
 632                     name: value[dataLabel],
 633                     x: xVal,
 634                     y: yVal,
 635                     marker: {fillColor: colorCodes[it % 8]},
 636                     id: it
 637                 });
 638                 xCord.push(value[xLabel]);
 639                 yCord.push(value[yLabel]);
 640                 it++;
 641             });
 642             if (xType == 'numeric') {
 643                 currentSettings.xAxis.max = Array.max(xCord) + 6;
 644                 currentSettings.xAxis.min = Array.min(xCord) - 6;
 645             } else {
 646                 currentSettings.xAxis.labels = { formatter : function() {
 647                     return getDate(this.value, $('#types_0').val());
 648                 }};
 649             }
 650             if (yType == 'numeric') {
 651                 currentSettings.yAxis.max = Array.max(yCord) + 6;
 652                 currentSettings.yAxis.min = Array.min(yCord) - 6;
 653             } else {
 654                 currentSettings.yAxis.labels = { formatter : function() {
 655                      return getDate(this.value, $('#types_1').val());
 656                 }};
 657             }
 658
 659         } else if (xType == 'text' && yType != 'text') {
 660             $.each(data, function(key, value) {
 661                 xCord.push(value[xLabel]);
 662                 yCord.push(value[yLabel]);
 663             });
 664
 665             tempX = getCord(xCord);
 666             $.each(data, function(key, value) {
 667                 var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel], $('#types_1').val());
 668                 series[0].data.push({
 669                     name: value[dataLabel],
 670                     x: tempX[0][it],
 671                     y: yVal,
 672                     marker: {fillColor: colorCodes[it % 8]},
 673                     id: it
 674                 });
 675                 it++;
 676             });
 677
 678             currentSettings.xAxis.labels = {
 679                 formatter : function() {
 680                     if (tempX[1][this.value] && tempX[1][this.value].length > 10) {
 681                         return tempX[1][this.value].substring(0, 10);
 682                     } else {
 683                         return tempX[1][this.value];
 684                     }
 685                 }
 686             };
 687             if (yType == 'numeric') {
 688                 currentSettings.yAxis.max = Array.max(yCord) + 6;
 689                 currentSettings.yAxis.min = Array.min(yCord) - 6;
 690             } else {
 691                 currentSettings.yAxis.labels = {
 692                     formatter : function() {
 693                         return getDate(this.value, $('#types_1').val());
 694                     }
 695                 };
 696             }
 697             xCord = tempX[2];
 698
 699         } else if (xType != 'text' && yType == 'text') {
 700             $.each(data, function(key, value) {
 701                 xCord.push(value[xLabel]);
 702                 yCord.push(value[yLabel]);
 703             });
 704             tempY = getCord(yCord);
 705             $.each(data, function(key, value) {
 706                 var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel], $('#types_0').val());
 707                 series[0].data.push({
 708                     name: value[dataLabel],
 709                     y: tempY[0][it],
 710                     x: xVal,
 711                     marker: {fillColor: colorCodes[it % 8]},
 712                     id: it
 713                 });
 714                 it++;
 715             });
 716             if (xType == 'numeric') {
 717                 currentSettings.xAxis.max = Array.max(xCord) + 6;
 718                 currentSettings.xAxis.min = Array.min(xCord) - 6;
 719             } else {
 720                 currentSettings.xAxis.labels = {
 721                     formatter : function() {
 722                         return getDate(this.value, $('#types_0').val());
 723                     }
 724                 };
 725             }
 726             currentSettings.yAxis.labels = {
 727                 formatter : function() {
 728                     if (tempY[1][this.value] && tempY[1][this.value].length > 10) {
 729                         return tempY[1][this.value].substring(0, 10);
 730                     } else {
 731                         return tempY[1][this.value];
 732                     }
 733                 }
 734             };
 735             yCord = tempY[2];
 736
 737         } else if (xType == 'text' && yType == 'text') {
 738             $.each(data, function(key, value) {
 739                 xCord.push(value[xLabel]);
 740                 yCord.push(value[yLabel]);
 741             });
 742             tempX = getCord(xCord);
 743             tempY = getCord(yCord);
 744             $.each(data, function(key, value) {
 745                 series[0].data.push({
 746                     name: value[dataLabel],
 747                     x: tempX[0][it],
 748                     y: tempY[0][it],
 749                     marker: {fillColor: colorCodes[it % 8]},
 750                     id: it
 751                 });
 752                 it++;
 753             });
 754             currentSettings.xAxis.labels = {
 755                 formatter : function() {
 756                     if (tempX[1][this.value] && tempX[1][this.value].length > 10) {
 757                         return tempX[1][this.value].substring(0, 10);
 758                     } else {
 759                         return tempX[1][this.value];
 760                     }
 761                 }
 762             };
 763             currentSettings.yAxis.labels = {
 764                 formatter : function() {
 765                     if (tempY[1][this.value] && tempY[1][this.value].length > 10) {
 766                         return tempY[1][this.value].substring(0, 10);
 767                     } else {
 768                         return tempY[1][this.value];
 769                     }
 770                 }
 771             };
 772             xCord = tempX[2];
 773             yCord = tempY[2];
 774         }
 775
 776         currentSettings.series = series;
 777         currentChart = PMA_createChart(currentSettings);
 778         xMin = currentChart.xAxis[0].getExtremes().min;
 779         xMax = currentChart.xAxis[0].getExtremes().max;
 780         yMin = currentChart.yAxis[0].getExtremes().min;
 781         yMax = currentChart.yAxis[0].getExtremes().max;
 782         includePan(currentChart); //Enable panning feature
 783         var setZoom = function() {
 784             var newxm = xMin + (xMax - xMin) * (1 - zoomRatio) / 2;
 785             var newxM = xMax - (xMax - xMin) * (1 - zoomRatio) / 2;
 786             var newym = yMin + (yMax - yMin) * (1 - zoomRatio) / 2;
 787             var newyM = yMax - (yMax - yMin) * (1 - zoomRatio) / 2;
 788             currentChart.xAxis[0].setExtremes(newxm, newxM);
 789             currentChart.yAxis[0].setExtremes(newym, newyM);
 790         };
 791
 792         //Enable zoom feature
 793         $("#querychart").mousewheel(function(objEvent, intDelta) {
 794             if (intDelta > 0) {
 795                 if (zoomRatio > 0.1) {
 796                     zoomRatio = zoomRatio - 0.1;
 797                     setZoom();
 798                 }
 799             } else if (intDelta < 0) {
 800                 zoomRatio = zoomRatio + 0.1;
 801                 setZoom();
 802             }
 803         });
 804
 805         //Add reset zoom feature
 806         currentChart.yAxis[0].resetZoom = currentChart.xAxis[0].resetZoom = $('<a href="#">Reset zoom</a>')
 807             .appendTo(currentChart.container)
 808             .css({
 809                 position: 'absolute',
 810                 top: 10,
 811                 right: 20,
 812                 display: 'none'
 813             })
 814             .click(function() {
 815                 currentChart.xAxis[0].setExtremes(null, null);
 816                 currentChart.yAxis[0].setExtremes(null, null);
 817                 this.style.display = 'none';
 818             });
 819         scrollToChart();
 820     }
 821 });