[ Index ]

PHP Cross Reference of vtigercrm-6.1.0

title

Body

[close]

/layouts/vlayout/modules/Reports/resources/ -> ChartDetail.js (source)

   1  /*+**********************************************************************************
   2   * The contents of this file are subject to the vtiger CRM Public License Version 1.0
   3   * ("License"); You may not use this file except in compliance with the License
   4   * The Original Code is:  vtiger CRM Open Source
   5   * The Initial Developer of the Original Code is vtiger.
   6   * Portions created by vtiger are Copyright (C) vtiger.
   7   * All Rights Reserved.
   8   ************************************************************************************/
   9  
  10  Reports_Detail_Js("Reports_ChartDetail_Js",{
  11  
  12      /**
  13       * Function used to display message when there is no data from the server
  14       */
  15      displayNoDataMessage : function() {
  16          $('#chartcontent').html('<div>'+app.vtranslate('JS_NO_CHART_DATA_AVAILABLE')+'</div>').css(
  17                                  {'text-align':'center', 'position':'relative', 'top':'100px'});
  18      },
  19  
  20      /**
  21       * Function returns if there is no data from the server
  22       */
  23      isEmptyData : function() {
  24          var jsonData = jQuery('input[name=data]').val();
  25          var data = JSON.parse(jsonData);
  26          var values = data['values'];
  27          if(jsonData == '' || values == '') {
  28              return true;
  29          }
  30          return false;
  31      }
  32  },{
  33      /**
  34       * Function returns instance of the chart type
  35       */
  36      getInstance : function() {
  37          var chartType = jQuery('input[name=charttype]').val();
  38          var chartClassName = chartType.toCamelCase();
  39          var chartClass = window["Report_"+chartClassName + "_Js"];
  40  
  41          var instance = false;
  42          if(typeof chartClass != 'undefined') {
  43              instance = new chartClass();
  44              instance.postInitializeCalls();
  45          }
  46          return instance;
  47      },
  48  
  49      registerSaveOrGenerateReportEvent : function(){
  50          var thisInstance = this;
  51          jQuery('.generateReport').on('click',function(e){
  52              if(!jQuery('#chartDetailForm').validationEngine('validate')) {
  53                  e.preventDefault();
  54                  return false;
  55              }
  56  
  57              var advFilterCondition = thisInstance.calculateValues();
  58              var recordId = thisInstance.getRecordId();
  59              var currentMode = jQuery(e.currentTarget).data('mode');
  60              var postData = {
  61                  'advanced_filter': advFilterCondition,
  62                  'record' : recordId,
  63                  'view' : "ChartSaveAjax",
  64                  'module' : app.getModuleName(),
  65                  'mode' : currentMode,
  66                  'charttype' : jQuery('input[name=charttype]').val(),
  67                  'groupbyfield' : jQuery('#groupbyfield').val(),
  68                  'datafields' : jQuery('#datafields').val()
  69              };
  70  
  71              var reportChartContents = thisInstance.getContentHolder().find('#reportContentsDiv');
  72              var element = jQuery('<div></div>');
  73              element.progressIndicator({
  74                  'position':'html',
  75                  'blockInfo': {
  76                      'enabled' : true,
  77                      'elementToBlock' : reportChartContents
  78                  }
  79              });
  80  
  81              e.preventDefault();
  82  
  83              AppConnector.request(postData).then(
  84                  function(data){
  85                      element.progressIndicator({'mode' : 'hide'});
  86                      reportChartContents.html(data);
  87                      thisInstance.registerEventForChartGeneration();
  88                  }
  89              );
  90          });
  91  
  92  
  93      },
  94  
  95      registerEventForChartGeneration : function() {
  96          var thisInstance = this;
  97          try {
  98              thisInstance.getInstance();    // instantiate the object and calls init function
  99              jQuery('#chartcontent').trigger(Vtiger_Widget_Js.widgetPostLoadEvent);
 100          } catch(error) {
 101              console.log("error");
 102              console.log(error);
 103              Reports_ChartDetail_Js.displayNoDataMessage();
 104              return;
 105          }
 106      },
 107  
 108      registerEventForModifyCondition : function() {
 109          jQuery('button[name=modify_condition]').on('click', function() {
 110              var filter = jQuery('#filterContainer');
 111              var icon = jQuery(this).find('i');
 112              var classValue = icon.attr('class');
 113              if(classValue == 'icon-chevron-right') {
 114                  icon.removeClass('icon-chevron-right').addClass('icon-chevron-down');
 115                  filter.show('slow');
 116              } else {
 117                  icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
 118                  filter.hide('slow');
 119              }
 120              return false;
 121          });
 122      },
 123  
 124      registerEvents : function(){
 125          this._super();
 126          this.registerEventForModifyCondition();
 127          this.registerEventForChartGeneration();
 128          Reports_ChartEdit3_Js.registerFieldForChosen();
 129          Reports_ChartEdit3_Js.initSelectValues();
 130          jQuery('#chartDetailForm').validationEngine(app.validationEngineOptions);
 131      }
 132  });
 133  
 134  
 135  Vtiger_Pie_Widget_Js('Report_Piechart_Js',{},{
 136  
 137      postInitializeCalls : function() {
 138          var clickThrough = jQuery('input[name=clickthrough]').val();
 139          if(clickThrough != '') {
 140              var thisInstance = this;
 141              this.getContainer().on("jqplotDataClick", function(evt, seriesIndex, pointIndex, neighbor) {
 142                  var linkUrl = thisInstance.data['links'][pointIndex];
 143                  if(linkUrl) window.location.href = linkUrl;
 144              });
 145              this.getContainer().on("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 146                  $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 147              });
 148              this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 149                  $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 150              });
 151          }
 152      },
 153  
 154      postLoadWidget : function() {
 155          if(!Reports_ChartDetail_Js.isEmptyData()) {
 156              this.loadChart();
 157          }else{
 158              this.positionNoDataMsg();
 159          }
 160      },
 161  
 162      positionNoDataMsg : function() {
 163          Reports_ChartDetail_Js.displayNoDataMessage();
 164      },
 165  
 166      getPlotContainer : function(useCache) {
 167          if(typeof useCache == 'undefined'){
 168              useCache = false;
 169          }
 170          if(this.plotContainer == false || !useCache) {
 171              var container = this.getContainer();
 172              this.plotContainer = jQuery('#chartcontent');
 173          }
 174          return this.plotContainer;
 175      },
 176  
 177      init : function() {
 178          this._super(jQuery('#reportContentsDiv'));
 179      },
 180  
 181      generateData : function() {
 182          if(Reports_ChartDetail_Js.isEmptyData()) {
 183              Reports_ChartDetail_Js.displayNoDataMessage();
 184              return false;
 185          }
 186  
 187          var jsonData = jQuery('input[name=data]').val();
 188          var data = this.data = JSON.parse(jsonData);
 189          var values = data['values'];
 190  
 191          var chartData = [];
 192          for(var i in values) {
 193              chartData[i] = [];
 194              chartData[i].push(data['labels'][i]);
 195              chartData[i].push(values[i]);
 196          }
 197          return {'chartData':chartData, 'labels':data['labels'], 'data_labels':data['data_labels'], 'title' : data['graph_label']};
 198      }
 199  
 200  });
 201  
 202  Vtiger_Barchat_Widget_Js('Report_Verticalbarchart_Js', {},{
 203  
 204      postInitializeCalls : function() {
 205          jQuery('table.jqplot-table-legend').css('width','95px');
 206          var thisInstance = this;
 207  
 208          this.getContainer().on('jqplotDataClick', function(ev, gridpos, datapos, neighbor, plot) {
 209              var linkUrl = thisInstance.data['links'][neighbor[0]-1];
 210              if(linkUrl) window.location.href = linkUrl;
 211          });
 212  
 213          this.getContainer().on("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 214              $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 215          });
 216          this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 217              $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 218          });
 219      },
 220  
 221      postLoadWidget : function() {
 222          if(!Reports_ChartDetail_Js.isEmptyData()) {
 223              this.loadChart();
 224          }else{
 225              this.positionNoDataMsg();
 226          }
 227          this.postInitializeCalls();
 228      },
 229  
 230      positionNoDataMsg : function() {
 231          Reports_ChartDetail_Js.displayNoDataMessage();
 232      },
 233  
 234      getPlotContainer : function(useCache) {
 235          if(typeof useCache == 'undefined'){
 236              useCache = false;
 237          }
 238          if(this.plotContainer == false || !useCache) {
 239              var container = this.getContainer();
 240              this.plotContainer = jQuery('#chartcontent');
 241          }
 242          return this.plotContainer;
 243      },
 244  
 245      init : function() {
 246          this._super(jQuery('#reportContentsDiv'));
 247      },
 248  
 249      generateChartData : function() {
 250          if(Reports_ChartDetail_Js.isEmptyData()) {
 251              Reports_ChartDetail_Js.displayNoDataMessage();
 252              return false;
 253          }
 254  
 255          var jsonData = jQuery('input[name=data]').val();
 256          var data = this.data = JSON.parse(jsonData);
 257          var values = data['values'];
 258  
 259          var chartData = [];
 260          var yMaxValue = 0;
 261  
 262          if(data['type'] == 'singleBar') {
 263              chartData[0] = [];
 264              for(var i in values) {
 265                  var multiValue = values[i];
 266                  for(var j in multiValue) {
 267                      chartData[0].push(multiValue[j]);
 268                      if(multiValue[j] > yMaxValue) yMaxValue = multiValue[j];
 269                  }
 270              }
 271          } else {
 272              chartData[0] = [];
 273              chartData[1] = [];
 274              chartData[2] = [];
 275              for(var i in values) {
 276                  var multiValue = values[i];
 277                  var info = [];
 278                  for(var j in multiValue) {
 279                      chartData[j].push(multiValue[j]);
 280                      if(multiValue[j] > yMaxValue) yMaxValue = multiValue[j];
 281                  }
 282              }
 283          }
 284          yMaxValue = yMaxValue + (yMaxValue*0.15);
 285  
 286          return {'chartData':chartData,
 287                  'yMaxValue':yMaxValue,
 288                  'labels':data['labels'],
 289                  'data_labels':data['data_labels'],
 290                  'title' : data['graph_label']
 291              };
 292      }
 293  });
 294  
 295  
 296  Report_Verticalbarchart_Js('Report_Horizontalbarchart_Js', {},{
 297      generateChartData : function() {
 298          if(Reports_ChartDetail_Js.isEmptyData()) {
 299              Reports_ChartDetail_Js.displayNoDataMessage();
 300              return false;
 301          }
 302  
 303          var jsonData = jQuery('input[name=data]').val();
 304          var data = this.data = JSON.parse(jsonData);
 305          var values = data['values'];
 306  
 307          var chartData = [];
 308          var yMaxValue = 0;
 309  
 310          if(data['type'] == 'singleBar') {
 311              for(var i in values) {
 312                  var multiValue = values[i];
 313                  chartData[i] = [];
 314                  for(var j in multiValue) {
 315                      chartData[i].push(multiValue[j]);
 316                      chartData[i].push(parseInt(i)+1);
 317                      if(multiValue[j] > yMaxValue){
 318                          yMaxValue = multiValue[j];
 319                      }
 320                  }
 321              }
 322              chartData = [chartData];
 323          } else {
 324              chartData = [];
 325              chartData[0] = [];
 326              chartData[1] = [];
 327              chartData[2] = [];
 328              for(var i in values) {
 329                  var multiValue = values[i];
 330                  for(var j in multiValue) {
 331                      chartData[j][i] = [];
 332                      chartData[j][i].push(multiValue[j]);
 333                      chartData[j][i].push(parseInt(i)+1);
 334                      if(multiValue[j] > yMaxValue){
 335                          yMaxValue = multiValue[j];
 336                      }
 337                  }
 338              }
 339          }
 340          yMaxValue = yMaxValue + (yMaxValue*0.15);
 341  
 342          return {'chartData':chartData,
 343                  'yMaxValue':yMaxValue,
 344                  'labels':data['labels'],
 345                  'data_labels':data['data_labels'],
 346                  'title' : data['graph_label']
 347              };
 348  
 349      },
 350  
 351      loadChart : function() {
 352          var data = this.generateChartData();
 353          var labels = data['labels'];
 354  
 355          jQuery.jqplot('chartcontent', data['chartData'], {
 356              title: data['title'],
 357              animate: !$.jqplot.use_excanvas,
 358              seriesDefaults: {
 359                  renderer:$.jqplot.BarRenderer,
 360                  showDataLabels: true,
 361                  pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
 362                  shadowAngle: 135,
 363                  rendererOptions: {
 364                      barDirection: 'horizontal'
 365                  }
 366              },
 367              axes: {
 368                  yaxis: {
 369                      tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer,
 370                      renderer: jQuery.jqplot.CategoryAxisRenderer,
 371                      ticks: labels,
 372                      tickOptions: {
 373                        angle: -45
 374                      }
 375                  }
 376              },
 377              legend: {
 378                  show: true,
 379                  location: 'e',
 380                  placement: 'outside',
 381                  showSwatch : true,
 382                  showLabels : true,
 383                  labels:data['data_labels']
 384              }
 385          });
 386          jQuery('table.jqplot-table-legend').css('width','95px');
 387      },
 388  
 389      postInitializeCalls : function() {
 390          var thisInstance = this;
 391          this.getContainer().on("jqplotDataClick", function(ev, gridpos, datapos, neighbor, plot) {
 392              var linkUrl = thisInstance.data['links'][neighbor[1]-1];
 393              if(linkUrl) window.location.href = linkUrl;
 394          });
 395          this.getContainer().on("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 396              $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 397          });
 398          this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 399              $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 400          });
 401      }
 402  });
 403  
 404  
 405  Report_Verticalbarchart_Js('Report_Linechart_Js', {},{
 406  
 407      generateData : function() {
 408          if(Reports_ChartDetail_Js.isEmptyData()) {
 409              Reports_ChartDetail_Js.displayNoDataMessage();
 410              return false;
 411          }
 412  
 413          var jsonData = jQuery('input[name=data]').val();
 414          var data = this.data = JSON.parse(jsonData);
 415          var values = data['values'];
 416  
 417          var chartData = [];
 418          var yMaxValue = 0;
 419  
 420          chartData[1] = []
 421          chartData[2] = []
 422          chartData[0] = []
 423          for(var i in values) {
 424              var value =  values[i];
 425              for(var j in value) {
 426                  chartData[j].push(value[j]);
 427              }
 428          }
 429          yMaxValue = yMaxValue + yMaxValue*0.15;
 430  
 431          return {'chartData':chartData,
 432                  'yMaxValue':yMaxValue,
 433                  'labels':data['labels'],
 434                  'data_labels':data['data_labels'],
 435                  'title' : data['graph_label']
 436              };
 437      },
 438  
 439      loadChart : function() {
 440          var data = this.generateData();
 441          var plot2 = $.jqplot('chartcontent', data['chartData'], {
 442              title: data['title'],
 443              legend:{
 444                  show:true,
 445                  labels:data['data_labels'],
 446                  location:'ne',
 447                  showSwatch : true,
 448                  showLabels : true,
 449                  placement: 'outside'
 450               },
 451              seriesDefaults: {
 452                  pointLabels: {
 453                      show: true
 454                  }
 455              },
 456              axes: {
 457                  xaxis: {
 458                      min:0,
 459                      pad: 1,
 460                      renderer: $.jqplot.CategoryAxisRenderer,
 461                      ticks:data['labels'],
 462                      tickOptions: {
 463                          formatString: '%b %#d'
 464                      }
 465                  }
 466              },
 467              cursor: {
 468                  show: true
 469              }
 470          });
 471          jQuery('table.jqplot-table-legend').css('width','95px');
 472      }
 473  });


Generated: Fri Nov 28 20:08:37 2014 Cross-referenced by PHPXref 0.7.1