{"id":9410,"date":"2016-10-27T23:14:01","date_gmt":"2016-10-27T21:14:01","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9410"},"modified":"2026-01-12T09:11:24","modified_gmt":"2026-01-12T09:11:24","slug":"242-crm-dashboards","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/242-crm-dashboards\/","title":{"rendered":"Microsoft CRM Dashboards with Highcharts"},"content":{"rendered":"

 <\/p>\n

You are probably familiar with the term \u201cKey Performance Indicator\u201d or KPI for short.<\/strong><\/b> Executives use KPI to track how effective their company is in achieve its business goals. KPI could be revenue, cost, customer satisfaction, etc.<\/p>\n

Once you have many KPIs, the best way to track them, and have them support decision making, is to expose them via graphical dashboards.<\/p>\n

However, even if it is tempting to jump right into building charts, an organization must first tackle the challenge of picking KPIs to track. Too many, too few, or simply irrelevant data, are equally bad.<\/p>\n

In my work as a developer of Microsoft Dynamics CRM projects (Customer Relationship Management), solving the KPI puzzle is the first step of implementing dashboards.<\/p>\n

Whereas KPI selection is out of scope for this article, there is plenty of literature on that subject you can check out on your own. Instead, let\u2019s focus on the data visualization itself.<\/p>\n

LET’S GET CHARTED<\/h3>\n

The default charting tools in Dynamics CRM help you to create a chart using a wizard, but it has its drawbacks. Among other things, it is hard to configure it to let the user select\/deselect a data-series in the chart.<\/p>\n

After evaluating many charting tools, I chose to implement Highcharts. It has many features by default; including the option to select\/deselect data-series in the chart.<\/p>\n

Dynamics CRM and Highcharts turned out to be a winning combination.<\/em><\/i><\/p>\n

LET’S GET CODING<\/h3>\n

The best way to experience the beauty of having key features by default is by setting up an example: Let\u2019s create a simple dashboard with a pie chart, where the user picks two date ranges from the calendar, clicks on generate button, and then the chart is created.<\/p>\n

<\/p>\n

It took me a few hours to finalize the project, so take your time to study the following code. It works for Dynamics CRM 2011 and 2013. (Download the complete code here<\/a>):<\/p>\n

<html lang=\"en\"><head>\r\n <link id=\"sharedaddy-css\" href=\"\/new_pikaday.css\" rel=\"stylesheet\" type=\"text\/css\" media=\"all\">\r\n <script src=\"\/ClientGlobalContext.js.aspx\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_jquery1.6.min.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_sdk.rest.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_json2.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_sdk.metadata.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_highcharts.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_moment.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_pikaday.js\" type=\"text\/javascript\"><\/script>\r\n <script src=\"\/new_custom_reports_common.js\" type=\"text\/javascript\"><\/script>\r\n <script type=\"text\/javascript\">\r\n var teamusers;\r\n function LeadSourceDataClass()\r\n {\r\n this.Name = '';\r\n this.Items = [];\r\n }\r\n...\r\n...\r\n...\r\n\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td class=\"tableLabel\">From<\/td>\r\n<td><input id=\"fromPicker\" type=\"text\"><\/td>\r\n<td class=\"tableLabel\">To<\/td>\r\n<td><input id=\"toPicker\" type=\"text\"><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><\/td>\r\n<td><input name=\"generateBtn\" id=\"generateBtn\" type=\"button\" value=\"Generate\"><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/div>\r\n<\/body><\/html><\/pre>\n
Let\u2019s dive in:
\nAs you can see, there are several sections and libraries used. In the beginning, there are a bunch of scripts and a CSS file, where you can add web resources to Dynamics CRM.<\/p>\n
I use Pikaday library to handle the date range selection from a calendar. To interact with Dynamics API, I use the following libraries: ClientGlobalContext.js.aspx, sdk.rest.js, json2.js, and sdk.metadata.js. To handle the charting part of my dashboard, I use Highcharts.<\/p>\n
You can also notice that in the body of the code, there are HTML elements to help the user select data filters, such as the record creation date range.<\/p>\n
The main part of the code is between the script tag (