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

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