jssource/src_files/include/SugarCharts/Jit/js/sugarCharts.js

   1 /*********************************************************************************
   2  * SugarCRM Community Edition is a customer relationship management program developed by
   3  * SugarCRM, Inc. Copyright (C) 2004-2011 SugarCRM Inc.
   4  *
   5  * This program is free software; you can redistribute it and/or modify it under
   6  * the terms of the GNU Affero General Public License version 3 as published by the
   7  * Free Software Foundation with the addition of the following permission added
   8  * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
   9  * IN WHICH THE COPYRIGHT IS OWNED BY SUGARCRM, SUGARCRM DISCLAIMS THE WARRANTY
  10  * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
  11  *
  12  * This program is distributed in the hope that it will be useful, but WITHOUT
  13  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  14  * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
  15  * details.
  16  *
  17  * You should have received a copy of the GNU Affero General Public License along with
  18  * this program; if not, see http://www.gnu.org/licenses or write to the Free
  19  * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
  20  * 02110-1301 USA.
  21  *
  22  * You can contact SugarCRM, Inc. headquarters at 10050 North Wolfe Road,
  23  * SW2-130, Cupertino, CA 95014, USA. or at email address contact@sugarcrm.com.
  24  *
  25  * The interactive user interfaces in modified source and object code versions
  26  * of this program must display Appropriate Legal Notices, as required under
  27  * Section 5 of the GNU Affero General Public License version 3.
  28  *
  29  * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
  30  * these Appropriate Legal Notices must retain the display of the "Powered by
  31  * SugarCRM" logo. If the display of the logo is not reasonably feasible for
  32  * technical reasons, the Appropriate Legal Notices must display the words
  33  * "Powered by SugarCRM".
  34  ********************************************************************************/
  35
  36
  37
  38
  39 function loadSugarChart (chartId,jsonFilename,css,chartConfig,pageCols) {
  40                                 var labelType, useGradients, nativeTextSupport, animate;
  41                                 (function() {
  42                                   var ua = navigator.userAgent,
  43                                           typeOfCanvas = typeof HTMLCanvasElement,
  44                                           nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
  45                                           textSupport = nativeCanvasSupport
  46                                                 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  47                                   labelType = 'Native';
  48                                   nativeTextSupport = labelType == 'Native';
  49                                   useGradients = nativeCanvasSupport;
  50                                   animate = false;
  51                                 })();
  52
  53                         var delay = (SUGAR.isIE) ? 500 : 0;
  54                         switch(chartConfig["chartType"]) {
  55                         case "barChart":
  56                                 var handleFailure = function(o){
  57                                 alert('fail');
  58                                         if(o.responseText !== undefined){
  59                                                 alert('failed');
  60                                         }
  61                                 }
  62                                 var handleSuccess = function(o){
  63
  64                                         if(o.responseText !== undefined && o.responseText != "No Data"){
  65                                         var json = eval('('+o.responseText+')');
  66
  67                                 var properties = $jit.util.splat(json.properties)[0];
  68                                 var marginBottom = (chartConfig["orientation"] == 'vertical' && json.values.length > 8) ? 20*4 : 20;
  69                                 //init BarChart
  70                                 var barChart = new $jit.BarChart({
  71                                   //id of the visualization container
  72                                   injectInto: chartId,
  73                                   //whether to add animations
  74                                   animate: false,
  75                                   nodeCount: json.values.length,
  76                                   renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
  77                                   backgroundColor: 'rgb(255,255,255)',
  78                                   colorStop1: 'rgba(255,255,255,.8)',
  79                                   colorStop2: 'rgba(255,255,255,0)',
  80                                   shadow: {
  81                                      enable: true,
  82                                      size: 2
  83                                   },
  84                                   //horizontal or vertical barcharts
  85                                   orientation: chartConfig["orientation"],
  86                                   hoveredColor: false,
  87                                   Title: {
  88                                         text: properties['title'],
  89                                         size: 16,
  90                                         color: '#444444',
  91                                         offset: 20
  92                                   },
  93                                   Subtitle: {
  94                                         text: properties['subtitle'],
  95                                         size: 11,
  96                                         color: css["color"],
  97                                         offset: 20
  98                                   },
  99                                   Ticks: {
 100                                         enable: true,
 101                                         color: css["gridLineColor"]
 102                                   },
 103                                   //bars separation
 104                                   barsOffset: (chartConfig["orientation"] == "vertical") ? 30 : 20,
 105                                   //visualization offset
 106                                   Margin: {
 107                                         top:20,
 108                                         left: 30,
 109                                         right: 20,
 110                                         bottom: marginBottom
 111                                   },
 112                                   ScrollNote: {
 113                                         text: (chartConfig["scroll"] && SUGAR.util.isTouchScreen()) ? "Use two fingers to scroll" : "",
 114                                         size: 12
 115                                   },
 116                                   Events: {
 117                                         enable: true,
 118                                         onClick: function(node) {
 119                                         if(!node || SUGAR.util.isTouchScreen()) return;
 120                                         if(node.link == 'undefined' || node.link == '') return;
 121                                         window.location.href=node.link;
 122                                         }
 123                                   },
 124                                   //labels offset position
 125                                   labelOffset: 5,
 126                                   //bars style
 127                                   type: useGradients? chartConfig["barType"]+':gradient' : chartConfig["barType"],
 128                                   //whether to show the aggregation of the values
 129                                   showAggregates:true,
 130                                   //whether to show the labels for the bars
 131                                   showLabels:true,
 132                                   //labels style
 133                                   Label: {
 134                                         type: labelType, //Native or HTML
 135                                         size: 12,
 136                                         family: css["font-family"],
 137                                         color: css["color"],
 138                                         colorAlt: "#ffffff"
 139                                   },
 140                                   //add tooltips
 141                                   Tips: {
 142                                         enable: true,
 143                                         onShow: function(tip, elem) {
 144                                           if(elem.link != 'undefined' && elem.link != '') {
 145                                                 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
 146                                           } else {
 147                                                 drillDown = "";
 148                                           }
 149
 150                                           if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
 151                                                 value = "elem.valuelabel";
 152                                           } else {
 153                                                 value = "elem.value";
 154                                           }
 155                                           eval("tip.innerHTML = '<b>' + elem."+chartConfig["tip"]+" + '</b>: ' + "+value+" + ' - ' + elem.percentage + '%' + drillDown");
 156                                         }
 157                                   }
 158                                 });
 159                                 //load JSON data.
 160                                 barChart.loadJSON(json);
 161
 162
 163                                 //end
 164
 165                                 /*
 166                                 var list = $jit.id('id-list'),
 167                                         button = $jit.id('update'),
 168                                         orn = $jit.id('switch-orientation');
 169                                 //update json on click 'Update Data'
 170                                 $jit.util.addEvent(button, 'click', function() {
 171                                   var util = $jit.util;
 172                                   if(util.hasClass(button, 'gray')) return;
 173                                   util.removeClass(button, 'white');
 174                                   util.addClass(button, 'gray');
 175                                   barChart.updateJSON(json2);
 176                                 });
 177                                 */
 178                                 //dynamically add legend to list
 179                                 var list = $jit.id('legend'+chartId);
 180                                 var legend = barChart.getLegend(),
 181                                         cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
 182                                         rows = Math.ceil(legend["name"].length/cols),
 183                                         table = "<table cellpadding='0' cellspacing='0' align='left'>";
 184                                 var j = 0;
 185                                 for(i=0;i<rows;i++) {
 186                                         table += "<tr>";
 187                                         for(td=0;td<cols;td++) {
 188
 189                                                 table += '<td width=\'16\' valign=\'top\'>';
 190                                                 if(legend["name"][j] != undefined) {
 191                                                         table += '<div class=\'query-color\' style=\'background-color:'
 192                                                           + legend["color"][j] +'\'>&nbsp;</div>';
 193                                                 }
 194
 195                                                 table += '</td>';
 196                                                 table += '<td class=\'label\' valign=\'top\'>';
 197                                                 if(legend["name"][j] != undefined) {
 198                                                         table += legend["name"][j];
 199                                                 }
 200
 201                                                 table += '</td>';
 202                                                 j++;
 203                                                 }
 204                                         table += "</tr>";
 205                                 }
 206
 207                                         table += "</table>";
 208                                 list.innerHTML = table;
 209
 210
 211                                 //save canvas to image for pdf consumption
 212                                 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
 213
 214                         var firstLoad = (SUGAR.isIE) ? true: false,
 215                         orgWindowWidth = document.body.offsetWidth,
 216                         orgContainerDivWidth = document.getElementById(chartId).offsetWidth;
 217
 218                                 var refreshGraph = function() {
 219                                         var newWindowWidth = document.body.offsetWidth;
 220                                         var diff = Math.abs(newWindowWidth - orgWindowWidth);
 221                                         if(diff>20 && !firstLoad){
 222                                                 barChart.resizeGraph(json,orgWindowWidth,orgContainerDivWidth,pageCols);
 223                                         }
 224                                         firstLoad = false;
 225                                 }
 226
 227                                 //refresh graph on window resize
 228
 229                                 var doRefresh = function() {
 230                                         setTimeout(function() {refreshGraph()}, delay);
 231                                 }
 232
 233                                 YAHOO.util.Event.addListener(window, 'resize', function() {doRefresh()});
 234
 235                                         }
 236                                 }
 237
 238                                 var callback =
 239                                 {
 240                                   success:handleSuccess,
 241                                   failure:handleFailure,
 242                                   argument: { foo:'foo', bar:''}
 243                                 };
 244
 245                                 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
 246                                 break;
 247
 248                         case "lineChart":
 249                                 var handleFailure = function(o){
 250                                 alert('fail');
 251                                         if(o.responseText !== undefined){
 252                                                 alert('failed');
 253                                         }
 254                                 }
 255                                 var handleSuccess = function(o){
 256
 257                                         if(o.responseText !== undefined && o.responseText != "No Data"){
 258                                         var json = eval('('+o.responseText+')');
 259
 260                                 var properties = $jit.util.splat(json.properties)[0];
 261                                 //init Linecahrt
 262                                 var lineChart = new $jit.LineChart({
 263                                   //id of the visualization container
 264                                   injectInto: chartId,
 265                                   //whether to add animations
 266                                   animate: false,
 267                                   renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
 268                                   backgroundColor: 'rgb(255,255,255)',
 269                                   colorStop1: 'rgba(255,255,255,.8)',
 270                                   colorStop2: 'rgba(255,255,255,0)',
 271                                   selectOnHover: false,
 272                                   Title: {
 273                                         text: properties['title'],
 274                                         size: 16,
 275                                         color: '#444444',
 276                                         offset: 20
 277                                   },
 278                                   Subtitle: {
 279                                         text: properties['subtitle'],
 280                                         size: 11,
 281                                         color: css["color"],
 282                                         offset: 20
 283                                   },
 284                                   Ticks: {
 285                                         enable: true,
 286                                         color: css["gridLineColor"]
 287                                   },
 288                                   //visualization offset
 289                                   Margin: {
 290                                         top:20,
 291                                         left: 40,
 292                                         right: 40,
 293                                         bottom: 20
 294                                   },
 295                                   Events: {
 296                                         enable: true,
 297                                         onClick: function(node) {
 298                                         if(!node || SUGAR.util.isTouchScreen()) return;
 299                                         if(node.link == 'undefined' || node.link == '') return;
 300                                         window.location.href=node.link;
 301                                         }
 302                                   },
 303                                   //labels offset position
 304                                   labelOffset: 5,
 305                                   //bars style
 306                                   type: useGradients? chartConfig["lineType"]+':gradient' : chartConfig["lineType"],
 307                                   //whether to show the aggregation of the values
 308                                   showAggregates:true,
 309                                   //whether to show the labels for the bars
 310                                   showLabels:true,
 311                                   //labels style
 312                                   Label: {
 313                                         type: labelType, //Native or HTML
 314                                         size: 12,
 315                                         family: css["font-family"],
 316                                         color: css["color"],
 317                                         colorAlt: "#ffffff"
 318                                   },
 319                                   //add tooltips
 320                                   Tips: {
 321                                         enable: true,
 322                                         onShow: function(tip, elem) {
 323                                           if(elem.link != 'undefined' && elem.link != '') {
 324                                                 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
 325                                           } else {
 326                                                 drillDown = "";
 327                                           }
 328
 329                                           if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
 330                                                 var value = "elem.valuelabel";
 331                                           } else {
 332                                                 var value = "elem.value";
 333                                           }
 334
 335                                           if(elem.collision) {
 336                                                 eval("var name = elem."+chartConfig["tip"]+";");
 337                                                 var content = '<table>';
 338
 339                                                 for(var i=0; i<name.length; i++) {
 340                                                         content += '<tr><td><b>' + name[i] + '</b>:</td><td> ' + elem.value[i] + ' - ' + elem.percentage[i] + '%' + '</td></tr>';
 341                                                 }
 342                                                 content += '</table>';
 343                                                 tip.innerHTML = content;
 344                                           } else {
 345                                                 eval("tip.innerHTML = '<b>' + elem."+chartConfig["tip"]+" + '</b>: ' + "+value+" + ' - ' + elem.percentage + '%' + drillDown");
 346                                           }
 347                                         }
 348                                   }
 349                                 });
 350                                 //load JSON data.
 351                                 lineChart.loadJSON(json);
 352                                 //end
 353
 354                                 /*
 355                                 var list = $jit.id('id-list'),
 356                                         button = $jit.id('update'),
 357                                         orn = $jit.id('switch-orientation');
 358                                 //update json on click 'Update Data'
 359                                 $jit.util.addEvent(button, 'click', function() {
 360                                   var util = $jit.util;
 361                                   if(util.hasClass(button, 'gray')) return;
 362                                   util.removeClass(button, 'white');
 363                                   util.addClass(button, 'gray');
 364                                   barChart.updateJSON(json2);
 365                                 });
 366                                 */
 367                                 //dynamically add legend to list
 368                                 var list = $jit.id('legend'+chartId);
 369                                 var legend = lineChart.getLegend(),
 370                                         cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
 371                                         rows = Math.ceil(legend["name"].length/cols),
 372                                         table = "<table cellpadding='0' cellspacing='0' align='left'>";
 373                                 var j = 0;
 374                                 for(i=0;i<rows;i++) {
 375                                         table += "<tr>";
 376                                         for(td=0;td<cols;td++) {
 377
 378                                                 table += '<td width=\'16\' valign=\'top\'>';
 379                                                 if(legend["name"][j] != undefined) {
 380                                                         table += '<div class=\'query-color\' style=\'background-color:'
 381                                                           + legend["color"][j] +'\'>&nbsp;</div>';
 382                                                 }
 383
 384                                                 table += '</td>';
 385                                                 table += '<td class=\'label\' valign=\'top\'>';
 386                                                 if(legend["name"][j] != undefined) {
 387                                                         table += legend["name"][j];
 388                                                 }
 389
 390                                                 table += '</td>';
 391                                                 j++;
 392                                                 }
 393                                         table += "</tr>";
 394                                 }
 395
 396                                         table += "</table>";
 397                                 list.innerHTML = table;
 398
 399
 400                                 //save canvas to image for pdf consumption
 401                                 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
 402
 403                         var firstLoad = (SUGAR.isIE) ? true: false,
 404                         orgWindowWidth = document.body.offsetWidth,
 405                         orgContainerDivWidth = document.getElementById(chartId).offsetWidth;
 406
 407                                 var refreshGraph = function() {
 408                                         var newWindowWidth = document.body.offsetWidth;
 409                                         var diff = Math.abs(newWindowWidth - orgWindowWidth);
 410                                         if(diff>20 && !firstLoad){
 411                                                 lineChart.resizeGraph(json,orgWindowWidth,orgContainerDivWidth,pageCols);
 412                                         }
 413                                         firstLoad = false;
 414                                 }
 415
 416                                 //refresh graph on window resize
 417
 418                                 var doRefresh = function() {
 419                                         setTimeout(function() {refreshGraph()}, delay);
 420                                 }
 421
 422                                 YAHOO.util.Event.addListener(window, 'resize', function() {doRefresh()});
 423
 424                                         }
 425                                 }
 426
 427                                 var callback =
 428                                 {
 429                                   success:handleSuccess,
 430                                   failure:handleFailure,
 431                                   argument: { foo:'foo', bar:''}
 432                                 };
 433
 434                                 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
 435                                 break;
 436
 437
 438                         case "pieChart":
 439
 440                                 var handleFailure = function(o){
 441                                 alert('fail');
 442                                         if(o.responseText !== undefined){
 443                                                 alert('failed');
 444                                         }
 445                                 }
 446                                 var handleSuccess = function(o){
 447
 448                                         if(o.responseText !== undefined){
 449                                         var json = eval('('+o.responseText+')');
 450                                         var properties = $jit.util.splat(json.properties)[0];
 451
 452                                                 //init BarChart
 453                                 var pieChart = new $jit.PieChart({
 454                                   //id of the visualization container
 455                                   injectInto: chartId,
 456                                   //whether to add animations
 457                                   animate: false,
 458                                   renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
 459                                   backgroundColor: 'rgb(255,255,255)',
 460                                   colorStop1: 'rgba(255,255,255,.8)',
 461                                   colorStop2: 'rgba(255,255,255,0)',
 462                                   labelType: properties['labels'],
 463                                   hoveredColor: false,
 464                                   //offsets
 465                                   offset: 50,
 466                                   sliceOffset: 0,
 467                                   labelOffset: 30,
 468                                   //slice style
 469                                   type: useGradients? chartConfig["pieType"]+':gradient' : chartConfig["pieType"],
 470                                   //whether to show the labels for the slices
 471                                   showLabels:true,
 472                                   Title: {
 473                                         text: properties['title'],
 474                                         size: 16,
 475                                         color: '#444444',
 476                                         offset: 20
 477                                   },
 478                                   Subtitle: {
 479                                         text: properties['subtitle'],
 480                                         size: 11,
 481                                         color: css["color"],
 482                                         offset: 20
 483                                   },
 484                                   Margin: {
 485                                         top:20,
 486                                         left: 20,
 487                                         right: 20,
 488                                         bottom: 20
 489                                   },
 490                                   Events: {
 491                                         enable: true,
 492                                         onClick: function(node) {
 493                                         if(!node || SUGAR.util.isTouchScreen()) return;
 494                                         if(node.link == 'undefined' || node.link == '') return;
 495                                         window.location.href=node.link;
 496                                         }
 497                                   },
 498                                   //label styling
 499                                   Label: {
 500                                         type: labelType, //Native or HTML
 501                                         size: 12,
 502                                         family: css["font-family"],
 503                                         color: css["color"]
 504                                   },
 505                                   //enable tips
 506                                   Tips: {
 507                                         enable: true,
 508                                         onShow: function(tip, elem) {
 509                                           if(elem.link != 'undefined' && elem.link != '') {
 510                                                 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
 511                                           } else {
 512                                                 drillDown = "";
 513                                           }
 514
 515                                           if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
 516                                                 value = "elem.valuelabel";
 517                                           } else {
 518                                                 value = "elem.value";
 519                                           }
 520                                            eval("tip.innerHTML = '<b>' + elem.label + '</b>: ' + "+ value +" + ' - ' + elem.percentage + '%' + drillDown");
 521                                         }
 522                                   }
 523                                 });
 524                                 //load JSON data.
 525                                 pieChart.loadJSON(json);
 526                                 //end
 527                                 //dynamically add legend to list
 528                                 var list = $jit.id('legend'+chartId);
 529                                 var legend = pieChart.getLegend(),
 530                                         cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
 531                                         rows = Math.ceil(legend["name"].length/cols);
 532                                         table = "<table cellpadding='0' cellspacing='0' align='left'>";
 533                                 var j = 0;
 534                                 for(i=0;i<rows;i++) {
 535                                         table += "<tr>";
 536                                         for(td=0;td<cols;td++) {
 537
 538                                                 table += '<td width=\'16\' valign=\'top\'>';
 539                                                 if(legend["name"][j] != undefined) {
 540                                                         table += '<div class=\'query-color\' style=\'background-color:'
 541                                                           + legend["color"][j] +'\'>&nbsp;</div>';
 542                                                 }
 543
 544                                                 table += '</td>';
 545                                                 table += '<td class=\'label\' valign=\'top\'>';
 546                                                 if(legend["name"][j] != undefined) {
 547                                                         table += legend["name"][j];
 548                                                 }
 549
 550                                                 table += '</td>';
 551                                                 j++;
 552                                                 }
 553                                         table += "</tr>";
 554                                 }
 555
 556                                         table += "</table>";
 557                                 list.innerHTML = table;
 558
 559
 560                                 //save canvas to image for pdf consumption
 561                                 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
 562
 563                         var firstLoad = (SUGAR.isIE) ? true: false,
 564                         orgWindowWidth = document.body.offsetWidth,
 565                         orgContainerDivWidth = document.getElementById(chartId).offsetWidth;
 566
 567                                 var refreshGraph = function() {
 568                                         var newWindowWidth = document.body.offsetWidth;
 569                                         var diff = Math.abs(newWindowWidth - orgWindowWidth);
 570                                         if(diff>20 && !firstLoad){
 571                                                 pieChart.resizeGraph(json,orgWindowWidth,orgContainerDivWidth,pageCols);
 572                                         }
 573                                         firstLoad = false;
 574                                 }
 575
 576                                 //refresh graph on window resize
 577
 578                                 var doRefresh = function() {
 579                                         setTimeout(function() {refreshGraph()}, delay);
 580                                 }
 581
 582                                 YAHOO.util.Event.addListener(window, 'resize', function() {doRefresh()});
 583
 584
 585                                 }
 586                         }
 587
 588                                 var callback =
 589                                 {
 590                                   success:handleSuccess,
 591                                   failure:handleFailure,
 592                                   argument: { foo:'foo', bar:''}
 593                                 };
 594
 595                                 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
 596
 597                                 break;
 598
 599
 600                         case "funnelChart":
 601
 602                                 var handleFailure = function(o){
 603                                 alert('fail');
 604                                         if(o.responseText !== undefined){
 605                                                 alert('failed');
 606                                         }
 607                                 }
 608                                 var handleSuccess = function(o){
 609
 610                                         if(o.responseText !== undefined && o.responseText != "No Data"){
 611                                         var json = eval('('+o.responseText+')');
 612
 613                                 var properties = $jit.util.splat(json.properties)[0];
 614
 615                                 //init Funnel Chart
 616                                 var funnelChart = new $jit.FunnelChart({
 617                                   //id of the visualization container
 618                                   injectInto: chartId,
 619                                   //whether to add animations
 620                                   animate: false,
 621                                   renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
 622                                   backgroundColor: 'rgb(255,255,255)',
 623                                   colorStop1: 'rgba(255,255,255,.8)',
 624                                   colorStop2: 'rgba(255,255,255,0)',
 625                                   //orientation setting should not be changed
 626                                   orientation: "vertical",
 627                                   hoveredColor: false,
 628                                   Title: {
 629                                         text: properties['title'],
 630                                         size: 16,
 631                                         color: '#444444',
 632                                         offset: 20
 633                                   },
 634                                   Subtitle: {
 635                                         text: properties['subtitle'],
 636                                         size: 11,
 637                                         color: css["color"],
 638                                         offset: 20
 639                                   },
 640                                   //segment separation
 641                                   segmentOffset: 20,
 642                                   //visualization offset
 643                                   Margin: {
 644                                         top:20,
 645                                         left: 20,
 646                                         right: 20,
 647                                         bottom: 20
 648                                   },
 649                                   Events: {
 650                                         enable: true,
 651                                         onClick: function(node) {
 652                                         if(!node || SUGAR.util.isTouchScreen()) return;
 653                                         if(node.link == 'undefined' || node.link == '') return;
 654                                         window.location.href=node.link;
 655                                         }
 656                                   },
 657                                   //labels offset position
 658                                   labelOffset: 10,
 659                                   //bars style
 660                                   type: useGradients? chartConfig["funnelType"]+':gradient' : chartConfig["funnelType"],
 661                                   //whether to show the aggregation of the values
 662                                   showAggregates:true,
 663                                   //whether to show the labels for the bars
 664                                   showLabels:true,
 665                                   //labels style
 666                                   Label: {
 667                                         type: labelType, //Native or HTML
 668                                         size: 12,
 669                                         family: css["font-family"],
 670                                         color: css["color"],
 671                                         colorAlt: "#ffffff"
 672                                   },
 673                                   //add tooltips
 674                                   Tips: {
 675                                         enable: true,
 676                                         onShow: function(tip, elem) {
 677                                           if(elem.link != 'undefined' && elem.link != '') {
 678                                                 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
 679                                           } else {
 680                                                 drillDown = "";
 681                                           }
 682
 683                                           if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
 684                                                 value = "elem.valuelabel";
 685                                           } else {
 686                                                 value = "elem.value";
 687                                           }
 688                                           eval("tip.innerHTML = '<b>' + elem."+chartConfig["tip"]+" + '</b>: ' + "+value+"  + ' - ' + elem.percentage + '%' +  drillDown");
 689                                         }
 690                                   }
 691                                 });
 692                                 //load JSON data.
 693                                 funnelChart.loadJSON(json);
 694                                 //end
 695
 696                                 /*
 697                                 var list = $jit.id('id-list'),
 698                                         button = $jit.id('update'),
 699                                         orn = $jit.id('switch-orientation');
 700                                 //update json on click 'Update Data'
 701                                 $jit.util.addEvent(button, 'click', function() {
 702                                   var util = $jit.util;
 703                                   if(util.hasClass(button, 'gray')) return;
 704                                   util.removeClass(button, 'white');
 705                                   util.addClass(button, 'gray');
 706                                   barChart.updateJSON(json2);
 707                                 });
 708                                 */
 709                                 //dynamically add legend to list
 710                                 var list = $jit.id('legend'+chartId);
 711                                 var legend = funnelChart.getLegend(),
 712                                         cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
 713                                         rows = Math.ceil(legend["name"].length/cols);
 714                                         table = "<table cellpadding='0' cellspacing='0' align='left'>";
 715                                 var j = 0;
 716                                 for(i=0;i<rows;i++) {
 717                                         table += "<tr>";
 718                                         for(td=0;td<cols;td++) {
 719
 720                                                 table += '<td width=\'16\' valign=\'top\'>';
 721                                                 if(legend["name"][j] != undefined) {
 722                                                         table += '<div class=\'query-color\' style=\'background-color:'
 723                                                           + legend["color"][j] +'\'>&nbsp;</div>';
 724                                                 }
 725
 726                                                 table += '</td>';
 727                                                 table += '<td class=\'label\' valign=\'top\'>';
 728                                                 if(legend["name"][j] != undefined) {
 729                                                         table += legend["name"][j];
 730                                                 }
 731
 732                                                 table += '</td>';
 733                                                 j++;
 734                                                 }
 735                                         table += "</tr>";
 736                                 }
 737
 738                                         table += "</table>";
 739                                 list.innerHTML = table;
 740
 741                                 //save canvas to image for pdf consumption
 742                                 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
 743
 744                         var firstLoad = (SUGAR.isIE) ? true: false,
 745                         orgWindowWidth = document.body.offsetWidth,
 746                         orgContainerDivWidth = document.getElementById(chartId).offsetWidth;
 747
 748                                 var refreshGraph = function() {
 749                                         var newWindowWidth = document.body.offsetWidth;
 750                                         var diff = Math.abs(newWindowWidth - orgWindowWidth);
 751                                         if(diff>20 && !firstLoad){
 752                                                 funnelChart.resizeGraph(json,orgWindowWidth,orgContainerDivWidth,pageCols);
 753                                         }
 754                                         firstLoad = false;
 755                                 }
 756
 757                                 //refresh graph on window resize
 758
 759                                 var doRefresh = function() {
 760                                         setTimeout(function() {refreshGraph()}, delay);
 761                                 }
 762
 763                                 YAHOO.util.Event.addListener(window, 'resize', function() {doRefresh()});
 764
 765
 766                                 }
 767                         }
 768
 769                                 var callback =
 770                                 {
 771                                   success:handleSuccess,
 772                                   failure:handleFailure,
 773                                   argument: { foo:'foo', bar:''}
 774                                 };
 775
 776                                 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
 777                                 break;
 778
 779
 780
 781                         case "gaugeChart":
 782
 783                                 var handleFailure = function(o){
 784                                 alert('fail');
 785                                         if(o.responseText !== undefined){
 786                                                 alert('failed');
 787                                         }
 788                                 }
 789                                 var handleSuccess = function(o){
 790
 791                                         if(o.responseText !== undefined){
 792                                         var json = eval('('+o.responseText+')');
 793                                         var properties = $jit.util.splat(json.properties)[0];
 794
 795                                                 //init Gauge Chart
 796                                 var gaugeChart = new $jit.GaugeChart({
 797                                   //id of the visualization container
 798                                   injectInto: chartId,
 799                                   //whether to add animations
 800                                   animate: false,
 801                                   renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
 802                                   backgroundColor: 'rgb(255,255,255)',
 803                                   colorStop1: 'rgba(255,255,255,.8)',
 804                                   colorStop2: 'rgba(255,255,255,0)',
 805                                   labelType: properties['labels'],
 806                                   hoveredColor: false,
 807                                   Title: {
 808                                         text: properties['title'],
 809                                         size: 16,
 810                                         color: '#444444',
 811                                         offset: 20
 812                                   },
 813                                   Subtitle: {
 814                                         text: properties['subtitle'],
 815                                         size: 11,
 816                                         color: css["color"],
 817                                         offset: 5
 818                                   },
 819                                   //offsets
 820                                   offset: 20,
 821                                   gaugeStyle: {
 822                                         backgroundColor: '#aaaaaa',
 823                                         borderColor: '#999999',
 824                                         needleColor: 'rgba(255,0,0,.8)',
 825                                         borderSize: 4,
 826                                         positionFontSize: 24,
 827                                         positionOffset: 2
 828                                   },
 829                                   //slice style
 830                                   type: useGradients? chartConfig["gaugeType"]+':gradient' : chartConfig["gaugeType"],
 831                                   //whether to show the labels for the slices
 832                                   showLabels:true,
 833                                   Events: {
 834                                         enable: true,
 835                                         onClick: function(node) {
 836                                         if(!node || SUGAR.util.isTouchScreen()) return;
 837                                         if(node.link == 'undefined' || node.link == '') return;
 838                                         window.location.href=node.link;
 839                                         }
 840                                   },
 841                                   //label styling
 842                                   Label: {
 843                                         type: labelType, //Native or HTML
 844                                         size: 12,
 845                                         family: css["font-family"],
 846                                         color: css["color"]
 847                                   },
 848                                   //enable tips
 849                                   Tips: {
 850                                         enable: true,
 851                                         onShow: function(tip, elem) {
 852                                           if(elem.link != 'undefined' && elem.link != '') {
 853                                                 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
 854                                           } else {
 855                                                 drillDown = "";
 856                                           }
 857                                           if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
 858                                                 value = "elem.valuelabel";
 859                                           } else {
 860                                                 value = "elem.value";
 861                                           }
 862                                            eval("tip.innerHTML = '<b>' + elem.label + '</b>: ' + "+ value +" + drillDown");
 863                                         }
 864                                   }
 865                                 });
 866                                 //load JSON data.
 867                                 gaugeChart.loadJSON(json);
 868
 869
 870                                 var list = $jit.id('legend'+chartId);
 871                                 var legend = gaugeChart.getLegend(),
 872                                         cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
 873                                         rows = Math.ceil(legend["name"].length/cols);
 874                                         table = "<table cellpadding='0' cellspacing='0' align='left'>";
 875                                 var j = 1;
 876                                 for(i=0;i<rows;i++) {
 877                                         table += "<tr>";
 878                                         for(td=0;td<cols;td++) {
 879
 880                                                 table += '<td width=\'16\' valign=\'top\'>';
 881                                                 if(legend["name"][j] != undefined) {
 882                                                         table += '<div class=\'query-color\' style=\'background-color:'
 883                                                           + legend["color"][j] +'\'>&nbsp;</div>';
 884                                                 }
 885
 886                                                 table += '</td>';
 887                                                 table += '<td class=\'label\' valign=\'top\'>';
 888                                                 if(legend["name"][j] != undefined) {
 889                                                         table += legend["name"][j];
 890                                                 }
 891
 892                                                 table += '</td>';
 893                                                 j++;
 894                                                 }
 895                                         table += "</tr>";
 896                                 }
 897
 898                                         table += "</table>";
 899                                 list.innerHTML = table;
 900
 901
 902                                 //save canvas to image for pdf consumption
 903                                 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
 904
 905                         var firstLoad = (SUGAR.isIE) ? true: false,
 906                         orgWindowWidth = document.body.offsetWidth,
 907                         orgContainerDivWidth = document.getElementById(chartId).offsetWidth;
 908
 909                                 var refreshGraph = function() {
 910                                         var newWindowWidth = document.body.offsetWidth;
 911                                         var diff = Math.abs(newWindowWidth - orgWindowWidth);
 912                                         if(diff>20 && !firstLoad){
 913                                                 gaugeChart.resizeGraph(json,orgWindowWidth,orgContainerDivWidth,pageCols);
 914                                         }
 915                                                 firstLoad = false;
 916                                 }
 917
 918                                 //refresh graph on window resize
 919
 920                                 var doRefresh = function() {
 921                                         setTimeout(function() {refreshGraph()}, delay);
 922                                 }
 923
 924                                 YAHOO.util.Event.addListener(window, 'resize', function() {doRefresh()});
 925
 926
 927                                 }
 928                         }
 929
 930                                 var callback =
 931                                 {
 932                                   success:handleSuccess,
 933                                   failure:handleFailure,
 934                                   argument: { foo:'foo', bar:''}
 935                                 };
 936
 937                                 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
 938
 939                                 break;
 940
 941                         }
 942                 }