diff --git a/js/functions.js b/js/functions.js
index b0fc717652..f67b6a9c97 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1291,62 +1291,136 @@ $(document).ready(function(){
/**
* Show a message on the top of the page for an Ajax request
*
- * @param var message string containing the message to be shown.
+ * Sample usage:
+ *
+ * 1) var $msg = PMA_ajaxShowMessage();
+ * This will show a message that reads "Loading...". Such a message will not
+ * disappear automatically and cannot be dismissed by the user. To remove this
+ * message either the PMA_ajaxRemoveMessage($msg) function must be called or
+ * another message must be show with PMA_ajaxShowMessage() function.
+ *
+ * 2) var $msg = PMA_ajaxShowMessage(PMA_messages['strProcessingRequest']);
+ * This is a special case. The behaviour is same as above,
+ * just with a different message
+ *
+ * 3) var $msg = PMA_ajaxShowMessage('The operation was successful');
+ * This will show a message that will disappear automatically and it can also
+ * be dismissed by the user.
+ *
+ * 4) var $msg = PMA_ajaxShowMessage('Some error', false);
+ * This will show a message that will not disappear automatically, but it
+ * can be dismissed by the user after he has finished reading it.
+ *
+ * @param string message string containing the message to be shown.
* optional, defaults to 'Loading...'
- * @param var timeout number of milliseconds for the message to be visible
- * optional, defaults to 5000
+ * @param mixed timeout number of milliseconds for the message to be visible
+ * optional, defaults to 5000. If set to 'false', the
+ * notification will never disappear
* @return jQuery object jQuery Element that holds the message div
+ * this object can be passed to PMA_ajaxRemoveMessage()
+ * to remove the notification
*/
function PMA_ajaxShowMessage(message, timeout)
{
-
- //Handle the case when a empty data.message is passed. We don't want the empty message
+ /**
+ * @var self_closing Whether the notification will automatically disappear
+ */
+ var self_closing = true;
+ /**
+ * @var dismissable Whether the user will be able to remove
+ * the notification by clicking on it
+ */
+ var dismissable = true;
+ // Handle the case when a empty data.message is passed.
+ // We don't want the empty message
if (message == '') {
return true;
} else if (! message) {
// If the message is undefined, show the default
message = PMA_messages['strLoading'];
+ dismissable = false;
+ self_closing = false;
+ } else if (message == PMA_messages['strProcessingRequest']) {
+ // This is another case where the message should not disappear
+ dismissable = false;
+ self_closing = false;
}
-
- /**
- * @var timeout Number of milliseconds for which the message will be visible
- * @default 5000 ms
- */
- if (! timeout) {
+ // Figure out whether (or after how long) to remove the notification
+ if (timeout == undefined) {
timeout = 5000;
+ } else if (timeout === false) {
+ self_closing = false;
}
-
// Create a parent element for the AJAX messages, if necessary
if ($('#loading_parent').length == 0) {
$('')
.insertBefore("#serverinfo");
}
-
// Update message count to create distinct message elements every time
ajax_message_count++;
-
// Remove all old messages, if any
$(".ajax_notification[id^=ajax_message_num]").remove();
-
/**
* @var $retval a jQuery object containing the reference
* to the created AJAX message
*/
- var $retval = $('')
- .hide()
- .appendTo("#loading_parent")
- .html(message)
- .fadeIn('medium')
+ var $retval = $(
+ ''
+ )
+ .hide()
+ .appendTo("#loading_parent")
+ .html(message)
+ .fadeIn('medium');
+ // If the notification is self-closing we should create a callback to remove it
+ if (self_closing) {
+ $retval
.delay(timeout)
.fadeOut('medium', function() {
+ if ($(this).is('.dismissable')) {
+ // Here we should destroy the qtip instance, but
+ // due to a bug in qtip's implementation we can
+ // only hide it without throwing JS errors.
+ $(this).qtip('hide');
+ }
+ // Remove the notification
$(this).remove();
});
+ }
+ // If the notification is dismissable we need to add the relevant class to it
+ // and add a tooltip so that the users know that it can be removed
+ if (dismissable) {
+ $retval.addClass('dismissable').css('cursor', 'pointer');
+ /**
+ * @var qOpts Options for "Dismiss notification" tooltip
+ */
+ var qOpts = {
+ show: {
+ effect: { length: 0 },
+ delay: 0
+ },
+ hide: {
+ effect: { length: 0 },
+ delay: 0
+ }
+ };
+ /**
+ * Add a tooltip to the notification to let the user know that (s)he
+ * can dismiss the ajax notification by clicking on it.
+ */
+ PMA_createqTip($retval, PMA_messages['strDismiss'], qOpts);
+ }
return $retval;
}
/**
* Removes the message shown for an Ajax operation when it's completed
+ *
+ * @param jQuery object jQuery Element that holds the notification
+ *
+ * @return nothing
*/
function PMA_ajaxRemoveMessage($this_msgbox)
{
@@ -1354,9 +1428,37 @@ function PMA_ajaxRemoveMessage($this_msgbox)
$this_msgbox
.stop(true, true)
.fadeOut('medium');
+ if ($this_msgbox.is('.dismissable')) {
+ // Here we should destroy the qtip instance, but
+ // due to a bug in qtip's implementation we can
+ // only hide it without throwing JS errors.
+ $this_msgbox.qtip('hide');
+ }
}
}
+$(document).ready(function() {
+ /**
+ * Allows the user to dismiss a notification
+ * created with PMA_ajaxShowMessage()
+ */
+ $('.ajax_notification.dismissable').live('click', function () {
+ PMA_ajaxRemoveMessage($(this));
+ });
+ /**
+ * The below two functions hide the "Dismiss notification" tooltip when a user
+ * is hovering a link or button that is inside an ajax message
+ */
+ $('.ajax_notification a, .ajax_notification button, .ajax_notification input')
+ .live('mouseover', function () {
+ $(this).parents('.ajax_notification').qtip('hide');
+ });
+ $('.ajax_notification a, .ajax_notification button, .ajax_notification input')
+ .live('mouseout', function () {
+ $(this).parents('.ajax_notification').qtip('show');
+ });
+});
+
/**
* Hides/shows the "Open in ENUM/SET editor" message, depending on the data type of the column currently selected
*/
@@ -2895,7 +2997,7 @@ var toggleButton = function ($obj) {
} else {
$(this).addClass('isActive');
}
- var $msg = PMA_ajaxShowMessage(PMA_messages['strLoading']);
+ var $msg = PMA_ajaxShowMessage();
var $container = $(this);
var callback = $('.callback', this).text();
// Perform the actual toggle
diff --git a/js/messages.php b/js/messages.php
index daed4742f5..96f759b186 100644
--- a/js/messages.php
+++ b/js/messages.php
@@ -214,6 +214,7 @@ $js_messages['strErrorProcessingRequest'] = __('Error in Processing Request');
$js_messages['strDroppingColumn'] = __('Dropping Column');
$js_messages['strAddingPrimaryKey'] = __('Adding Primary Key');
$js_messages['strOK'] = __('OK');
+$js_messages['strDismiss'] = __('Click to dismiss this notification');
/* For db_operations.js */
$js_messages['strRenamingDatabases'] = __('Renaming Databases');
diff --git a/js/rte/common.js b/js/rte/common.js
index 85234590d7..842f3250ed 100644
--- a/js/rte/common.js
+++ b/js/rte/common.js
@@ -198,7 +198,7 @@ $(document).ready(function () {
});
}
} else {
- PMA_ajaxShowMessage(data.error);
+ PMA_ajaxShowMessage(data.error, false);
}
}); // end $.post()
} // end "if (RTE.validate())"
@@ -245,7 +245,7 @@ $(document).ready(function () {
// Execute item-specific code
RTE.postDialogShow(data);
} else {
- PMA_ajaxShowMessage(data.error);
+ PMA_ajaxShowMessage(data.error, false);
}
}); // end $.get()
}); // end $.live()
@@ -301,7 +301,7 @@ $(document).ready(function () {
var opts = {lineNumbers: true, matchBrackets: true, indentUnit: 4, mode: "text/x-mysql"};
CodeMirror.fromTextArea($elm[0], opts);
} else {
- PMA_ajaxShowMessage(data.error);
+ PMA_ajaxShowMessage(data.error, false);
}
}); // end $.get()
}); // end $.live()
@@ -370,7 +370,7 @@ $(document).ready(function () {
// Show the query that we just executed
PMA_slidingMessage(data.sql_query);
} else {
- PMA_ajaxShowMessage(PMA_messages['strErrorProcessingRequest'] + " : " + data.error);
+ PMA_ajaxShowMessage(PMA_messages['strErrorProcessingRequest'] + " : " + data.error, false);
}
}); // end $.get()
}); // end $.PMA_confirm()
diff --git a/js/rte/routines.js b/js/rte/routines.js
index ac7a291925..087b9d61a5 100644
--- a/js/rte/routines.js
+++ b/js/rte/routines.js
@@ -357,7 +357,7 @@ $(document).ready(function () {
PMA_slidingMessage(data.message);
$ajaxDialog.dialog('close');
} else {
- PMA_ajaxShowMessage(data.error);
+ PMA_ajaxShowMessage(data.error, false);
}
});
};
@@ -388,7 +388,7 @@ $(document).ready(function () {
PMA_slidingMessage(data.message);
}
} else {
- PMA_ajaxShowMessage(data.error);
+ PMA_ajaxShowMessage(data.error, false);
}
}); // end $.get()
}); // end $.live()
diff --git a/js/tbl_zoom_plot.js b/js/tbl_zoom_plot.js
index b8c4259640..788ca6396c 100644
--- a/js/tbl_zoom_plot.js
+++ b/js/tbl_zoom_plot.js
@@ -11,7 +11,7 @@
** Display Help/Info
**/
function displayHelp() {
- var msgbox = PMA_ajaxShowMessage(PMA_messages['strDisplayHelp'],10000);
+ var msgbox = PMA_ajaxShowMessage(PMA_messages['strDisplayHelp'], 10000);
msgbox.click(function() {
PMA_ajaxRemoveMessage(msgbox);
});
@@ -23,7 +23,7 @@ function displayHelp() {
**/
Array.max = function (array) {
return Math.max.apply( Math, array );
-}
+};
/**
** Extend the array object for min function
@@ -31,11 +31,11 @@ Array.max = function (array) {
**/
Array.min = function (array) {
return Math.min.apply( Math, array );
-}
+};
/**
** Checks if a string contains only numeric value
- ** @param n: String (to be checked)
+ ** @param n: String (to be checked)
**/
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
@@ -43,7 +43,7 @@ function isNumeric(n) {
/**
** Checks if an object is empty
- ** @param n: Object (to be checked)
+ ** @param n: Object (to be checked)
**/
function isEmpty(obj) {
var name;
@@ -58,16 +58,16 @@ function isEmpty(obj) {
** @param val Integer Timestamp
** @param type String Field type(datetime/timestamp/time/date)
**/
-function getDate(val,type) {
- if(type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
- return Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', val)
- }
- else if(type.toString().search(/time/i) != -1) {
- return Highcharts.dateFormat('%H:%M:%S', val)
- }
+function getDate(val, type) {
+ if (type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
+ return Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', val);
+ }
+ else if (type.toString().search(/time/i) != -1) {
+ return Highcharts.dateFormat('%H:%M:%S', val);
+ }
else if (type.toString().search(/date/i) != -1) {
- return Highcharts.dateFormat('%Y-%m-%e', val)
- }
+ return Highcharts.dateFormat('%Y-%m-%e', val);
+ }
}
/**
@@ -75,42 +75,42 @@ function getDate(val,type) {
** @param val String Date
** @param type Sring Field type(datetime/timestamp/time/date)
**/
-function getTimeStamp(val,type) {
- if(type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
- return getDateFromFormat(val,'yyyy-MM-dd HH:mm:ss', val)
- }
- else if(type.toString().search(/time/i) != -1) {
- return getDateFromFormat('1970-01-01 ' + val,'yyyy-MM-dd HH:mm:ss')
- }
+function getTimeStamp(val, type) {
+ if (type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
+ return getDateFromFormat(val, 'yyyy-MM-dd HH:mm:ss', val);
+ }
+ else if (type.toString().search(/time/i) != -1) {
+ return getDateFromFormat('1970-01-01 ' + val, 'yyyy-MM-dd HH:mm:ss');
+ }
else if (type.toString().search(/date/i) != -1) {
- return getDateFromFormat(val,'yyyy-MM-dd')
- }
+ return getDateFromFormat(val, 'yyyy-MM-dd');
+ }
}
/**
** Classifies the field type into numeric,timeseries or text
** @param field: field type (as in database structure)
- **/
+ **/
function getType(field) {
- if(field.toString().search(/int/i) != -1 || field.toString().search(/decimal/i) != -1 || field.toString().search(/year/i) != -1)
+ if (field.toString().search(/int/i) != -1 || field.toString().search(/decimal/i) != -1 || field.toString().search(/year/i) != -1)
return 'numeric';
- else if(field.toString().search(/time/i) != -1 || field.toString().search(/date/i) != -1)
+ else if (field.toString().search(/time/i) != -1 || field.toString().search(/date/i) != -1)
return 'time';
else
return 'text';
}
-/**
+/**
** Converts a categorical array into numeric array
** @param array categorical values array
**/
function getCord(arr) {
var newCord = new Array();
- var original = $.extend(true,[],arr);
+ var original = $.extend(true, [], arr);
var arr = jQuery.unique(arr).sort();
- $.each(original, function(index,value) {
- newCord.push(jQuery.inArray(value,arr));
+ $.each(original, function(index, value) {
+ newCord.push(jQuery.inArray(value, arr));
});
- return [newCord,arr,original];
+ return [newCord, arr, original];
}
/**
@@ -140,23 +140,21 @@ function includePan(currentChart) {
$('#querychart').mousemove(function(e) {
if (mouseDown == 1) {
if (e.pageX > lastX) {
- var xExtremes = currentChart.xAxis[0].getExtremes();
+ var xExtremes = currentChart.xAxis[0].getExtremes();
var diff = (e.pageX - lastX) * (xExtremes.max - xExtremes.min) / chartWidth;
currentChart.xAxis[0].setExtremes(xExtremes.min - diff, xExtremes.max - diff);
- }
- else if (e.pageX < lastX) {
- var xExtremes = currentChart.xAxis[0].getExtremes();
+ } else if (e.pageX < lastX) {
+ var xExtremes = currentChart.xAxis[0].getExtremes();
var diff = (lastX - e.pageX) * (xExtremes.max - xExtremes.min) / chartWidth;
currentChart.xAxis[0].setExtremes(xExtremes.min + diff, xExtremes.max + diff);
}
if (e.pageY > lastY) {
- var yExtremes = currentChart.yAxis[0].getExtremes();
+ var yExtremes = currentChart.yAxis[0].getExtremes();
var ydiff = 1.0 * (e.pageY - lastY) * (yExtremes.max - yExtremes.min) / chartHeight;
currentChart.yAxis[0].setExtremes(yExtremes.min + ydiff, yExtremes.max + ydiff);
- }
- else if (e.pageY < lastY) {
- var yExtremes = currentChart.yAxis[0].getExtremes();
+ } else if (e.pageY < lastY) {
+ var yExtremes = currentChart.yAxis[0].getExtremes();
var ydiff = 1.0 * (lastY - e.pageY) * (yExtremes.max - yExtremes.min) / chartHeight;
currentChart.yAxis[0].setExtremes(yExtremes.min - ydiff, yExtremes.max - ydiff);
}
@@ -176,7 +174,7 @@ $(document).ready(function() {
cache: 'false'
});
- var cursorMode = ($("input[name='mode']:checked").val() == 'edit') ? 'crosshair' : 'pointer';
+ var cursorMode = ($("input[name='mode']:checked").val() == 'edit') ? 'crosshair' : 'pointer';
var currentChart = null;
var currentData = null;
var xLabel = $('#tableid_0').val();
@@ -189,7 +187,7 @@ $(document).ready(function() {
var zoomRatio = 1;
- // Get query result
+ // Get query result
var data = jQuery.parseJSON($('#querydata').html());
/**
@@ -197,38 +195,39 @@ $(document).ready(function() {
**/
$('#tableid_0').change(function() {
$('#zoom_search_form').submit();
- })
+ });
$('#tableid_1').change(function() {
$('#zoom_search_form').submit();
- })
+ });
$('#tableid_2').change(function() {
$('#zoom_search_form').submit();
- })
+ });
$('#tableid_3').change(function() {
$('#zoom_search_form').submit();
- })
-
- /**
- * Input form validation
- **/
- $('#inputFormSubmitId').click(function() {
- if ($('#tableid_0').get(0).selectedIndex == 0 || $('#tableid_1').get(0).selectedIndex == 0)
- PMA_ajaxShowMessage(PMA_messages['strInputNull']);
- else if (xLabel == yLabel)
- PMA_ajaxShowMessage(PMA_messages['strSameInputs']);
});
/**
- ** Prepare a div containing a link, otherwise it's incorrectly displayed
+ * Input form validation
+ **/
+ $('#inputFormSubmitId').click(function() {
+ if ($('#tableid_0').get(0).selectedIndex == 0 || $('#tableid_1').get(0).selectedIndex == 0) {
+ PMA_ajaxShowMessage(PMA_messages['strInputNull']);
+ } else if (xLabel == yLabel) {
+ PMA_ajaxShowMessage(PMA_messages['strSameInputs']);
+ }
+ });
+
+ /**
+ ** Prepare a div containing a link, otherwise it's incorrectly displayed
** after a couple of clicks
**/
$('')
- .insertAfter('#zoom_search_form')
- // don't show it until we have results on-screen
- .hide();
+ .insertAfter('#zoom_search_form')
+ // don't show it until we have results on-screen
+ .hide();
$('#togglesearchformlink')
.html(PMA_messages['strShowSearchCriteria'])
@@ -243,466 +242,471 @@ $(document).ready(function() {
// avoid default click action
return false;
});
-
- /**
+
+ /**
** Set dialog properties for the data display form
**/
$("#dataDisplay").dialog({
autoOpen: false,
- title: 'Data point content',
+ title: 'Data point content',
modal: false, //false otherwise other dialogues like timepicker may not function properly
height: $('#dataDisplay').height() + 80,
width: $('#dataDisplay').width() + 80
});
/*
- * Handle submit of zoom_display_form
+ * Handle submit of zoom_display_form
*/
-
+
$("#submitForm").click(function(event) {
-
+
//Prevent default submission of form
event.preventDefault();
-
- //Find changed values by comparing form values with selectedRow Object
- var newValues = new Array();//Stores the values changed from original
+
+ //Find changed values by comparing form values with selectedRow Object
+ var newValues = new Array();//Stores the values changed from original
var it = 4;
var xChange = false;
var yChange = false;
- for (key in selectedRow) {
- if (key != 'where_clause'){
- var oldVal = selectedRow[key];
- var newVal = ($('#fields_null_id_' + it).attr('checked')) ? null : $('#fieldID_' + it).val();
- if (oldVal != newVal){
- selectedRow[key] = newVal;
- newValues[key] = newVal;
- if(key == xLabel) {
- xChange = true;
- data[currentData][xLabel] = newVal;
+ for (key in selectedRow) {
+ if (key != 'where_clause') {
+ var oldVal = selectedRow[key];
+ var newVal = ($('#fields_null_id_' + it).attr('checked')) ? null : $('#fieldID_' + it).val();
+ if (oldVal != newVal) {
+ selectedRow[key] = newVal;
+ newValues[key] = newVal;
+ if (key == xLabel) {
+ xChange = true;
+ data[currentData][xLabel] = newVal;
+ } else if (key == yLabel) {
+ yChange = true;
+ data[currentData][yLabel] = newVal;
+ }
+ }
}
- else if(key == yLabel) {
- yChange = true;
- data[currentData][yLabel] = newVal;
- }
- }
- }
- it++
- }//End data update
-
- //Update the chart series and replot
+ it++;
+ } //End data update
+
+ //Update the chart series and replot
if (xChange || yChange) {
- var newSeries = new Array();
- newSeries[0] = new Object();
+ var newSeries = new Array();
+ newSeries[0] = new Object();
newSeries[0].marker = {
symbol: 'circle'
};
- //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
- if(xChange) {
- xCord[currentData] = selectedRow[xLabel];
- if(xType == 'numeric') {
- currentChart.series[0].data[currentData].update({ x : selectedRow[xLabel] });
- currentChart.xAxis[0].setExtremes(Array.min(xCord) - 6,Array.max(xCord) + 6);
- }
- else if(xType == 'time') {
- currentChart.series[0].data[currentData].update({ x : getTimeStamp(selectedRow[xLabel],$('#types_0').val())});
- }
- else {
- var tempX = getCord(xCord);
- var tempY = getCord(yCord);
- var i = 0;
- newSeries[0].data = new Array();
- xCord = tempX[2];
- yCord = tempY[2];
+ //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
+ if (xChange) {
+ xCord[currentData] = selectedRow[xLabel];
+ if (xType == 'numeric') {
+ currentChart.series[0].data[currentData].update({ x : selectedRow[xLabel] });
+ currentChart.xAxis[0].setExtremes(Array.min(xCord) - 6, Array.max(xCord) + 6);
+ } else if (xType == 'time') {
+ currentChart.series[0].data[currentData].update({ x : getTimeStamp(selectedRow[xLabel], $('#types_0').val())});
+ } else {
+ var tempX = getCord(xCord);
+ var tempY = getCord(yCord);
+ var i = 0;
+ newSeries[0].data = new Array();
+ xCord = tempX[2];
+ yCord = tempY[2];
- $.each(data,function(key,value) {
- if(yType != 'text')
- newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: value[yLabel], marker: {fillColor: colorCodes[i % 8]} , id: i } );
- else
+ $.each(data, function(key, value) {
+ if (yType != 'text') {
+ newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: value[yLabel], marker: {fillColor: colorCodes[i % 8]} , id: i } );
+ } else {
newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
- i++;
- });
- currentSettings.xAxis.labels = { formatter : function() {
- if(tempX[1][this.value] && tempX[1][this.value].length > 10)
- return tempX[1][this.value].substring(0,10)
- else
- return tempX[1][this.value];
}
- }
- currentSettings.series = newSeries;
- currentChart = PMA_createChart(currentSettings);
- }
-
- }
- if(yChange) {
-
- yCord[currentData] = selectedRow[yLabel];
- if(yType == 'numeric') {
- currentChart.series[0].data[currentData].update({ y : selectedRow[yLabel] });
- currentChart.yAxis[0].setExtremes(Array.min(yCord) - 6,Array.max(yCord) + 6);
- }
- else if(yType =='time') {
- currentChart.series[0].data[currentData].update({ y : getTimeStamp(selectedRow[yLabel],$('#types_1').val())});
- }
- else {
- var tempX = getCord(xCord);
- var tempY = getCord(yCord);
- var i = 0;
- newSeries[0].data = new Array();
- xCord = tempX[2];
- yCord = tempY[2];
-
- $.each(data,function(key,value) {
- if(xType != 'text' )
- newSeries[0].data.push({ name: value[dataLabel], x: value[xLabel], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
- else
- newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
- i++;
+ i++;
});
- currentSettings.yAxis.labels = { formatter : function() {
- if(tempY[1][this.value] && tempY[1][this.value].length > 10)
- return tempY[1][this.value].substring(0,10)
- else
- return tempY[1][this.value];
+ currentSettings.xAxis.labels = {
+ formatter : function() {
+ if (tempX[1][this.value] && tempX[1][this.value].length > 10) {
+ return tempX[1][this.value].substring(0, 10);
+ } else {
+ return tempX[1][this.value];
+ }
}
- }
- currentSettings.series = newSeries;
- currentChart = PMA_createChart(currentSettings);
- }
- }
- currentChart.series[0].data[currentData].select();
- }
- //End plot update
+ };
+ currentSettings.series = newSeries;
+ currentChart = PMA_createChart(currentSettings);
+ }
- //Generate SQL query for update
- if (!isEmpty(newValues)) {
- var sql_query = 'UPDATE `' + window.parent.table + '` SET ';
- for (key in newValues) {
- if(key != 'where_clause') {
- sql_query += '`' + key + '`=' ;
- var value = newValues[key];
- if(!isNumeric(value) && value != null)
- sql_query += '\'' + value + '\' ,';
- else
- sql_query += value + ' ,';
}
- }
- sql_query = sql_query.substring(0, sql_query.length - 1);
- sql_query += ' WHERE ' + PMA_urldecode(data[currentData]['where_clause']);
-
- //Post SQL query to sql.php
- $.post('sql.php', {
- 'token' : window.parent.token,
- 'db' : window.parent.db,
- 'ajax_request' : true,
- 'sql_query' : sql_query,
- 'inline_edit' : false
- }, function(data) {
- if(data.success == true) {
- $('#sqlqueryresults').html(data.sql_query);
- $("#sqlqueryresults").trigger('appendAnchor');
+ if (yChange) {
+ yCord[currentData] = selectedRow[yLabel];
+ if (yType == 'numeric') {
+ currentChart.series[0].data[currentData].update({ y : selectedRow[yLabel] });
+ currentChart.yAxis[0].setExtremes(Array.min(yCord) - 6, Array.max(yCord) + 6);
+ } else if (yType == 'time') {
+ currentChart.series[0].data[currentData].update({ y : getTimeStamp(selectedRow[yLabel], $('#types_1').val())});
+ } else {
+ var tempX = getCord(xCord);
+ var tempY = getCord(yCord);
+ var i = 0;
+ newSeries[0].data = new Array();
+ xCord = tempX[2];
+ yCord = tempY[2];
+
+ $.each(data, function(key, value) {
+ if (xType != 'text' ) {
+ newSeries[0].data.push({ name: value[dataLabel], x: value[xLabel], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
+ } else {
+ newSeries[0].data.push({ name: value[dataLabel], x: tempX[0][i], y: tempY[0][i], marker: {fillColor: colorCodes[i % 8]} , id: i } );
+ }
+ i++;
+ });
+ currentSettings.yAxis.labels = {
+ formatter : function() {
+ if (tempY[1][this.value] && tempY[1][this.value].length > 10) {
+ return tempY[1][this.value].substring(0, 10);
+ } else {
+ return tempY[1][this.value];
+ }
+ }
+ };
+ currentSettings.series = newSeries;
+ currentChart = PMA_createChart(currentSettings);
}
- else
- PMA_ajaxShowMessage(data.error);
- })//End $.post
- }//End database update
- $("#dataDisplay").dialog("close");
- });//End submit handler
+ }
+ currentChart.series[0].data[currentData].select();
+ } //End plot update
+
+ //Generate SQL query for update
+ if (!isEmpty(newValues)) {
+ var sql_query = 'UPDATE `' + window.parent.table + '` SET ';
+ for (key in newValues) {
+ if (key != 'where_clause') {
+ sql_query += '`' + key + '`=' ;
+ var value = newValues[key];
+ if (!isNumeric(value) && value != null) {
+ sql_query += '\'' + value + '\' ,';
+ } else {
+ sql_query += value + ' ,';
+ }
+ }
+ }
+ sql_query = sql_query.substring(0, sql_query.length - 1);
+ sql_query += ' WHERE ' + PMA_urldecode(data[currentData]['where_clause']);
+
+ //Post SQL query to sql.php
+ $.post('sql.php', {
+ 'token' : window.parent.token,
+ 'db' : window.parent.db,
+ 'ajax_request' : true,
+ 'sql_query' : sql_query,
+ 'inline_edit' : false
+ }, function(data) {
+ if (data.success == true) {
+ $('#sqlqueryresults').html(data.sql_query);
+ $("#sqlqueryresults").trigger('appendAnchor');
+ } else {
+ PMA_ajaxShowMessage(data.error);
+ }
+ }); //End $.post
+ }//End database update
+ $("#dataDisplay").dialog("close");
+ });//End submit handler
/*
* Generate plot using Highcharts
- */
+ */
if (data != null) {
$('#zoom_search_form')
.slideToggle()
.hide();
$('#togglesearchformlink')
- .text(PMA_messages['strShowSearchCriteria'])
- $('#togglesearchformdiv').show();
+ .text(PMA_messages['strShowSearchCriteria']);
+ $('#togglesearchformdiv').show();
var selectedRow;
- var colorCodes = ['#FF0000','#00FFFF','#0000FF','#0000A0','#FF0080','#800080','#FFFF00','#00FF00','#FF00FF'];
+ var colorCodes = ['#FF0000', '#00FFFF', '#0000FF', '#0000A0', '#FF0080', '#800080', '#FFFF00', '#00FF00', '#FF00FF'];
var series = new Array();
var xCord = new Array();
var yCord = new Array();
- var tempX, tempY;
+ var tempX, tempY;
var it = 0;
- var xMax; // xAxis extreme max
- var xMin; // xAxis extreme min
- var yMax; // yAxis extreme max
- var yMin; // yAxis extreme min
+ var xMax; // xAxis extreme max
+ var xMin; // xAxis extreme min
+ var yMax; // yAxis extreme max
+ var yMin; // yAxis extreme min
// Set the basic plot settings
var currentSettings = {
chart: {
renderTo: 'querychart',
type: 'scatter',
- //zoomType: 'xy',
- width:$('#resizer').width() -3,
- height:$('#resizer').height()-20
- },
- credits: {
- enabled: false
+ //zoomType: 'xy',
+ width:$('#resizer').width() - 3,
+ height:$('#resizer').height() - 20
},
- exporting: { enabled: false },
+ credits: {
+ enabled: false
+ },
+ exporting: { enabled: false },
label: { text: $('#dataLabel').val() },
- plotOptions: {
- series: {
- allowPointSelect: true,
+ plotOptions: {
+ series: {
+ allowPointSelect: true,
cursor: 'pointer',
- showInLegend: false,
+ showInLegend: false,
dataLabels: {
- enabled: false,
+ enabled: false
},
- point: {
+ point: {
events: {
click: function() {
- var id = this.id;
- var fid = 4;
- currentData = id;
- // Make AJAX request to tbl_zoom_select.php for getting the complete row info
- var post_params = {
+ var id = this.id;
+ var fid = 4;
+ currentData = id;
+ // Make AJAX request to tbl_zoom_select.php for getting the complete row info
+ var post_params = {
'ajax_request' : true,
'get_data_row' : true,
'db' : window.parent.db,
'table' : window.parent.table,
'where_clause' : data[id]['where_clause'],
- 'token' : window.parent.token,
- }
+ 'token' : window.parent.token
+ };
$.post('tbl_zoom_select.php', post_params, function(data) {
- // Row is contained in data.row_info, now fill the displayResultForm with row values
- for ( key in data.row_info) {
- if (data.row_info[key] == null)
- $('#fields_null_id_' + fid).attr('checked', true);
- else
- $('#fieldID_' + fid).val(data.row_info[key]);
- fid++;
- }
- selectedRow = new Object();
- selectedRow = data.row_info;
+ // Row is contained in data.row_info, now fill the displayResultForm with row values
+ for ( key in data.row_info) {
+ if (data.row_info[key] == null) {
+ $('#fields_null_id_' + fid).attr('checked', true);
+ } else {
+ $('#fieldID_' + fid).val(data.row_info[key]);
+ }
+ fid++;
+ }
+ selectedRow = new Object();
+ selectedRow = data.row_info;
});
- $("#dataDisplay").dialog("open");
- },
+ $("#dataDisplay").dialog("open");
+ }
}
+ }
}
- }
- },
- tooltip: {
- formatter: function() {
- return this.point.name;
- }
- },
+ },
+ tooltip: {
+ formatter: function() {
+ return this.point.name;
+ }
+ },
title: { text: 'Query Results' },
- xAxis: {
- title: { text: $('#tableid_0').val() },
- events: {
- setExtremes: function(e){
+ xAxis: {
+ title: { text: $('#tableid_0').val() },
+ events: {
+ setExtremes: function(e) {
this.resetZoom.show();
}
}
},
yAxis: {
- min: null,
- title: { text: $('#tableid_1').val() },
- endOnTick: false,
+ min: null,
+ title: { text: $('#tableid_1').val() },
+ endOnTick: false,
startOnTick: false,
- events: {
- setExtremes: function(e){
+ events: {
+ setExtremes: function(e) {
this.resetZoom.show();
}
}
- },
- }
+ }
+ };
$('#resizer').resizable({
resize: function() {
currentChart.setSize(
- this.offsetWidth -3,
- this.offsetHeight -20,
+ this.offsetWidth - 3,
+ this.offsetHeight - 20,
false
);
}
});
-
- // Classify types as either numeric,time,text
- xType = getType(xType);
- yType = getType(yType);
- //Set the axis type based on the field
- currentSettings.xAxis.type = (xType == 'time') ? 'datetime' : 'linear';
- currentSettings.yAxis.type = (yType == 'time') ? 'datetime' : 'linear';
+ // Classify types as either numeric,time,text
+ xType = getType(xType);
+ yType = getType(yType);
+
+ //Set the axis type based on the field
+ currentSettings.xAxis.type = (xType == 'time') ? 'datetime' : 'linear';
+ currentSettings.yAxis.type = (yType == 'time') ? 'datetime' : 'linear';
// Formulate series data for plot
series[0] = new Object();
series[0].data = new Array();
- series[0].marker = {
+ series[0].marker = {
symbol: 'circle'
};
- if (xType != 'text' && yType != 'text') {
- $.each(data,function(key,value) {
- var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel],$('#types_0').val());
- var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel],$('#types_1').val());
+ if (xType != 'text' && yType != 'text') {
+ $.each(data, function(key, value) {
+ var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel], $('#types_0').val());
+ var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel], $('#types_1').val());
series[0].data.push({ name: value[dataLabel], x: xVal, y: yVal, marker: {fillColor: colorCodes[it % 8]} , id: it } );
- xCord.push(value[xLabel]);
- yCord.push(value[yLabel]);
- it++;
+ xCord.push(value[xLabel]);
+ yCord.push(value[yLabel]);
+ it++;
});
- if(xType == 'numeric') {
- currentSettings.xAxis.max = Array.max(xCord) + 6
- currentSettings.xAxis.min = Array.min(xCord) - 6
- }
- else {
- currentSettings.xAxis.labels = { formatter : function() {
- return getDate(this.value, $('#types_0').val());
- }}
+ if (xType == 'numeric') {
+ currentSettings.xAxis.max = Array.max(xCord) + 6;
+ currentSettings.xAxis.min = Array.min(xCord) - 6;
+ } else {
+ currentSettings.xAxis.labels = { formatter : function() {
+ return getDate(this.value, $('#types_0').val());
+ }};
}
- if(yType == 'numeric') {
- currentSettings.yAxis.max = Array.max(yCord) + 6
- currentSettings.yAxis.min = Array.min(yCord) - 6
- }
- else {
- currentSettings.yAxis.labels = { formatter : function() {
- return getDate(this.value, $('#types_1').val());
- }}
+ if (yType == 'numeric') {
+ currentSettings.yAxis.max = Array.max(yCord) + 6;
+ currentSettings.yAxis.min = Array.min(yCord) - 6;
+ } else {
+ currentSettings.yAxis.labels = { formatter : function() {
+ return getDate(this.value, $('#types_1').val());
+ }};
}
- }
-
- else if (xType =='text' && yType !='text') {
- $.each(data,function(key,value) {
- xCord.push(value[xLabel]);
- yCord.push(value[yLabel]);
- });
-
- tempX = getCord(xCord);
- $.each(data,function(key,value) {
- var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel],$('#types_1').val());
+ } else if (xType == 'text' && yType != 'text') {
+ $.each(data, function(key, value) {
+ xCord.push(value[xLabel]);
+ yCord.push(value[yLabel]);
+ });
+
+ tempX = getCord(xCord);
+ $.each(data, function(key, value) {
+ var yVal = (yType == 'numeric') ? value[yLabel] : getTimeStamp(value[yLabel], $('#types_1').val());
series[0].data.push({ name: value[dataLabel], x: tempX[0][it], y: yVal, marker: {fillColor: colorCodes[it % 8]} , id: it } );
- it++;
+ it++;
});
-
- currentSettings.xAxis.labels = { formatter : function() {
- if(tempX[1][this.value] && tempX[1][this.value].length > 10)
- return tempX[1][this.value].substring(0,10)
- else
- return tempX[1][this.value];
- }
+
+ currentSettings.xAxis.labels = {
+ formatter : function() {
+ if (tempX[1][this.value] && tempX[1][this.value].length > 10) {
+ return tempX[1][this.value].substring(0, 10);
+ } else {
+ return tempX[1][this.value];
+ }
+ }
+ };
+ if (yType == 'numeric') {
+ currentSettings.yAxis.max = Array.max(yCord) + 6;
+ currentSettings.yAxis.min = Array.min(yCord) - 6;
+ } else {
+ currentSettings.yAxis.labels = {
+ formatter : function() {
+ return getDate(this.value, $('#types_1').val());
+ }
+ };
}
- if(yType == 'numeric') {
- currentSettings.yAxis.max = Array.max(yCord) + 6
- currentSettings.yAxis.min = Array.min(yCord) - 6
- }
- else {
- currentSettings.yAxis.labels = { formatter : function() {
- return getDate(this.value, $('#types_1').val());
- }}
- }
- xCord = tempX[2];
- }
-
- else if (xType !='text' && yType =='text') {
- $.each(data,function(key,value) {
- xCord.push(value[xLabel]);
- yCord.push(value[yLabel]);
- });
- tempY = getCord(yCord);
- $.each(data,function(key,value) {
- var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel],$('#types_0').val());
+ xCord = tempX[2];
+
+ } else if (xType != 'text' && yType == 'text') {
+ $.each(data, function(key, value) {
+ xCord.push(value[xLabel]);
+ yCord.push(value[yLabel]);
+ });
+ tempY = getCord(yCord);
+ $.each(data, function(key, value) {
+ var xVal = (xType == 'numeric') ? value[xLabel] : getTimeStamp(value[xLabel], $('#types_0').val());
series[0].data.push({ name: value[dataLabel], y: tempY[0][it], x: xVal, marker: {fillColor: colorCodes[it % 8]} , id: it } );
- it++;
+ it++;
});
- if(xType == 'numeric') {
- currentSettings.xAxis.max = Array.max(xCord) + 6
- currentSettings.xAxis.min = Array.min(xCord) - 6
- }
- else {
- currentSettings.xAxis.labels = { formatter : function() {
- return getDate(this.value, $('#types_0').val());
- }}
+ if (xType == 'numeric') {
+ currentSettings.xAxis.max = Array.max(xCord) + 6;
+ currentSettings.xAxis.min = Array.min(xCord) - 6;
+ } else {
+ currentSettings.xAxis.labels = {
+ formatter : function() {
+ return getDate(this.value, $('#types_0').val());
+ }
+ };
}
- currentSettings.yAxis.labels = { formatter : function() {
- if(tempY[1][this.value] && tempY[1][this.value].length > 10)
- return tempY[1][this.value].substring(0,10)
- else
- return tempY[1][this.value];
- }
- }
- yCord = tempY[2];
- }
-
- else if (xType =='text' && yType =='text') {
- $.each(data,function(key,value) {
- xCord.push(value[xLabel]);
- yCord.push(value[yLabel]);
- });
- tempX = getCord(xCord);
- tempY = getCord(yCord);
- $.each(data,function(key,value) {
+ currentSettings.yAxis.labels = {
+ formatter : function() {
+ if (tempY[1][this.value] && tempY[1][this.value].length > 10) {
+ return tempY[1][this.value].substring(0, 10);
+ } else {
+ return tempY[1][this.value];
+ }
+ }
+ };
+ yCord = tempY[2];
+
+ } else if (xType == 'text' && yType == 'text') {
+ $.each(data, function(key, value) {
+ xCord.push(value[xLabel]);
+ yCord.push(value[yLabel]);
+ });
+ tempX = getCord(xCord);
+ tempY = getCord(yCord);
+ $.each(data, function(key, value) {
series[0].data.push({ name: value[dataLabel], x: tempX[0][it], y: tempY[0][it], marker: {fillColor: colorCodes[it % 8]} , id: it } );
- it++;
+ it++;
});
- currentSettings.xAxis.labels = { formatter : function() {
- if(tempX[1][this.value] && tempX[1][this.value].length > 10)
- return tempX[1][this.value].substring(0,10)
- else
- return tempX[1][this.value];
- }
- }
- currentSettings.yAxis.labels = { formatter : function() {
- if(tempY[1][this.value] && tempY[1][this.value].length > 10)
- return tempY[1][this.value].substring(0,10)
- else
- return tempY[1][this.value];
- }
+ currentSettings.xAxis.labels = {
+ formatter : function() {
+ if (tempX[1][this.value] && tempX[1][this.value].length > 10) {
+ return tempX[1][this.value].substring(0, 10);
+ } else {
+ return tempX[1][this.value];
+ }
+ }
+ };
+ currentSettings.yAxis.labels = {
+ formatter : function() {
+ if (tempY[1][this.value] && tempY[1][this.value].length > 10) {
+ return tempY[1][this.value].substring(0, 10);
+ } else {
+ return tempY[1][this.value];
+ }
+ }
+ };
+ xCord = tempX[2];
+ yCord = tempY[2];
}
- xCord = tempX[2];
- yCord = tempY[2];
- }
-
- currentSettings.series = series;
+ currentSettings.series = series;
currentChart = PMA_createChart(currentSettings);
- xMin = currentChart.xAxis[0].getExtremes().min;
+ xMin = currentChart.xAxis[0].getExtremes().min;
xMax = currentChart.xAxis[0].getExtremes().max;
yMin = currentChart.yAxis[0].getExtremes().min;
yMax = currentChart.yAxis[0].getExtremes().max;
- includePan(currentChart); //Enable panning feature
+ includePan(currentChart); //Enable panning feature
var setZoom = function() {
- var newxm = xMin + (xMax - xMin) * (1 - zoomRatio) / 2;
- var newxM = xMax - (xMax - xMin) * (1 - zoomRatio) / 2;
- var newym = yMin + (yMax - yMin) * (1 - zoomRatio) / 2;
- var newyM = yMax - (yMax - yMin) * (1 - zoomRatio) / 2;
- currentChart.xAxis[0].setExtremes(newxm,newxM);
- currentChart.yAxis[0].setExtremes(newym,newyM);
- };
- //Enable zoom feature
- $("#querychart").mousewheel(function(objEvent, intDelta) {
+ var newxm = xMin + (xMax - xMin) * (1 - zoomRatio) / 2;
+ var newxM = xMax - (xMax - xMin) * (1 - zoomRatio) / 2;
+ var newym = yMin + (yMax - yMin) * (1 - zoomRatio) / 2;
+ var newyM = yMax - (yMax - yMin) * (1 - zoomRatio) / 2;
+ currentChart.xAxis[0].setExtremes(newxm, newxM);
+ currentChart.yAxis[0].setExtremes(newym, newyM);
+ };
+
+ //Enable zoom feature
+ $("#querychart").mousewheel(function(objEvent, intDelta) {
if (intDelta > 0) {
if (zoomRatio > 0.1) {
zoomRatio = zoomRatio - 0.1;
setZoom();
}
- }
- else if (intDelta < 0) {
+ } else if (intDelta < 0) {
zoomRatio = zoomRatio + 0.1;
setZoom();
}
});
+
//Add reset zoom feature
currentChart.yAxis[0].resetZoom = currentChart.xAxis[0].resetZoom = $('Reset zoom')
- .appendTo(currentChart.container)
- .css({
- position: 'absolute',
- top: 10,
- right: 20,
- display: 'none'
- })
- .click(function(){
- currentChart.xAxis[0].setExtremes(null, null)
- currentChart.yAxis[0].setExtremes(null, null)
- this.style.display = 'none'
- });
- scrollToChart();
+ .appendTo(currentChart.container)
+ .css({
+ position: 'absolute',
+ top: 10,
+ right: 20,
+ display: 'none'
+ })
+ .click(function() {
+ currentChart.xAxis[0].setExtremes(null, null);
+ currentChart.yAxis[0].setExtremes(null, null);
+ this.style.display = 'none';
+ });
+ scrollToChart();
}
});