How to build dynamic chart on Microsoft dynamics C...

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

A CRM outsourcing services providing company hires CRM experts to bring most sophisticated solutions for the clients. While working on recent project, the Microsoft dynamics CRM online development team determined the steps to create dynamic chart on CRM page with the help of Chart.js and javascript. To learn the steps for using Chart JS and Javascript for dynamic chart development, you can read this post further.

Today, we will explain how to create dynamic chart on CRM Page using Chart.js and javascript.

To begin with, create one html page, add references for required java scripts in <head> tag like jquery.js, json2.js, sdk.rest.js, ClientGlobalContext.js.aspx and main is Chart.js for our chart control. You can get Chart.js from here and sdk.rest.js from CRM SDK. CRM already contains ClientGlobalContext.js.aspx so you have to just reference that in html page.

So, your <head> tag shows something like this.

Now, we move to <script> tag, that is our java script coding part.

I wrote function to get top 50 paid records from Invoice entity. Then calculate sum of total amount of paid invoice by date. So chart will display total invoice amount per date. The following function will get Invoice records. I fetch only CreatedOn and TotalAmount, you can add more fields in select statement.

You can see that from the function “GetTopInvoice”, we have called “successCallback” and “errorCallback” functions from inside. successCallback function will calculate sum of TotalAmount by date and render Chart in <div> tag. I have to write this code to calculate sum because the above CRM query does not support “Group by” and aggregate functions like sum. The successCallback function is as like this.

And the errorCallback function is as like this.

Your full html will display like this.

After completing all the stuff on Html side, create one HTML web resource on CRM solution and copy our above HTML and script code inside it. You can load this web resource on CRM Dashboard. The result will display something like this image.

You can avail MS dynamics CRM outsourcing services from Microsoft dynamics CRM online development team that works efficiently to bring robust and intuitive solutions to enhance your business growth. By following the steps shared in this post, you can learn the process of creating dynamic chart using Chart JS and Javascript. Hope we get genuine response from you!