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