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