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