js/tbl_chart.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2
   3 var chart_data = {};
   4 var temp_chart_title;
   5
   6 var currentChart = null;
   7 var currentSettings = null;
   8
   9 function extractDate(dateString) {
  10     var matches, match;
  11     var dateTimeRegExp = /[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}/;
  12     var dateRegExp = /[0-9]{4}-[0-9]{2}-[0-9]{2}/;
  13
  14     matches = dateTimeRegExp.exec(dateString);
  15     if (matches !== null && matches.length > 0) {
  16         match = matches[0];
  17         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));
  18     } else {
  19         matches = dateRegExp.exec(dateString);
  20         if (matches !== null && matches.length > 0) {
  21             match = matches[0];
  22             return new Date(match.substr(0, 4), match.substr(5, 2), match.substr(8, 2));
  23         }
  24     }
  25     return null;
  26 }
  27
  28 function PMA_queryChart(data, columnNames, settings) {
  29     if ($('#querychart').length === 0) {
  30         return;
  31     }
  32
  33     var jqPlotSettings = {
  34         title : {
  35             text : settings.title,
  36             escapeHtml: true
  37         },
  38         grid : {
  39             drawBorder : false,
  40             shadow : false,
  41             background : 'rgba(0,0,0,0)'
  42         },
  43         legend : {
  44             show : true,
  45             placement : 'outsideGrid',
  46             location : 'e'
  47         },
  48         axes : {
  49             xaxis : {
  50                 label : settings.xaxisLabel
  51             },
  52             yaxis : {
  53                 label : settings.yaxisLabel
  54             }
  55         },
  56         stackSeries : settings.stackSeries,
  57         highlighter: {
  58             show: true,
  59             showTooltip: true,
  60             tooltipAxes: 'xy'
  61         }
  62     };
  63
  64     // create the chart
  65     var factory = new JQPlotChartFactory();
  66     var chart = factory.createChart(settings.type, "querychart");
  67
  68     // create the data table and add columns
  69     var dataTable = new DataTable();
  70     if (settings.type == 'timeline') {
  71         dataTable.addColumn(ColumnType.DATE, columnNames[settings.mainAxis]);
  72     } else {
  73         dataTable.addColumn(ColumnType.STRING, columnNames[settings.mainAxis]);
  74     }
  75     $.each(settings.selectedSeries, function (index, element) {
  76         dataTable.addColumn(ColumnType.NUMBER, columnNames[element]);
  77     });
  78
  79     // set data to the data table
  80     var columnsToExtract = [ settings.mainAxis ];
  81     $.each(settings.selectedSeries, function (index, element) {
  82         columnsToExtract.push(element);
  83     });
  84     var values = [], newRow, row, col;
  85     for (var i = 0; i < data.length; i++) {
  86         row = data[i];
  87         newRow = [];
  88         for (var j = 0; j < columnsToExtract.length; j++) {
  89             col = columnNames[columnsToExtract[j]];
  90             if (j === 0) {
  91                 if (settings.type == 'timeline') { // first column is date type
  92                     newRow.push(extractDate(row[col]));
  93                 } else { // first column is string type
  94                     newRow.push(row[col]);
  95                 }
  96             } else { // subsequent columns are of type, number
  97                 newRow.push(parseFloat(row[col]));
  98             }
  99         }
 100         values.push(newRow);
 101     }
 102     dataTable.setData(values);
 103
 104     // draw the chart and return the chart object
 105     chart.draw(dataTable, jqPlotSettings);
 106     return chart;
 107 }
 108
 109 function drawChart() {
 110     currentSettings.width = $('#resizer').width() - 20;
 111     currentSettings.height = $('#resizer').height() - 20;
 112
 113     // todo: a better way using .redraw() ?
 114     if (currentChart !== null) {
 115         currentChart.destroy();
 116     }
 117
 118     var columnNames = [];
 119     $('select[name="chartXAxis"] option').each(function () {
 120         columnNames.push($(this).text());
 121     });
 122     try {
 123         currentChart = PMA_queryChart(chart_data, columnNames, currentSettings);
 124     } catch (err) {
 125         PMA_ajaxShowMessage(err.message, false);
 126     }
 127 }
 128
 129 function getSelectedSeries() {
 130     var val = $('select[name="chartSeries"]').val() || [];
 131     var ret = [];
 132     $.each(val, function (i, v) {
 133         ret.push(parseInt(v, 10));
 134     });
 135     return ret;
 136 }
 137
 138 /**
 139  * Unbind all event handlers before tearing down a page
 140  */
 141 AJAX.registerTeardown('tbl_chart.js', function () {
 142     $('input[name="chartType"]').unbind('click');
 143     $('input[name="barStacked"]').unbind('click');
 144     $('input[name="chartTitle"]').unbind('focus').unbind('keyup').unbind('blur');
 145     $('select[name="chartXAxis"]').unbind('change');
 146     $('select[name="chartSeries"]').unbind('change');
 147     $('input[name="xaxis_label"]').unbind('keyup');
 148     $('input[name="yaxis_label"]').unbind('keyup');
 149     $('#resizer').unbind('resizestop');
 150 });
 151
 152 AJAX.registerOnload('tbl_chart.js', function () {
 153
 154     // from jQuery UI
 155     $('#resizer').resizable({
 156         minHeight: 240,
 157         minWidth: 300
 158     })
 159     .width($('#div_view_options').width() - 50);
 160
 161     $('#resizer').bind('resizestop', function (event, ui) {
 162         // make room so that the handle will still appear
 163         $('#querychart').height($('#resizer').height() * 0.96);
 164         $('#querychart').width($('#resizer').width() * 0.96);
 165         currentChart.redraw({
 166             resetAxes : true
 167         });
 168     });
 169
 170     currentSettings = {
 171         type : 'line',
 172         width : $('#resizer').width() - 20,
 173         height : $('#resizer').height() - 20,
 174         xaxisLabel : $('input[name="xaxis_label"]').val(),
 175         yaxisLabel : $('input[name="yaxis_label"]').val(),
 176         title : $('input[name="chartTitle"]').val(),
 177         stackSeries : false,
 178         mainAxis : parseInt($('select[name="chartXAxis"]').val(), 10),
 179         selectedSeries : getSelectedSeries()
 180     };
 181
 182     // handle chart type changes
 183     $('input[name="chartType"]').click(function () {
 184         currentSettings.type = $(this).val();
 185         drawChart();
 186         if ($(this).val() == 'bar' || $(this).val() == 'column' ||
 187             $(this).val() == 'line' || $(this).val() == 'area' ||
 188             $(this).val() == 'timeline' || $(this).val() == 'spline'
 189         ) {
 190             $('span.barStacked').show();
 191         } else {
 192             $('span.barStacked').hide();
 193         }
 194     });
 195
 196     // handle stacking for bar, column and area charts
 197     $('input[name="barStacked"]').click(function () {
 198         if (this.checked) {
 199             $.extend(true, currentSettings, {stackSeries : true});
 200         } else {
 201             $.extend(true, currentSettings, {stackSeries : false});
 202         }
 203         drawChart();
 204     });
 205
 206     // handle changes in chart title
 207     $('input[name="chartTitle"]').focus(function () {
 208         temp_chart_title = $(this).val();
 209     }).keyup(function () {
 210         var title = $(this).val();
 211         if (title.length === 0) {
 212             title = ' ';
 213         }
 214         currentSettings.title = $('input[name="chartTitle"]').val();
 215         drawChart();
 216     }).blur(function () {
 217         if ($(this).val() != temp_chart_title) {
 218             drawChart();
 219         }
 220     });
 221
 222     var dateTimeCols = [];
 223     var vals = $('input[name="dateTimeCols"]').val().split(' ');
 224     $.each(vals, function (i, v) {
 225         dateTimeCols.push(parseInt(v, 10));
 226     });
 227
 228     // handle changing the x-axis
 229     $('select[name="chartXAxis"]').change(function () {
 230         currentSettings.mainAxis = parseInt($(this).val(), 10);
 231         if (dateTimeCols.indexOf(currentSettings.mainAxis) != -1) {
 232             $('span.span_timeline').show();
 233         } else {
 234             $('span.span_timeline').hide();
 235             if (currentSettings.type == 'timeline') {
 236                 $('input#radio_line').prop('checked', true);
 237                 currentSettings.type = 'line';
 238             }
 239         }
 240         var xaxis_title = $(this).children('option:selected').text();
 241         $('input[name="xaxis_label"]').val(xaxis_title);
 242         currentSettings.xaxisLabel = xaxis_title;
 243         drawChart();
 244     });
 245
 246     // handle changing the selected data series
 247     $('select[name="chartSeries"]').change(function () {
 248         currentSettings.selectedSeries = getSelectedSeries();
 249         var yaxis_title;
 250         if (currentSettings.selectedSeries.length == 1) {
 251             $('span.span_pie').show();
 252             yaxis_title = $(this).children('option:selected').text();
 253         } else {
 254             $('span.span_pie').hide();
 255             if (currentSettings.type == 'pie') {
 256                 $('input#radio_line').prop('checked', true);
 257                 currentSettings.type = 'line';
 258             }
 259             yaxis_title = PMA_messages.strYValues;
 260         }
 261         $('input[name="yaxis_label"]').val(yaxis_title);
 262         currentSettings.yaxisLabel = yaxis_title;
 263         drawChart();
 264     });
 265
 266     // handle manual changes to the chart axis labels
 267     $('input[name="xaxis_label"]').keyup(function () {
 268         currentSettings.xaxisLabel = $(this).val();
 269         drawChart();
 270     });
 271     $('input[name="yaxis_label"]').keyup(function () {
 272         currentSettings.yaxisLabel = $(this).val();
 273         drawChart();
 274     });
 275
 276     $("#tblchartform").submit();
 277 });
 278
 279 /**
 280  * Ajax Event handler for 'Go' button click
 281  *
 282  */
 283 $("#tblchartform").live('submit', function (event) {
 284     if (!checkFormElementInRange(this, 'session_max_rows', PMA_messages.strNotValidRowNumber, 1) ||
 285         !checkFormElementInRange(this, 'pos', PMA_messages.strNotValidRowNumber, 0 - 1)
 286     ) {
 287         return false;
 288     }
 289
 290     var $form = $(this);
 291     if (!checkSqlQuery($form[0])) {
 292         return false;
 293     }
 294     // remove any div containing a previous error message
 295     $('.error').remove();
 296     var $msgbox = PMA_ajaxShowMessage();
 297     PMA_prepareForAjaxRequest($form);
 298
 299     $.post($form.attr('action'), $form.serialize(), function (data) {
 300         if (data.success === true) {
 301             $('.success').fadeOut();
 302             if (typeof data.chartData != 'undefined') {
 303                 chart_data = jQuery.parseJSON(data.chartData);
 304                 drawChart();
 305                 $('div#querychart').height($('div#resizer').height() * 0.96);
 306                 $('div#querychart').width($('div#resizer').width() * 0.96);
 307                 currentChart.redraw({
 308                     resetAxes : true
 309                 });
 310                 $('#querychart').show();
 311             }
 312         } else {
 313             PMA_ajaxRemoveMessage($msgbox);
 314             PMA_ajaxShowMessage(data.error, false);
 315             chart_data = null;
 316             drawChart();
 317         }
 318         PMA_ajaxRemoveMessage($msgbox);
 319     }, "json"); // end $.post()
 320
 321     return false;
 322 }); // end