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.