Sage CRM 7.2: 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.

Sage CRM 7.2: 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.  This is one of the new widgets that have been made available following the inclusion of Fusion Widgets in Sage CRM 7.2.

I have discussed the use of the use of the Fusion Widgets within the Reporting feature in a previous Article "Enhanced Charting Options with Fusion Widgets".

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

[code language="javascript"]
<script>
crm.ready(function(){
//Set up the Certainty Field to display a Fusion Chart Linear Gauge
var strScriptPath = crm.installUrl() + "FusionCharts/FusionCharts.js";
$.getScript(strScriptPath, function (data, textStatus, jqxhr) {
var myChart = new FusionCharts("/crm/FusionCharts/HLinearGauge.swf", "myChartId", "200", "75", "0");
myChart.setJSONData(
{
"chart": {
"lowerlimit": "0",
"upperlimit": "100",
"palette": "1",
"numbersuffix": "%",
"chartrightmargin": "20"
},
"pointers": {
"pointer": [
{
"value": crm("oppo_certainty").value()
}
]
}
}
)
myChart.render("_Dataoppo_certainty");

});
})
</script>
[/code]

The are a few points worth noting.

[code language="javascript"]
var strScriptPath = crm.installUrl() + "FusionCharts/FusionCharts.js";
$.getScript(strScriptPath, function (data, textStatus, jqxhr) {...})
[/code]

The first is that 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 7.2.

The second point is that I have automatically included the FusionChart.js script file by using the jQuery.getScript() method. This will load the FusionChart.js file 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 (Cloud, On Premise, Self Service and Web To Lead)". 

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.