├── BarChartWebPart.txt
├── IncludeScriptsWebPart.txt
├── PieChartWebPart.txt
├── README.md
├── StackedBarChartWebPart.txt
├── engagementcharts.query.js
├── engagementcharts.utilities.js
└── engagementcharts.viewmodel.js


/BarChartWebPart.txt:
--------------------------------------------------------------------------------
 1 |     <!--Code for Engagements By Leader Bar Chart-->
 2 |     <script type="text/javascript">
 3 |         "use strict";
 4 | 
 5 |         $(document).ready(function () {
 6 |             EngagementChartBuilder.LeaderEngagementsChart.load();
 7 |         });
 8 |     </script>
 9 |     <style type="text/css">
10 | 	    #engagementsByLeaderChart {
11 | 	        width: 300px;
12 |             float: left;
13 | 	    }
14 |     </style>
15 |     <div id="engagementsByLeaderChart">
16 |     </div>
17 |     <!--End Code for Engagements By Leader Bar Chart-->
18 | 
19 | 


--------------------------------------------------------------------------------
/IncludeScriptsWebPart.txt:
--------------------------------------------------------------------------------
1 |     <!--Base Scripts for Dashboard-->
2 |     <script src="/sites/chartingdemo/SiteAssets/jquery-1.9.1.min.js"></script>
3 |     <script src="/sites/chartingdemo/SiteAssets/highcharts.js"></script>
4 |     <script src="/sites/chartingdemo/SiteAssets/exporting.js"></script>
5 |     <script type="text/javascript" src="/sites/chartingdemo/SiteAssets/engagementcharts.utilities.js"></script>
6 |     <script type="text/javascript" src="/sites/chartingdemo/SiteAssets/engagementcharts.query.js"></script>
7 |     <script type="text/javascript" src="/sites/chartingdemo/SiteAssets/engagementcharts.viewmodel.js"></script>
8 |     <!--End Base Scripts for Dashboard-->
9 | 


--------------------------------------------------------------------------------
/PieChartWebPart.txt:
--------------------------------------------------------------------------------
 1 |     <!--Code for Engagement Pie Chart Web Part-->
 2 |     <script type="text/javascript">
 3 |         "use strict";
 4 | 
 5 |         $(document).ready(function () {
 6 |             EngagementChartBuilder.EngagementsPieChart.load();
 7 |         });
 8 |     </script>
 9 |     <style type="text/css">
10 | 	    #engagementPieChart {
11 | 	        width: 300px;
12 |             float: left;
13 | 	    }
14 |     </style>
15 |     <div id="engagementPieChart">
16 |     </div>
17 |     <!--End Code for Engagement Pie Chart Web Part-->
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ChartsInSharePoint2013
2 | ======================
3 | 
4 | Building Charts in SharePoint 2013 using JavaScript and REST
5 | 


--------------------------------------------------------------------------------
/StackedBarChartWebPart.txt:
--------------------------------------------------------------------------------
 1 |     <!--Code for Person Engagements By Status Stacked Bar Chart-->
 2 |     <script type="text/javascript">
 3 |         "use strict";
 4 | 
 5 |         $(document).ready(function () {
 6 |             EngagementChartBuilder.LeaderEngagementsByStatusChart.load();
 7 |         });
 8 |     </script>
 9 |     <style type="text/css">
10 | 	    #engagementsByStatusChart {
11 | 	        width: 300px;
12 |             float: left;
13 | 	    }
14 |     </style>
15 |     <div id="engagementsByStatusChart">
16 |     </div>
17 |     <!--End Code for Person Engagements By Status Stacked Bar Chart-->
18 | 


--------------------------------------------------------------------------------
/engagementcharts.query.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var EngagementChartBuilder = window.EngagementChartBuilder || {};
 4 | 
 5 | //The module for executing a REST query
 6 | EngagementChartBuilder.RESTQuery = function (listTitle, query) {
 7 |     var execute = function (listTitle, query) {
 8 |         var restUrl = _spPageContextInfo.webServerRelativeUrl +
 9 |             "/_api/web/lists/getByTitle('" + listTitle + "')/items";
10 |         if (query != "") {
11 |             restUrl = restUrl + "?" + query;
12 |         }
13 |         var deferred = $.ajax({
14 |             url: restUrl,
15 |             type: "GET",
16 |             headers: {
17 |                 "accept": "application/json;odata=verbose",
18 |                 "X-RequestDigest": $("#__REQUESTDIGEST").val()
19 |             }
20 |         });
21 | 
22 |         return deferred.promise()
23 |     };
24 | 
25 |     return {
26 |         execute: execute
27 |     }
28 | }();
29 | 
30 | 


