Building the Sample
The included solution is a Sandbox solution built in VS2012 that deploys the client side script files to the Styles Library. This sample relies on a IT Requests list populated with data. Two list templates have been included in the root of the code source zip file "RequestsList_Data.stp" and "RequestsList_NoData.stp", obviously one is pre-populated with data and the other isn't. If you decide to use the template with data you will need to spend time cleaning up the Assigned To field or the code will fail. Basically all the blank items will need to be set to blank or set to a value.
1. Deploy the Dashboard Demo solution to a SharePoint site.
2. Upload the list template of your choice and create a list from it, call that list Requests (so that the list URL is ~sitecollection/lists/Request) and then change the list title to "IT Requests".
3. Create a Page in the Site Pages library (or a Page in the Page library) and insert a Content Editor webpart. NOTE: the DBDemo.html file is configured to be referenced from a page in the root of the site collection. If you're going to put it somewhere other than the root site collection you will need to modify the file.
4. Set the source of that webpart to the DBDemo.html file in the Style Library.
This solution includes several files that will be deployed to the StyleLibrary. When the DBDemo.html file is added to a page via a Content Editor WebPart it will resolve to the dashboard shown below assuming you have correctly set up the sample as outlined above.
Source Code Files
- DBDemo.html - HTML source file that should be references in a Content Editor WebPart.
- DBDemoStyles.css - CSS file to style the page.
- RefreshButton.png - Image file
- funnel.js - An additional .js library from Highcharts to provide a funnel chart.
- highcharts.js - The base .js library from Highcharts for displaying charts.
- jquery-1.9.1.min.js - Minified Jquery library.
- jquery.cookie.js - JQuery library for providing cookie support.
- knockout-2.2.1.js -Knockout's MVVM framework library.
For more information on JQuery please see http://jquery.com/
For more information on KockoutJS please see http://knockoutjs.com/
For more information on Highcharts please see http://www.highcharts.com/
Other Future Proof Code Postings: