Controlling FusionChart Widgets with the Client Side API

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

Controlling FusionChart Widgets with the Client Side API

  • Comments 2
  • Likes

The image above shows that the value of the oppo_certainty field has been rendered as a graphic widget. The certainty is shown as a value on a linear gauge using the features of the FusionChart libraries that can be used within Sage CRM. 

I created the chart above using the following code that was added to the custom content box of the OpportunityDetailBox.

<script>

crm.ready(function () {
var contextInfo = crm.getArgs();
//Set up Opportunity Summary Screen
if (contextInfo.Act == "260") {

//Set up the Certainty Field to display a Fusion Chart Linear Gauge
var strThemePath = crm.installUrl() + "FusionCharts/themes/fusioncharts.theme.fint.js";
$.getScript(strThemePath);
var strScriptPath = crm.installUrl() + "FusionCharts/fusioncharts.js";
//get a javascript file from the server and execute it.
$.getScript(strScriptPath, function (data, textStatus, jqxhr) {
FusionCharts.ready(function () {
console.log("FusionCharts Ready");
var certaintyChart = new FusionCharts({
"type": "HLinearGauge",
"renderAt": "_Dataoppo_certainty",
"width": "200",
"height": "75",
"dataFormat": "json",
"dataSource": {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartRightMargin": "20",
},
"pointers": {
"pointer": [
{
"value": crm("oppo_certainty").value()
}
]
},
}
});
certaintyChart.render();
})

});

}
}
)

</script>

The are a few lines worth explaining a little more.

var strThemePath = crm.installUrl() + "FusionCharts/themes/fusioncharts.theme.fint.js";
$.getScript(strThemePath);
var strScriptPath = crm.installUrl() + "FusionCharts/fusioncharts.js";
$.getScript(strScriptPath, function (data, textStatus, jqxhr){...}


I have used the crm.installUrl() method to help create the correct path to the folder containing the Fusion Charts in a default installation of Sage CRM 2018 R1.  I have used this to load the style Theme for the chart.  'fint' is the FusionChart Internal Theme.

I have included the Theme and FusionChart.js script files by using the jQuery.getScript() method. This will load the script files from the server using a GET HTTP request, then immediately execute it. Because the script references objects created by the included FusionChart.js file all of the code that creates the chart is placed in the function referenced by the jQuery.getScript() method.

The last thing to point out is that in the myChart.render() method I have passed the element ID of the data area of the oppo_certainty field.

For more information about field ID see the article "Field Identification in Clientside code in Sage CRM screens". 

Comments
  • Awesome! Found a small syntax problem.  crm.ready(function{   should be crm.ready(function(){

  • Stacy,  Thanks for the correction.  I have corrected the original code in the article above.