1 /*********************************************************************************
2 * SugarCRM is a customer relationship management program developed by
3 * SugarCRM, Inc. Copyright (C) 2004-2011 SugarCRM Inc.
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.
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
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
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.
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.
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 ********************************************************************************/
39 function loadSugarChart (chartId,jsonFilename,css,chartConfig) {
41 var labelType, useGradients, nativeTextSupport, animate;
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');
49 nativeTextSupport = labelType == 'Native';
50 useGradients = nativeCanvasSupport;
55 switch(chartConfig["chartType"]) {
57 var handleFailure = function(o){
59 if(o.responseText !== undefined){
63 var handleSuccess = function(o){
65 if(o.responseText !== undefined && o.responseText != "No Data"){
66 var json = eval('('+o.responseText+')');
68 var properties = $jit.util.splat(json.properties)[0];
69 var marginBottom = (chartConfig["orientation"] == 'vertical' && json.values.length > 8) ? 20*4 : 20;
71 var barChart = new $jit.BarChart({
72 //id of the visualization container
74 //whether to add animations
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)',
85 //horizontal or vertical barcharts
86 orientation: chartConfig["orientation"],
89 text: properties['title'],
95 text: properties['subtitle'],
102 color: css["gridLineColor"]
105 barsOffset: (chartConfig["orientation"] == "vertical") ? 30 : 20,
106 //visualization offset
114 text: (chartConfig["scroll"] && SUGAR.util.isTouchScreen()) ? "Use two fingers to scroll" : "",
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;
125 //labels offset position
128 type: useGradients? chartConfig["barType"]+':gradient' : chartConfig["barType"],
129 //whether to show the aggregation of the values
131 //whether to show the labels for the bars
135 type: labelType, //Native or HTML
137 family: css["font-family"],
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";
151 if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
152 value = "elem.valuelabel";
154 value = "elem.value";
156 eval("tip.innerHTML = '<b>' + elem."+chartConfig["tip"]+" + '</b>: ' + "+value+" + ' - ' + elem.percentage + '%' + drillDown");
161 barChart.loadJSON(json);
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);
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'>";
184 for(i=0;i<rows;i++) {
186 for(td=0;td<cols;td++) {
188 table += '<td nowrap>';
189 if(legend["name"][j] != undefined) {
190 table += '<div class=\'query-color\' style=\'background-color:'
191 + legend["color"][j] +'\'> </div>' + legend["name"][j];
201 list.innerHTML = table;
204 //save canvas to image for pdf consumption
205 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
213 success:handleSuccess,
214 failure:handleFailure,
215 argument: { foo:'foo', bar:''}
218 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
222 var handleFailure = function(o){
224 if(o.responseText !== undefined){
228 var handleSuccess = function(o){
230 if(o.responseText !== undefined && o.responseText != "No Data"){
231 var json = eval('('+o.responseText+')');
233 var properties = $jit.util.splat(json.properties)[0];
235 var lineChart = new $jit.LineChart({
236 //id of the visualization container
238 //whether to add animations
240 renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
241 backgroundColor: 'rgb(255,255,255)',
242 colorStop1: 'rgba(255,255,255,.8)',
243 colorStop2: 'rgba(255,255,255,0)',
244 selectOnHover: false,
246 text: properties['title'],
252 text: properties['subtitle'],
259 color: css["gridLineColor"]
261 //visualization offset
270 onClick: function(node) {
271 if(!node || SUGAR.util.isTouchScreen()) return;
272 if(node.link == 'undefined' || node.link == '') return;
273 window.location.href=node.link;
276 //labels offset position
279 type: useGradients? chartConfig["lineType"]+':gradient' : chartConfig["lineType"],
280 //whether to show the aggregation of the values
282 //whether to show the labels for the bars
286 type: labelType, //Native or HTML
288 family: css["font-family"],
295 onShow: function(tip, elem) {
296 if(elem.link != 'undefined' && elem.link != '') {
297 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
302 if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
303 var value = "elem.valuelabel";
305 var value = "elem.value";
309 eval("var name = elem."+chartConfig["tip"]+";");
310 var content = '<table>';
312 for(var i=0; i<name.length; i++) {
313 content += '<tr><td><b>' + name[i] + '</b>:</td><td> ' + elem.value[i] + ' - ' + elem.percentage[i] + '%' + '</td></tr>';
315 content += '</table>';
316 tip.innerHTML = content;
318 eval("tip.innerHTML = '<b>' + elem."+chartConfig["tip"]+" + '</b>: ' + "+value+" + ' - ' + elem.percentage + '%' + drillDown");
324 lineChart.loadJSON(json);
328 var list = $jit.id('id-list'),
329 button = $jit.id('update'),
330 orn = $jit.id('switch-orientation');
331 //update json on click 'Update Data'
332 $jit.util.addEvent(button, 'click', function() {
333 var util = $jit.util;
334 if(util.hasClass(button, 'gray')) return;
335 util.removeClass(button, 'white');
336 util.addClass(button, 'gray');
337 barChart.updateJSON(json2);
340 //dynamically add legend to list
341 var list = $jit.id('legend'+chartId);
342 var legend = lineChart.getLegend(),
343 cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
344 rows = Math.ceil(legend["name"].length/cols),
345 table = "<table cellpadding='0' cellspacing='0' align='left'>";
347 for(i=0;i<rows;i++) {
349 for(td=0;td<cols;td++) {
351 table += '<td nowrap>';
352 if(legend["name"][j] != undefined) {
353 table += '<div class=\'query-color\' style=\'background-color:'
354 + legend["color"][j] +'\'> </div>' + legend["name"][j];
364 list.innerHTML = table;
367 //save canvas to image for pdf consumption
368 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
376 success:handleSuccess,
377 failure:handleFailure,
378 argument: { foo:'foo', bar:''}
381 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
387 var handleFailure = function(o){
389 if(o.responseText !== undefined){
393 var handleSuccess = function(o){
395 if(o.responseText !== undefined){
396 var json = eval('('+o.responseText+')');
397 var properties = $jit.util.splat(json.properties)[0];
400 var pieChart = new $jit.PieChart({
401 //id of the visualization container
403 //whether to add animations
405 renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
406 backgroundColor: 'rgb(255,255,255)',
407 colorStop1: 'rgba(255,255,255,.8)',
408 colorStop2: 'rgba(255,255,255,0)',
409 labelType: properties['labels'],
416 type: useGradients? chartConfig["pieType"]+':gradient' : chartConfig["pieType"],
417 //whether to show the labels for the slices
421 onClick: function(node) {
422 if(!node || SUGAR.util.isTouchScreen()) return;
423 if(node.link == 'undefined' || node.link == '') return;
424 window.location.href=node.link;
429 type: labelType, //Native or HTML
431 family: css["font-family"],
437 onShow: function(tip, elem) {
438 if(elem.link != 'undefined' && elem.link != '') {
439 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
444 if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
445 value = "elem.valuelabel";
447 value = "elem.value";
449 eval("tip.innerHTML = '<b>' + elem.label + '</b>: ' + "+ value +" + ' - ' + elem.percentage + '%' + drillDown");
454 pieChart.loadJSON(json);
456 //dynamically add legend to list
457 var list = $jit.id('legend'+chartId);
458 var legend = pieChart.getLegend(),
459 cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
460 rows = Math.ceil(legend["name"].length/cols);
461 table = "<table cellpadding='0' cellspacing='0' align='left'>";
463 for(i=0;i<rows;i++) {
465 for(td=0;td<cols;td++) {
467 table += '<td nowrap>';
468 if(legend["name"][j] != undefined) {
469 table += '<div class=\'query-color\' style=\'background-color:'
470 + legend["color"][j] +'\'> </div>' + legend["name"][j];
480 list.innerHTML = table;
483 //save canvas to image for pdf consumption
484 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
490 success:handleSuccess,
491 failure:handleFailure,
492 argument: { foo:'foo', bar:''}
495 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
502 var handleFailure = function(o){
504 if(o.responseText !== undefined){
508 var handleSuccess = function(o){
510 if(o.responseText !== undefined && o.responseText != "No Data"){
511 var json = eval('('+o.responseText+')');
513 var properties = $jit.util.splat(json.properties)[0];
516 var funnelChart = new $jit.FunnelChart({
517 //id of the visualization container
519 //whether to add animations
521 renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
522 backgroundColor: 'rgb(255,255,255)',
523 colorStop1: 'rgba(255,255,255,.8)',
524 colorStop2: 'rgba(255,255,255,0)',
525 //orientation setting should not be changed
526 orientation: "vertical",
529 text: properties['title'],
535 text: properties['subtitle'],
542 //visualization offset
551 onClick: function(node) {
552 if(!node || SUGAR.util.isTouchScreen()) return;
553 if(node.link == 'undefined' || node.link == '') return;
554 window.location.href=node.link;
557 //labels offset position
560 type: useGradients? chartConfig["funnelType"]+':gradient' : chartConfig["funnelType"],
561 //whether to show the aggregation of the values
563 //whether to show the labels for the bars
567 type: labelType, //Native or HTML
569 family: css["font-family"],
576 onShow: function(tip, elem) {
577 if(elem.link != 'undefined' && elem.link != '') {
578 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
583 if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
584 value = "elem.valuelabel";
586 value = "elem.value";
588 eval("tip.innerHTML = '<b>' + elem."+chartConfig["tip"]+" + '</b>: ' + "+value+" + ' - ' + elem.percentage + '%' + drillDown");
593 funnelChart.loadJSON(json);
597 var list = $jit.id('id-list'),
598 button = $jit.id('update'),
599 orn = $jit.id('switch-orientation');
600 //update json on click 'Update Data'
601 $jit.util.addEvent(button, 'click', function() {
602 var util = $jit.util;
603 if(util.hasClass(button, 'gray')) return;
604 util.removeClass(button, 'white');
605 util.addClass(button, 'gray');
606 barChart.updateJSON(json2);
609 //dynamically add legend to list
610 var list = $jit.id('legend'+chartId);
611 var legend = funnelChart.getLegend(),
612 cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
613 rows = Math.ceil(legend["name"].length/cols);
614 table = "<table cellpadding='0' cellspacing='0' align='left'>";
616 for(i=0;i<rows;i++) {
618 for(td=0;td<cols;td++) {
620 table += '<td nowrap>';
621 if(legend["name"][j] != undefined) {
622 table += '<div class=\'query-color\' style=\'background-color:'
623 + legend["color"][j] +'\'> </div>' + legend["name"][j];
633 list.innerHTML = table;
635 //save canvas to image for pdf consumption
636 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
642 success:handleSuccess,
643 failure:handleFailure,
644 argument: { foo:'foo', bar:''}
647 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);
654 var handleFailure = function(o){
656 if(o.responseText !== undefined){
660 var handleSuccess = function(o){
662 if(o.responseText !== undefined){
663 var json = eval('('+o.responseText+')');
664 var properties = $jit.util.splat(json.properties)[0];
667 var gaugeChart = new $jit.GaugeChart({
668 //id of the visualization container
670 //whether to add animations
672 renderBackground: chartConfig['imageExportType'] == "jpg" ? true: false,
673 backgroundColor: 'rgb(255,255,255)',
674 colorStop1: 'rgba(255,255,255,.8)',
675 colorStop2: 'rgba(255,255,255,0)',
676 labelType: properties['labels'],
679 text: properties['title'],
685 text: properties['subtitle'],
693 backgroundColor: '#aaaaaa',
694 borderColor: '#999999',
695 needleColor: 'rgba(255,0,0,.8)',
697 positionFontSize: 24,
701 type: useGradients? chartConfig["gaugeType"]+':gradient' : chartConfig["gaugeType"],
702 //whether to show the labels for the slices
706 onClick: function(node) {
707 if(!node || SUGAR.util.isTouchScreen()) return;
708 if(node.link == 'undefined' || node.link == '') return;
709 window.location.href=node.link;
714 type: labelType, //Native or HTML
716 family: css["font-family"],
722 onShow: function(tip, elem) {
723 if(elem.link != 'undefined' && elem.link != '') {
724 drillDown = (SUGAR.util.isTouchScreen()) ? "<br><a href='"+ elem.link +"'>Click to drilldown</a>" : "<br>Click to drilldown";
728 if(elem.valuelabel != 'undefined' && elem.valuelabel != undefined && elem.valuelabel != '') {
729 value = "elem.valuelabel";
731 value = "elem.value";
733 eval("tip.innerHTML = '<b>' + elem.label + '</b>: ' + "+ value +" + drillDown");
738 gaugeChart.loadJSON(json);
741 var list = $jit.id('legend'+chartId);
742 var legend = gaugeChart.getLegend(),
743 cols = (typeof SUGAR == 'undefined' || typeof SUGAR.mySugar == 'undefined') ? 8 : 4,
744 rows = Math.ceil(legend["name"].length/cols);
745 table = "<table cellpadding='0' cellspacing='0' align='left'>";
747 for(i=0;i<rows;i++) {
749 for(td=0;td<cols;td++) {
751 table += '<td nowrap>';
752 if(legend["name"][j] != undefined) {
753 table += '<div class=\'query-color\' style=\'background-color:'
754 + legend["color"][j] +'\'> </div>' + legend["name"][j];
764 list.innerHTML = table;
767 //save canvas to image for pdf consumption
768 $jit.util.saveImageTest(chartId,jsonFilename,chartConfig["imageExportType"]);
774 success:handleSuccess,
775 failure:handleFailure,
776 argument: { foo:'foo', bar:''}
779 var request = YAHOO.util.Connect.asyncRequest('GET', jsonFilename + "?r=" + new Date().getTime(), callback);