From cc0fa75cce7b20b5dec45429a76f21f835ace7a4 Mon Sep 17 00:00:00 2001 From: Madhura Jayaratne Date: Fri, 30 May 2014 22:12:23 +0530 Subject: [PATCH] rfe #1527 Charts for data in format Signed-off-by: Madhura Jayaratne --- ChangeLog | 1 + js/tbl_chart.js | 123 ++++++++++++++++++++++++++++-------- libraries/tbl_chart.lib.php | 85 ++++++++++++++++++++----- 3 files changed, 169 insertions(+), 40 deletions(-) diff --git a/ChangeLog b/ChangeLog index c85edc8082..f6dd13b436 100644 --- a/ChangeLog +++ b/ChangeLog @@ -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 format 4.2.3.0 (not yet released) - bug #4423 Moving fields not working diff --git a/js/tbl_chart.js b/js/tbl_chart.js index aea9e068dc..b68cbd4f9c 100644 --- a/js/tbl_chart.js +++ b/js/tbl_chart.js @@ -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(); diff --git a/libraries/tbl_chart.lib.php b/libraries/tbl_chart.lib.php index 4453f0a1af..5a8f6c7475 100644 --- a/libraries/tbl_chart.lib.php +++ b/libraries/tbl_chart.lib.php @@ -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 = '
' . '' . '
' . '' . ' 

' + . '
' + . __('Series names are in a column') . ''; + + $htmlString .= '
' + . '' + . ''; + + $htmlString .= '' + . '
'; + 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') . '">' . '
'; - $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 .= ''; - $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();