--------------------------------------------------------------------------------
/engagementcharts.utilities.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var EngagementChartBuilder = window.EngagementChartBuilder || {};
  4 | 
  5 | EngagementChartBuilder.Utilities = function () {
  6 |     var buildCategoryCounts = function (countArray, dataArray) {
  7 |         if (countArray == undefined) {
  8 |             countArray = [];
  9 |         }
 10 | 
 11 |         for (var i = 0; i < dataArray.length; i++) {
 12 |             var currValue = dataArray[i];
 13 |             var found = false;
 14 |             for (var j = 0; j < countArray.length; j++) {
 15 |                 if (countArray[j][0] == currValue) {
 16 |                     found = true;
 17 |                     var newCount = countArray[j][1];
 18 |                     countArray[j][1] = newCount + 1;
 19 |                 }
 20 |             }
 21 |             if (!found) {
 22 |                 countArray.push([currValue, 1]);
 23 |             }
 24 |         }
 25 |         return countArray;
 26 |     },
 27 |     loadPieChart = function (countArray, divId, chartTitle) {
 28 |         //Build Pie Chart
 29 |         Highcharts.setOptions({
 30 |         })
 31 |         $(divId).highcharts({
 32 |             chart: {
 33 |                 plotBackgroundColor: null,
 34 |                 plotBorderWidth: null,
 35 |                 plotShadow: false
 36 |             },
 37 |             credits: {
 38 |                 enabled: false
 39 |             },
 40 |             title: {
 41 |                 text: chartTitle
 42 |             },
 43 |             tooltip: {
 44 |                 pointFormat: '{series.name}: <b>{point.y}</b>',
 45 |                 percentageDecimals: 0
 46 |             },
 47 |             plotOptions: {
 48 |                 pie: {
 49 |                     allowPointSelect: true,
 50 |                     cursor: 'pointer',
 51 |                     dataLabels: {
 52 |                         enabled: false
 53 |                     },
 54 |                     showInLegend: true
 55 |                 }
 56 |             },
 57 |             series: [{
 58 |                 type: 'pie',
 59 |                 name: chartTitle,
 60 |                 data: countArray
 61 |             }]
 62 |         });
 63 |     },
 64 |     loadBarChart = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
 65 |         //Build Bar Chart
 66 |         $(divId).highcharts({
 67 |             chart: {
 68 |                 type: 'bar'
 69 |             },
 70 |             credits: {
 71 |                 enabled: false
 72 |             },
 73 |             title: {
 74 |                 text: chartTitle
 75 |             },
 76 |             xAxis: {
 77 |                 categories: xCategories
 78 |             },
 79 |             yAxis: {
 80 |                 min: 0,
 81 |                 title: {
 82 |                     text: yAxisTitle
 83 |                 }
 84 |             },
 85 |             legend: {
 86 |                 enabled: false
 87 |             },
 88 |             plotOptions: {
 89 |                 bar: {
 90 |                     dataLabels: {
 91 |                         enabled: false
 92 |                     }
 93 |                 },
 94 |                 series: {
 95 |                     animation: false
 96 |                 }
 97 |             },
 98 |             series: [{
 99 |                 name: yAxisTitle,
100 |                 data: seriesData
101 |             }]
102 |         });
103 |     },
104 |     loadStackedBarChart = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
105 |         //Build Stacked Bar Chart
106 |         $(divId).highcharts({
107 |             chart: {
108 |                 type: 'bar'
109 |             },
110 |             credits: {
111 |                 enabled: false
112 |             },
113 |             title: {
114 |                 text: chartTitle
115 |             },
116 |             xAxis: {
117 |                 categories: xCategories
118 |             },
119 |             yAxis: {
120 |                 min: 0,
121 |                 title: {
122 |                     text: yAxisTitle
123 |                 }
124 |             },
125 |             legend: {
126 |                 backgroundColor: '#FFFFFF',
127 |                 reversed: true
128 |             },
129 |             plotOptions: {
130 |                 series: {
131 |                     animation: false,
132 |                     stacking: 'normal'
133 |                 }
134 |             },
135 |             series: seriesData
136 |         });
137 |     }
138 |     return {
139 |         buildCategoryCounts: buildCategoryCounts,
140 |         loadPieChart: loadPieChart,
141 |         loadBarChart: loadBarChart,
142 |         loadStackedBarChart: loadStackedBarChart
143 | }
144 | }();
145 | 


