You are probably familiar with the term “Key Performance Indicator” or KPI for short. Executives use KPI to track how effective their company is in achieve its business goals. KPI could be revenue, cost, customer satisfaction, etc.
Once you have many KPIs, the best way to track them, and have them support decision making, is to expose them via graphical dashboards.
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.
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.
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’s focus on the data visualization itself.
LET’S GET CHARTED
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.
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.
Dynamics CRM and Highcharts turned out to be a winning combination.
LET’S GET CODING
The best way to experience the beauty of having key features by default is by setting up an example: Let’s 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.
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):
<html lang="en"><head>
<link id="sharedaddy-css" href="/new_pikaday.css" rel="stylesheet" type="text/css" media="all">
<script src="/ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="/new_jquery1.6.min.js" type="text/javascript"></script>
<script src="/new_sdk.rest.js" type="text/javascript"></script>
<script src="/new_json2.js" type="text/javascript"></script>
<script src="/new_sdk.metadata.js" type="text/javascript"></script>
<script src="/new_highcharts.js" type="text/javascript"></script>
<script src="/new_moment.js" type="text/javascript"></script>
<script src="/new_pikaday.js" type="text/javascript"></script>
<script src="/new_custom_reports_common.js" type="text/javascript"></script>
<script type="text/javascript">
var teamusers;
function LeadSourceDataClass()
{
this.Name = '';
this.Items = [];
}
...
...
...
</thead>
<tbody>
<tr>
<td class="tableLabel">From</td>
<td><input id="fromPicker" type="text"></td>
<td class="tableLabel">To</td>
<td><input id="toPicker" type="text"></td>
</tr>
<tr>
<td></td>
<td><input name="generateBtn" id="generateBtn" type="button" value="Generate"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>Let’s dive in:
As 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.
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.
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.
The main part of the code is between the script tag (), as it handles the dashboard’s data. I use the method getFilter under the method generateChart, to handle the user’s selection from the data ranges input.
Just to clarify some important point: The data come from a Odata Endpoint API, the query is being done via Odata API call. After all required data are fetched, the retrieveLeadsCompleted method sends the data and the chart’s title to a helper method Helper.XRM.CustomReports.createPieChart. The helper method is in charge of setting up the chart using the Highcharts library, and voila the pie chart is created.
As you’ll see, the feature I needed (select/deselect graphs) is already there by default in Highcharts.
Now, I have a nice dashboard with a powerful data visualizations library :).
Note:
I am also sharing the helperjs file (enjoy)
var Helper = Helper || {};
Helper.XRM = Helper.XRM || {};
Helper.XRM.CustomReports = Helper.XRM.CustomReports || {};
Helper.XRM.CustomReports.MaxRecords = 100000;
//OptionSet Filter
...
Leave a Reply