diff options
Diffstat (limited to 'hugo/js/tbl_chart.js')
| -rw-r--r-- | hugo/js/tbl_chart.js | 320 |
1 files changed, 320 insertions, 0 deletions
diff --git a/hugo/js/tbl_chart.js b/hugo/js/tbl_chart.js new file mode 100644 index 0000000..dc292fd --- /dev/null +++ b/hugo/js/tbl_chart.js @@ -0,0 +1,320 @@ +/* vim: set expandtab sw=4 ts=4 sts=4: */ + +var chart_data = {}; +var temp_chart_title; + +var currentChart = null; +var currentSettings = null; + +/** + * Unbind all event handlers before tearing down a page + */ +AJAX.registerTeardown('tbl_chart.js', function() { + $('input[name="chartType"]').unbind('click'); + $('input[name="barStacked"]').unbind('click'); + $('input[name="chartTitle"]').unbind('focus').unbind('keyup').unbind('blur'); + $('select[name="chartXAxis"]').unbind('change'); + $('select[name="chartSeries"]').unbind('change'); + $('input[name="xaxis_label"]').unbind('keyup'); + $('input[name="yaxis_label"]').unbind('keyup'); + $('#resizer').unbind('resizestop'); +}); + +AJAX.registerOnload('tbl_chart.js', function() { + + // from jQuery UI + $('#resizer').resizable({ + minHeight: 240, + minWidth: 300 + }) + .width($('#div_view_options').width() - 50); + + $('#resizer').bind('resizestop', function(event, ui) { + // make room so that the handle will still appear + $('#querychart').height($('#resizer').height() * 0.96); + $('#querychart').width($('#resizer').width() * 0.96); + currentChart.redraw({ + resetAxes : true + }); + }); + + currentSettings = { + type : 'line', + width : $('#resizer').width() - 20, + height : $('#resizer').height() - 20, + xaxisLabel : $('input[name="xaxis_label"]').val(), + yaxisLabel : $('input[name="yaxis_label"]').val(), + title : $('input[name="chartTitle"]').val(), + stackSeries : false, + mainAxis : parseInt($('select[name="chartXAxis"]').val()), + selectedSeries : getSelectedSeries() + }; + + // handle chart type changes + $('input[name="chartType"]').click(function() { + currentSettings.type = $(this).val(); + drawChart(); + if ($(this).val() == 'bar' || $(this).val() == 'column' + || $(this).val() == 'line' || $(this).val() == 'area' + || $(this).val() == 'timeline' || $(this).val() == 'spline') { + $('span.barStacked').show(); + } else { + $('span.barStacked').hide(); + } + }); + + // handle stacking for bar, column and area charts + $('input[name="barStacked"]').click(function() { + if (this.checked) { + $.extend(true, currentSettings, {stackSeries : true}); + } else { + $.extend(true, currentSettings, {stackSeries : false}); + } + drawChart(); + }); + + // handle changes in chart title + $('input[name="chartTitle"]').focus(function() { + temp_chart_title = $(this).val(); + }).keyup(function() { + var title = $(this).val(); + if (title.length == 0) { + title = ' '; + } + currentSettings.title = $('input[name="chartTitle"]').val(); + drawChart(); + }).blur(function() { + if ($(this).val() != temp_chart_title) { + drawChart(); + } + }); + + var dateTimeCols = []; + var vals = $('input[name="dateTimeCols"]').val().split(' '); + $.each(vals, function(i, v) { + dateTimeCols.push(parseInt(v)); + }); + + // handle changing the x-axis + $('select[name="chartXAxis"]').change(function() { + currentSettings.mainAxis = parseInt($(this).val()); + if (dateTimeCols.indexOf(currentSettings.mainAxis) != -1) { + $('span.span_timeline').show(); + } else { + $('span.span_timeline').hide(); + if (currentSettings.type == 'timeline') { + $('input#radio_line').prop('checked', true); + currentSettings.type = 'line'; + } + } + var xaxis_title = $(this).children('option:selected').text(); + $('input[name="xaxis_label"]').val(xaxis_title); + currentSettings.xaxisLabel = xaxis_title; + drawChart(); + }); + + // handle changing the selected data series + $('select[name="chartSeries"]').change(function() { + currentSettings.selectedSeries = getSelectedSeries(); + var yaxis_title; + if (currentSettings.selectedSeries.length == 1) { + $('span.span_pie').show(); + yaxis_title = $(this).children('option:selected').text(); + } else { + $('span.span_pie').hide(); + if (currentSettings.type == 'pie') { + $('input#radio_line').prop('checked', true); + currentSettings.type = 'line'; + } + yaxis_title = PMA_messages['strYValues']; + } + $('input[name="yaxis_label"]').val(yaxis_title); + currentSettings.yaxisLabel = yaxis_title; + drawChart(); + }); + + // handle manual changes to the chart axis labels + $('input[name="xaxis_label"]').keyup(function() { + currentSettings.xaxisLabel = $(this).val(); + drawChart(); + }); + $('input[name="yaxis_label"]').keyup(function() { + currentSettings.yaxisLabel = $(this).val(); + drawChart(); + }); + + $("#tblchartform").submit(); +}); + +/** + * Ajax Event handler for 'Go' button click + * + */ +$("#tblchartform").live('submit', function(event) { + if (!checkFormElementInRange(this, 'session_max_rows', PMA_messages['strNotValidRowNumber'], 1) + || !checkFormElementInRange(this, 'pos', PMA_messages['strNotValidRowNumber'], 0 - 1)) { + return false; + } + + var $form = $(this); + if (!checkSqlQuery($form[0])) { + return false; + } + // remove any div containing a previous error message + $('.error').remove(); + var $msgbox = PMA_ajaxShowMessage(); + PMA_prepareForAjaxRequest($form); + + $.post($form.attr('action'), $form.serialize(), function(data) { + if (data.success == true) { + $('.success').fadeOut(); + if (typeof data.chartData != 'undefined') { + chart_data = jQuery.parseJSON(data.chartData); + drawChart(); + $('div#querychart').height($('div#resizer').height() * 0.96); + $('div#querychart').width($('div#resizer').width() * 0.96); + currentChart.redraw({ + resetAxes : true + }); + $('#querychart').show(); + } + } else { + PMA_ajaxRemoveMessage($msgbox); + PMA_ajaxShowMessage(data.error, false); + chart_data = null; + drawChart(); + } + PMA_ajaxRemoveMessage($msgbox); + }, "json"); // end $.post() + + return false; +}); // end + +function drawChart() { + currentSettings.width = $('#resizer').width() - 20; + currentSettings.height = $('#resizer').height() - 20; + + // todo: a better way using .redraw() ? + if (currentChart != null) { + currentChart.destroy(); + } + + var columnNames = []; + $('select[name="chartXAxis"] option').each(function() { + columnNames.push($(this).text()); + }); + try { + currentChart = PMA_queryChart(chart_data, columnNames, currentSettings); + } catch(err) { + PMA_ajaxShowMessage(err.message, false); + } +} + +function getSelectedSeries() { + var val = $('select[name="chartSeries"]').val() || []; + var ret = []; + $.each(val, function(i, v) { + ret.push(parseInt(v)); + }); + return ret; +} + +function extractDate(dateString) { + var matches, match; + var dateTimeRegExp = /[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}/; + var dateRegExp = /[0-9]{4}-[0-9]{2}-[0-9]{2}/; + + matches = dateTimeRegExp.exec(dateString); + if (matches != null && matches.length > 0) { + match = matches[0]; + return new Date(match.substr(0, 4), match.substr(5, 2), match.substr(8, 2), match.substr(11, 2), match.substr(14, 2), match.substr(17, 2)); + } else { + matches = dateRegExp.exec(dateString); + if (matches != null && matches.length > 0) { + match = matches[0]; + return new Date(match.substr(0, 4), match.substr(5, 2), match.substr(8, 2)); + } + } + return null; +} + +function PMA_queryChart(data, columnNames, settings) { + if ($('#querychart').length == 0) { + return; + } + + var jqPlotSettings = { + title : { + text : settings.title, + escapeHtml: true + }, + grid : { + drawBorder : false, + shadow : false, + background : 'rgba(0,0,0,0)' + }, + legend : { + show : true, + placement : 'outsideGrid', + location : 'e' + }, + axes : { + xaxis : { + label : settings.xaxisLabel + }, + yaxis : { + label : settings.yaxisLabel + } + }, + stackSeries : settings.stackSeries, + highlighter: { + show: true, + showTooltip: true, + tooltipAxes: 'xy' + } + }; + + // create the chart + var factory = new JQPlotChartFactory(); + var chart = factory.createChart(settings.type, "querychart"); + + // create the data table and add columns + var dataTable = new DataTable(); + if (settings.type == 'timeline') { + dataTable.addColumn(ColumnType.DATE, columnNames[settings.mainAxis]); + } 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 { // 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); + + // draw the chart and return the chart object + chart.draw(dataTable, jqPlotSettings); + return chart; +} |