Adding Google Charts in Sage CRM screens using Client Side code

1 minute read time.

A customer had the requirement to display certain numeric data graphically within their Self Service site.

Their requirement was to turn a field displaying numeric data on their public site into a 'widget'.

They could have used a create script on the field and Sage CRM's own CRMGraphicBlock COM object as was discussed in the article "Using the COM Graphic Object in a Create Script within Sage CRM screens".

This article uses the clientside technique of field identification that was discussed in "Field Identification in Clientside code in Sage CRM screens (Self Service and Web To Lead)"

As that previous article's title mentions this technique could be used not just for Self Service but any Sage CRM screen.

In screens like the public Self Service ones the Google Chart API can be used to create the graphical widget.

The Google Chart Wizard can be used to obtain the basic URL needed to generate the chart.

https://developers.google.com/chart/image/docs/chart_wizard

A basic URL that is created by the Google Wizard e.g.

http://chart.apis.google.com/chart?chxt=x &chbh=a &chs=100x40 &cht=bhs &chco=4D89F9,EFEFEF &chd=t:70|100 &chtt=Certainty &chts=676767,11.6

can then be the basis of the clientside code.

This code can then be added to the Custom Content box of a screen.

Clientside Code

[code language="javascript"]

crm.ready(function () {
//function script goes here
var myfield = crm("oppo_certainty");
myfield.caption("  ");
var strSpan = myfield.value();
//var strSpan = 70;
strLink = "";
myfield.text(strLink)

})


[/code]

When using an external utility like Google Charts you would have to consider any restrictions that Google places on its usage for example whether there is an excess number of API calls that need to be avoided.

Security may also be a concern when sending data to Google to get the images back. Because this is a public web service and the data is exchanged with a external company the intended use for these services should be considered.