Building Charts using ecmascript, REST with Cross Domain Call in SharePoint Hosted App
High Chart Site : http://www.highcharts.com/
First Create a SharePoint List called "Temperature" as shown below.
Open Visual Studio -> File -> New -> Project -> Installed -> Templates -> Visual C# -> Office/SharePoint -> Apps -> Apps for Office
Go to SharePointApp6 -> pages -> Open 'Default.aspx' page.
Change 'Default.aspx' page code as shown below.
--------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------
High Chart Site : http://www.highcharts.com/
First Create a SharePoint List called "Temperature" as shown below.
Go to SharePointApp6 -> pages -> Open 'Default.aspx' page.
Change 'Default.aspx' page code as shown below.
--------------------------------------------------------------------------------------------------------
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<meta name="WebPartPageExpansion" content="full" />
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js">
</script>
</script>
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<table>
<tr>
<td>
<div id="div1"></div>
</td>
<td>
<div id="container"></div>
</td>
</tr>
</table>
</asp:Content>
--------------------------------------------------------------------------------------------------------
Go to SharePointApp6 -> Scripts -> open 'App.js' JavaScript file.
Change 'App.js' JavaScript file code as shown below.--------------------------------------------------------------------------------------------------------
Below Code using
ecmascript
--------------------------------------------------------------------------------------------------------
var web;
var hostweburl;
var appweburl;
var arrayTemperatureListItems = [];
var arrayCity = [];
var arrarMonth = [];
var seriesData = [];
var tempArray = [];
var temCity;
$(document).ready(function () {
hostweburl =
decodeURIComponent(getQueryStringParameter('SPHostUrl'));
appweburl =
decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
var scriptbase = hostweburl + '/_layouts/15/';
$.getScript(scriptbase + 'SP.RequestExecutor.js',
printAllListItemsFromHostWeb);
});
function printAllListItemsFromHostWeb() {
var context;
var factory;
var appContextSite;
var collList;
context = new SP.ClientContext(appweburl);
factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
context.set_webRequestExecutorFactory(factory);
appContextSite = new SP.AppContextSite(context,
hostweburl);
this.web = appContextSite.get_web();
this.list = this.web.get_lists().getByTitle('Temperature');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
this.listItems = this.list.getItems(camlQuery);
context.load(this.listItems, 'Include(ID,City,Month,Temperature)');
context.executeQueryAsync(Function.createDelegate(this, successHandler),
Function.createDelegate(this, errorHandler));
function successHandler() {
var listInfo = '';
var listEnumerator = this.listItems.getEnumerator();
listInfo += "<table
border='1'><tr><td>ID</td><td>City</td><td>Month</td><td>Temperature</td></tr>";
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += '<tr><td>' +
oList.get_item('ID') + "</td><td>" + oList.get_item('City') + "</td><td>" + oList.get_item('Month') + "</td><td>" + oList.get_item('Temperature') + '</td></tr>';
arrayCity.push(oList.get_item('City'));
arrarMonth.push(oList.get_item('Month'));
arrayTemperatureListItems.push([oList.get_item('City'), oList.get_item('Month'), oList.get_item('Temperature')]);
}
listInfo += "</tr></table>";
document.getElementById("div1").innerHTML
= 'List Items found:<br/>' + listInfo;
arrayCity = jQuery.unique(arrayCity);
arrayCity.reverse();
arrarMonth = jQuery.unique(arrarMonth);
arrarMonth.reverse();
for (var i = 0; i <arrayCity.length; i++) {
for (var j = 0; j < arrarMonth.length; j++) {
for (var k = 0; k < arrayTemperatureListItems.length; k++) {
if (arrayCity[i] ==
arrayTemperatureListItems[k][0] && arrarMonth[j] ==
arrayTemperatureListItems[k][1]) {
temCity = arrayCity[i];
tempArray.push(arrayTemperatureListItems[k][2]);
}
}
}
seriesData.push({ name: temCity,
data: tempArray });
temCity = "";
tempArray = [];
}
showChart();
}
function errorHandler(sender, args) {
document.getElementById("div1").innerText
= "Could not complete cross-domain
call: " + args.get_message();
}
}
function getQueryStringParameter(param) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == param) {
return singleParam[1];
}
}
}
function showChart() {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: Temperature List',
x: -20
},
xAxis: {
categories: arrarMonth
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: seriesData
});
}
--------------------------------------------------------------------------------------------------------
Below Code using REST
--------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------
Go to SharePointApp6 -> AppManifest.xml -> Permission Tab and give "Full Control" for "Web" Scope as shown below.Below Code using REST
--------------------------------------------------------------------------------------------------------
var web;
var hostweburl;
var appweburl;
var arrayTemperatureListItems = [];
var arrayCity = [];
var arrarMonth = [];
var seriesData = [];
var tempArray = [];
var temCity;
$(document).ready(function () {
hostweburl =
decodeURIComponent(getQueryStringParameter("SPHostUrl"));
appweburl =
decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
var scriptbase = hostweburl + '/_layouts/15/';
$.getScript(scriptbase + 'SP.RequestExecutor.js', execCrossDomainRequest);
});
function execCrossDomainRequest() {
var executor;
executor = new SP.RequestExecutor(appweburl);
executor.executeAsync(
{
url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Temperature')/Items?$select=ID,Month,Temperature,City&@target='" + hostweburl + "/" + "'",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: successHandler,
error: errorHandler
}
);
}
function successHandler(data) {
var jsonObject = JSON.parse(data.body);
var listInfo = '';
listInfo += "<table
border='1'><tr><td>ID</td><td>City</td><td>Month</td><td>Temperature</td></tr>";
for (var i = 0; i < jsonObject.d.results.length; i++) {
listInfo += '<tr><td>' +
jsonObject.d.results[i]['ID'] + "</td><td>" + jsonObject.d.results[i]['City'] + "</td><td>" + jsonObject.d.results[i]['Month'] + "</td><td>" + jsonObject.d.results[i]['Temperature'] + '</td></tr>';
arrayCity.push(jsonObject.d.results[i]['City']);
arrarMonth.push(jsonObject.d.results[i]['Month']);
arrayTemperatureListItems.push([jsonObject.d.results[i]['City'],
jsonObject.d.results[i]['Month'], jsonObject.d.results[i]['Temperature']]);
}
listInfo += "</tr></table>";
document.getElementById("div1").innerHTML
= 'List Items found:<br/>' + listInfo;
arrayCity = jQuery.unique(arrayCity);
arrayCity.reverse();
arrarMonth = jQuery.unique(arrarMonth);
arrarMonth.reverse();
for (var i = 0; i < arrayCity.length; i++) {
for (var j = 0; j < arrarMonth.length; j++) {
for (var k = 0; k < arrayTemperatureListItems.length; k++) {
if (arrayCity[i] == arrayTemperatureListItems[k][0]
&& arrarMonth[j] == arrayTemperatureListItems[k][1]) {
temCity = arrayCity[i];
tempArray.push(arrayTemperatureListItems[k][2]);
}
}
}
seriesData.push({ name: temCity, data:
tempArray });
temCity = "";
tempArray = [];
}
showChart();
}
function errorHandler(data, errorCode, errorMessage) {
var oli = document.createElement("li");
oli.innerText = "Could not complete cross-domain call: " + errorMessage;
document.getElementById("WebTitles").appendChild(oli);
}
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
function showChart() {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: Temperature List',
x: -20
},
xAxis: {
categories: arrarMonth
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: seriesData
});
}
For deploy Click "F5" and Click on "Trust it" to proceed.
Thank You.