--------------------------------------------------------------------------------
/engagementcharts.viewmodel.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var EngagementChartBuilder = window.EngagementChartBuilder || {};
  4 | 
  5 | EngagementChartBuilder.EngagementsPieChart = function () {
  6 |     var load = function () {
  7 |         $.when(
  8 |             //Independent Engagements List - retrieving Engagement Type field to get Enterprise or Rebel type
  9 |             EngagementChartBuilder.RESTQuery.execute("Independent%20Engagements", "$select=Engagement_x0020_Type"),
 10 |             //Rebel Engagements List
 11 |             EngagementChartBuilder.RESTQuery.execute("Rebel%20Engagements", "$select=ID"),
 12 |             //Empire Engagements List
 13 |             EngagementChartBuilder.RESTQuery.execute("Empire%20Engagements", "$select=ID")
 14 |         ).done(
 15 |             function (engagements1, engagements2, engagements3) {
 16 |                 var dataArray = [];
 17 |                 var countArray = [];
 18 |                 //Add count of Rebel Engagements list
 19 |                 countArray.push(["Rebel", engagements2[0].d.results.length]);
 20 |                 //Add count of Empire Engagements list
 21 |                 countArray.push(["Empire", engagements3[0].d.results.length]);
 22 |                 //Get data from Independent Engagements list
 23 |                 var results = engagements1[0].d.results;
 24 |                 for (var i = 0; i < results.length; i++) {
 25 |                     var engagementType = results[i].Engagement_x0020_Type.results;
 26 |                     for (var j = 0; j < engagementType.length; j++) {
 27 |                         dataArray.push(engagementType[j]);
 28 |                     }
 29 |                 }
 30 |                 countArray = EngagementChartBuilder.Utilities.buildCategoryCounts(countArray, dataArray);
 31 |                 //Build Chart
 32 |                 EngagementChartBuilder.Utilities.loadPieChart(countArray, "#engagementPieChart", "Engagements");
 33 |             }
 34 |         ).fail(
 35 |             function (engagements1, engagements2, engagements3) {
 36 |                 $("#engagementPieChart").html("<strong>An error has occurred.</strong>");
 37 |             }
 38 |         );
 39 |     };
 40 | 
 41 |     return {
 42 |         load: load
 43 |     }
 44 | }();
 45 | 
 46 | EngagementChartBuilder.LeaderEngagementsByStatusChart = function () {
 47 |     var load = function () {
 48 |         $.when(
 49 |             //Rebel Engagements List
 50 |             EngagementChartBuilder.RESTQuery.execute("Rebel%20Engagements", "$select=Leader,Status"),
 51 |             //Empire Engagements List
 52 |             EngagementChartBuilder.RESTQuery.execute("Empire%20Engagements", "$select=Leader,Status")
 53 |         ).done(
 54 |             function (engagements1, engagements2) {
 55 |                 var data = [];
 56 |                 //Get results from Rebel Engagements
 57 |                 var results = engagements1[0].d.results;
 58 |                 for (var i = 0; i < results.length; i++) {
 59 |                     var found = false;
 60 |                     for (var j = 0; j < data.length; j++) {
 61 |                         if (data[j].leaderName == results[i].Leader && data[j].statusName == results[i].Status) {
 62 |                             data[j].statusCount = data[j].statusCount + 1;
 63 |                             found = true;
 64 |                         }
 65 |                     }
 66 |                     if (!found) {
 67 |                         data.push(new EngagementChartBuilder.StatusByLeader(results[i].Leader, results[i].Status, 1));
 68 |                     }
 69 |                 }
 70 |                 //Get results from Empire Engagements Engagements
 71 |                 var results = engagements2[0].d.results;
 72 |                 for (var i = 0; i < results.length; i++) {
 73 |                     var found = false;
 74 |                     for (var j = 0; j < data.length; j++) {
 75 |                         if (data[j].leaderName == results[i].Leader && data[j].statusName == results[i].Status) {
 76 |                             data[j].statusCount = data[j].statusCount + 1;
 77 |                             found = true;
 78 |                         }
 79 |                     }
 80 |                     if (!found) {
 81 |                         data.push(new EngagementChartBuilder.StatusByLeader(results[i].Leader, results[i].Status, 1));
 82 |                     }
 83 |                 }
 84 |                 //Put data into format for stacked bar chart
 85 |                 var seriesData = [];
 86 |                 var xCategories = [];
 87 |                 var xStatus = [];
 88 |                 var i, j, cat, stat;
 89 |                 //Get Categories (Leader Name)
 90 |                 for (i = 0; i < data.length; i++) {
 91 |                     cat = data[i].leaderName;
 92 |                     if (xCategories.indexOf(cat) === -1) {
 93 |                         xCategories[xCategories.length] = cat;
 94 |                     }
 95 |                 }
 96 |                 //Get Status values
 97 |                 for (i = 0; i < data.length; i++) {
 98 |                     stat = data[i].statusName;
 99 |                     if (xStatus.indexOf(stat) === -1) {
100 |                         xStatus[xStatus.length] = stat;
101 |                     }
102 |                 }
103 |                 //Create initial series data with 0 values
104 |                 for (i = 0; i < xStatus.length; i++) {
105 |                     var dataArray = [];
106 |                     for (j = 0; j < xCategories.length; j++) {
107 |                         dataArray.push(0);
108 |                     }
109 |                     seriesData.push({ name: xStatus[i], data: dataArray });
110 |                 }
111 |                 //Cycle through data to assign counts to the proper location in the series data
112 |                 for (i = 0; i < data.length; i++) {
113 |                     var leaderIndex = xCategories.indexOf(data[i].leaderName);
114 |                     for(j = 0; j < seriesData.length; j++){
115 |                         if(seriesData[j].name == data[i].statusName){
116 |                             seriesData[j].data[leaderIndex] = data[i].statusCount;
117 |                             break;
118 |                         }
119 |                     }
120 |                 }
121 |                 //Build Chart
122 |                 EngagementChartBuilder.Utilities.loadStackedBarChart(xCategories, seriesData, "#engagementsByStatusChart", "Engagements by Status", "Total Engagements");
123 |             }
124 |         );
125 |     };
126 | 
127 |     return {
128 |         load: load
129 |     }
130 | }();
131 | 
132 | EngagementChartBuilder.LeaderEngagementsChart = function () {
133 |     var load = function () {
134 |         $.when(
135 |             //Rebel Engagements List
136 |             EngagementChartBuilder.RESTQuery.execute("Rebel%20Engagements", "$select=Leader"),
137 |             //Empire Engagements List
138 |             EngagementChartBuilder.RESTQuery.execute("Empire%20Engagements", "$select=Leader")
139 |         ).done(
140 |             function (engagements1, engagements2) {
141 |                 var dataArray = [];
142 |                 var countArray = [];
143 |                 //Get data from Rebel Engagements list
144 |                 var results = engagements1[0].d.results;
145 |                 for (var i = 0; i < results.length; i++) {
146 |                     var leader = results[i].Leader;
147 |                     dataArray.push(leader);
148 |                 }
149 |                 //Get data from Empire Engagements list
150 |                 var results = engagements2[0].d.results;
151 |                 for (var i = 0; i < results.length; i++) {
152 |                     var leader = results[i].Leader;
153 |                     dataArray.push(leader);
154 |                 }
155 |                 countArray = EngagementChartBuilder.Utilities.buildCategoryCounts(countArray, dataArray);
156 |                 //Put data into format for bar chart
157 |                 var seriesData = [];
158 |                 var xCategories = [];
159 |                 for (var i = 0; i < countArray.length; i++) {
160 |                     xCategories.push(countArray[i][0]);
161 |                     seriesData.push(countArray[i][1]);
162 |                 }
163 |                 //Build Chart
164 |                 EngagementChartBuilder.Utilities.loadBarChart(xCategories, seriesData, "#engagementsByLeaderChart", "Engagements by Person", "Total Engagements");
165 |             }
166 |         ).fail(
167 |             function (engagements1, engagements2) {
168 |                 $("#engagementsByLeaderChart").html("<strong>An error has occurred.</strong>");
169 |             }
170 |         );
171 |     };
172 | 
173 |     return {
174 |         load: load
175 |     }
176 | }();
177 | 
178 | //object for holding a category instance
179 | EngagementChartBuilder.StatusByLeader = function (name, status, count) {
180 |     var leaderName = name,
181 |         statusName = status,
182 |         statusCount = count
183 | 
184 |     return {
185 |         leaderName: name,
186 |         statusName: statusName,
187 |         statusCount: statusCount
188 |     }
189 | }
190 | 


--------------------------------------------------------------------------------