gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rfe #1527 Charts for data in <x-axis, series, value> format

Browse Source 
Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>
This commit is contained in:
Madhura Jayaratne 2014-05-30 22:12:23 +05:30
parent 6ef94bec20
commit cc0fa75cce
3 changed files with 169 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

@ -10,6 +10,7 @@ phpMyAdmin - ChangeLog
- rfe #982 Support for editing binary fields in hexadecimal
- bug #4416 New lines are removed when grid editing
- rfe #706 Multi-db privileges adding
- rfe #1527 Charts for data in <x-axis, series, value> format
4.2.3.0 (not yet released)
- bug #4423 Moving fields not working

123
js/tbl_chart.js
View File

@ -69,36 +69,72 @@ function PMA_queryChart(data, columnNames, settings) {
} else {
dataTable.addColumn(ColumnType.STRING, columnNames[settings.mainAxis]);
}
$.each(settings.selectedSeries, function (index, element) {
dataTable.addColumn(ColumnType.NUMBER, columnNames[element]);
});
// set data to the data table
var columnsToExtract = [ settings.mainAxis ];
$.each(settings.selectedSeries, function (index, element) {
columnsToExtract.push(element);
});
var values = [], newRow, row, col;
for (var i = 0; i < data.length; i++) {
row = data[i];
newRow = [];
for (var j = 0; j < columnsToExtract.length; j++) {
col = columnNames[columnsToExtract[j]];
if (j === 0) {
if (settings.type == 'timeline') { // first column is date type
newRow.push(extractDate(row[col]));
} else if (settings.type == 'scatter') {
if (settings.seriesColumn == null) {
$.each(settings.selectedSeries, function (index, element) {
dataTable.addColumn(ColumnType.NUMBER, columnNames[element]);
});
// set data to the data table
var columnsToExtract = [ settings.mainAxis ];
$.each(settings.selectedSeries, function (index, element) {
columnsToExtract.push(element);
});
var values = [], newRow, row, col;
for (var i = 0; i < data.length; i++) {
row = data[i];
newRow = [];
for (var j = 0; j < columnsToExtract.length; j++) {
col = columnNames[columnsToExtract[j]];
if (j === 0) {
if (settings.type == 'timeline') { // first column is date type
newRow.push(extractDate(row[col]));
} else if (settings.type == 'scatter') {
newRow.push(parseFloat(row[col]));
} else { // first column is string type
newRow.push(row[col]);
}
} else { // subsequent columns are of type, number
newRow.push(parseFloat(row[col]));
} else { // first column is string type
newRow.push(row[col]);
}
} else { // subsequent columns are of type, number
newRow.push(parseFloat(row[col]));
}
values.push(newRow);
}
dataTable.setData(values);
} else {
var seriesNames = {}, seriesNumber = 1;
var seriesColumnName = columnNames[settings.seriesColumn];
for (var i = 0; i < data.length; i++) {
if (! seriesNames[data[i][seriesColumnName]]) {
seriesNames[data[i][seriesColumnName]] = seriesNumber;
seriesNumber++;
}
}
values.push(newRow);
$.each(seriesNames, function (seriesName, seriesNumber) {
dataTable.addColumn(ColumnType.NUMBER, seriesName);
});
var valueMap = {}, xValue, value;
var mainAxisName = columnNames[settings.mainAxis]
var valueColumnName = columnNames[settings.valueColumn]
for (var i = 0; i < data.length; i++) {
xValue = data[i][mainAxisName];
value = valueMap[xValue];
if (! value) {
value = [xValue];
valueMap[xValue] = value;
}
seriesNumber = seriesNames[data[i][seriesColumnName]];
value[seriesNumber] = parseFloat(data[i][valueColumnName]);
}
var values = [];
$.each(valueMap, function(index, value) {
values.push(value);
});
dataTable.setData(values);
}
dataTable.setData(values);
// draw the chart and return the chart object
chart.draw(dataTable, jqPlotSettings);
@ -140,9 +176,12 @@ function getSelectedSeries() {
AJAX.registerTeardown('tbl_chart.js', function () {
$('input[name="chartType"]').unbind('click');
$('input[name="barStacked"]').unbind('click');
$('input[name="chkAlternative"]').unbind('click');
$('input[name="chartTitle"]').unbind('focus').unbind('keyup').unbind('blur');
$('select[name="chartXAxis"]').unbind('change');
$('select[name="chartSeries"]').unbind('change');
$('select[name="chartSeriesColumn"]').unbind('change');
$('select[name="chartValueColumn"]').unbind('change');
$('input[name="xaxis_label"]').unbind('keyup');
$('input[name="yaxis_label"]').unbind('keyup');
$('#resizer').unbind('resizestop');
@ -175,7 +214,8 @@ AJAX.registerOnload('tbl_chart.js', function () {
title : $('input[name="chartTitle"]').val(),
stackSeries : false,
mainAxis : parseInt($('select[name="chartXAxis"]').val(), 10),
selectedSeries : getSelectedSeries()
selectedSeries : getSelectedSeries(),
seriesColumn : null
};
// handle chart type changes
@ -191,6 +231,27 @@ AJAX.registerOnload('tbl_chart.js', function () {
drawChart();
});
// handle chosing alternative data format
$('input[name="chkAlternative"]').click(function () {
var $seriesColumn = $('select[name="chartSeriesColumn"]');
var $valueColumn = $('select[name="chartValueColumn"]');
var $chartSeries = $('select[name="chartSeries"]');
if ($(this).is(':checked')) {
$seriesColumn.attr('disabled', false);
$valueColumn.attr('disabled', false);
$chartSeries.attr('disabled', true);
currentSettings.seriesColumn = parseInt($seriesColumn.val(), 10);
currentSettings.valueColumn = parseInt($valueColumn.val(), 10);
} else {
$seriesColumn.attr('disabled', true);
$valueColumn.attr('disabled', true);
$chartSeries.attr('disabled', false);
currentSettings.seriesColumn = null;
currentSettings.valueColumn = null;
}
drawChart();
});
// handle stacking for bar, column and area charts
$('input[name="barStacked"]').click(function () {
if ($(this).is(':checked')) {
@ -279,6 +340,18 @@ AJAX.registerOnload('tbl_chart.js', function () {
drawChart();
});
// handle changing the series column
$('select[name="chartSeriesColumn"]').change(function () {
currentSettings.seriesColumn = parseInt($(this).val(), 10);
drawChart();
});
// handle changing the value column
$('select[name="chartValueColumn"]').change(function () {
currentSettings.valueColumn = parseInt($(this).val(), 10);
drawChart();
});
// handle manual changes to the chart axis labels
$('input[name="xaxis_label"]').keyup(function () {
currentSettings.xaxisLabel = $(this).val();

85
libraries/tbl_chart.lib.php
View File

@ -90,21 +90,21 @@ function PMA_getHtmlForStackedOption()
* Function to get html for the chart x axis options
*
* @param array $keys keys
* @param int &$yaxis y axis
* @param int &$xaxis x axis
*
* @return string
*/
function PMA_getHtmlForChartXAxisOptions($keys, &$yaxis)
function PMA_getHtmlForChartXAxisOptions($keys, &$xaxis)
{
$htmlString = '<div style="float:left; padding-left:40px;">'
. '<label for="select_chartXAxis">' . __('X-Axis:') . '</label>'
. '<select name="chartXAxis" id="select_chartXAxis">';
foreach ($keys as $idx => $key) {
if ($yaxis === null) {
if ($xaxis === null) {
$htmlString .= '<option value="' . htmlspecialchars($idx)
. '" selected="selected">' . htmlspecialchars($key) . '</option>';
$yaxis = $idx;
$xaxis = $idx;
} else {
$htmlString .= '<option value="' . htmlspecialchars($idx) . '">'
. htmlspecialchars($key) . '</option>';
@ -115,20 +115,19 @@ function PMA_getHtmlForChartXAxisOptions($keys, &$yaxis)
return $htmlString;
}
/**
* Function to get html for chart series options
*
* @param array $keys keys
* @param array $fields_meta fields meta
* @param array $numeric_types numeric types
* @param int $yaxis y axis
* @param int $xaxis x axis
* @param int $numeric_column_count numeric column count
*
* @return string
*/
function PMA_getHtmlForChartSeriesOptions($keys, $fields_meta, $numeric_types,
$yaxis, $numeric_column_count
$xaxis, $numeric_column_count
) {
$htmlString = '<br />'
. '<label for="select_chartSeries">' . __('Series:') . '</label>'
@ -136,7 +135,7 @@ function PMA_getHtmlForChartSeriesOptions($keys, $fields_meta, $numeric_types,
foreach ($keys as $idx => $key) {
if (in_array($fields_meta[$idx]->type, $numeric_types)) {
if ($idx == $yaxis && $numeric_column_count > 1) {
if ($idx == $xaxis && $numeric_column_count > 1) {
$htmlString .= '<option value="' . htmlspecialchars($idx) . '">'
. htmlspecialchars($key) . '</option>';
} else {
@ -198,18 +197,18 @@ function PMA_getHtmlForNumericCols($keys, $fields_meta, $numeric_types)
/**
* Function to get html for the table axis label options
*
* @param int $yaxis y axis
* @param int $xaxis x axis
* @param array $keys keys
*
* @return string
*/
function PMA_getHtmlForTableAxisLabelOptions($yaxis, $keys)
function PMA_getHtmlForTableAxisLabelOptions($xaxis, $keys)
{
$htmlString = '<div style="float:left; padding-left:40px;">'
. '<label for="xaxis_label">' . __('X-Axis label:') . '</label>'
. '<input style="margin-top:0;" type="text" name="xaxis_label" id="xaxis_label"'
. ' value="'
. (($yaxis == -1) ? __('X Values') : htmlspecialchars($keys[$yaxis]))
. (($xaxis == -1) ? __('X Values') : htmlspecialchars($keys[$xaxis]))
. '" /><br />'
. '<label for="yaxis_label">' . __('Y-Axis label:') . '</label>'
. '<input type="text" name="yaxis_label" id="yaxis_label" value="'
@ -219,6 +218,59 @@ function PMA_getHtmlForTableAxisLabelOptions($yaxis, $keys)
return $htmlString;
}
/**
* Function to get html for switching to alternative data format
*
* @param array $keys keys
* @param array $fields_meta fields meta
* @param array $numeric_types numeric types
* @param int $xaxis x axis
*
* @return string
*/
function PMA_getHtmlForAlternativeDataFormat($keys, $fields_meta, $numeric_types,
$xaxis
) {
$htmlString = '<p style="clear:both;">&nbsp;</p>'
. '<div><input type="checkbox" id="chkAlternative" '
. 'name="chkAlternative" value="alternativeFormat">'
. __('Series names are in a column') . '</input>';
$htmlString .= '<br />'
. '<label for="select_seriesColumn">' . __('Series column:') . '</label>'
. '<select name="chartSeriesColumn" id="select_seriesColumn" disabled>';
foreach ($keys as $idx => $key) {
$htmlString .= '<option value="' . htmlspecialchars($idx) . '"';
if ($idx == 1) {
$htmlString .= ' selected="selected"';
$seriesColumn = $idx;
}
$htmlString .= '>' . htmlspecialchars($key) . '</option>';
}
$htmlString .= '</select>';
$htmlString .= '<label for="select_valueColumn">'
. __('Value column:') . '</label>'
. '<select name="chartValueColumn" id="select_valueColumn" disabled>';
$selected = false;
foreach ($keys as $idx => $key) {
if (in_array($fields_meta[$idx]->type, $numeric_types)) {
if (! $selected && $idx != $xaxis && $idx != $seriesColumn) {
$htmlString .= '<option value="' . htmlspecialchars($idx)
. '" selected="selected">' . htmlspecialchars($key)
. '</option>';
$selected = true;
} else {
$htmlString .= '<option value="' . htmlspecialchars($idx) . '">'
. htmlspecialchars($key) . '</option>';
}
}
}
$htmlString .= '</select></div>';
return $htmlString;
}
/**
* Function to get html for the start row and number of rows options
*
@ -300,16 +352,19 @@ function PMA_getHtmlForTableChartDisplay($url_query, $url_params, $keys,
. __('Chart title')
. '">'
. '</div>';
$yaxis = null;
$htmlString .= PMA_getHtmlForChartXAxisOptions($keys, $yaxis);
$xaxis = null;
$htmlString .= PMA_getHtmlForChartXAxisOptions($keys, $xaxis);
$htmlString .= PMA_getHtmlForChartSeriesOptions(
$keys, $fields_meta, $numeric_types, $yaxis, $numeric_column_count
$keys, $fields_meta, $numeric_types, $xaxis, $numeric_column_count
);
$htmlString .= PMA_getHtmlForDateTimeCols($keys, $fields_meta);
$htmlString .= PMA_getHtmlForNumericCols($keys, $fields_meta, $numeric_types);
$htmlString .= '</div>';
$htmlString .= PMA_getHtmlForTableAxisLabelOptions($yaxis, $keys);
$htmlString .= PMA_getHtmlForTableAxisLabelOptions($xaxis, $keys);
$htmlString .= PMA_getHtmlForAlternativeDataFormat(
$keys, $fields_meta, $numeric_types, $xaxis
);
$htmlString .= PMA_getHtmlForStartAndNumberOfRowsOptions($sql_query);
$htmlString .= PMA_getHtmlForChartAreaDiv();