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