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