Hi,
We had a requirement of displaying custom list field values in
the form of charts.
Along with this, it is expected to select max, min, sum, average
by the user from dropdown.
Once he selects any of the above, the respective value needs to
be displayed.
We have developed this through SharePoint hosted app as below
<%-- The following 4 lines are ASP.NET directives
needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" language="C#" %>
<%@ Register Tagprefix="SharePoint"
Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ 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" %>
<!-- The following tells SharePoint to allow this page to be
hosted in an IFrame -->
<WebPartPages:AllowFraming runat="server" />
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=9"></meta>
<!-- The following scripts are needed when using the
SharePoint object model -->
<script type="text/javascript"
src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript"
src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript"
src="/_layouts/15/sp.js"></script>
<style>
html {overflow-y: scroll;}
</style>
<br></br>
<br></br>
<h1
style="font-family:arial;color:red;text-align:center;">Charts</h1>
<br></br>
<br></br>
<div>
<div style="width:50%; float:left">
<div style="position:relative;left:20px;">
Select List: <select id="selectList"
onchange="retrieveList()"></select>
<br></br>
<label id="xAxisLabel" style="visibility:hidden">X
Axis</label>
<select id="XAxis"
style="visibility:hidden;"></select>
<br></br>
<label id="yAxisLabel" style="visibility:hidden">Y
Axis</label>
<select id="YAxis"
style="visibility:hidden;"></select>
<br></br>
<label id="aggregationLabel" style="visibility:hidden">Aggregation</label>
<select id="aggregationList"
onchange="getAggregatedValues()"
style="visibility:hidden;">
<option> </option>
<option>Sum</option>
<option>Average</option>
<option>Max</option>
<option>Min</option>
</select>
<br></br>
<label id="chartTypeLabel" style="visibility:hidden">Chart
Type</label>
<select id="myList" onchange="createChart()"
style="visibility:hidden;">
<option> </option>
<option>Pie Chart</option>
<option>Column Chart</option>
<option>Bar Chart</option>
<option>Line Chart</option>
<option>Area Chart</option>
</select>
<br></br>
</div>
</div>
<div style="width:50%; float:left">
<svg width="600" height="600" id="s"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet">
<text x="0" y="0" fill="black"
font-size="20" visibility="hidden"
id="toolTipElement"></text>
<style type="text/css">
path:hover {
opacity: 0.5;
}
</style>
</svg>
</div>
</div>
<img src="../Images/Footer.png" alt="Image Description"
/>
<script type="text/javascript">
'use strict';
// Set the style of the client web part page to be
consistent with the host web
(function () {
var hostUrl = '';
if (document.URL.indexOf('?') != -1)
{
var params =
document.URL.split('?')[1].split('&');
for (var i =
0; i < params.length; i++) {
var p = decodeURIComponent(params[i]);
if (/^SPHostUrl=/i.test(p)) {
hostUrl = p.split('=')[1];
document.write('<link rel="stylesheet" href="' + hostUrl +
'/_layouts/15/defaultcss.ashx" />');
break;
}
}
}
if (hostUrl == '') {
document.write('<link
rel="stylesheet"
href="/_layouts/15/1033/styles/themable/corev15.css" />');
}
})();
</script>
</head>
<body class="clientwebpart-body"
onload="getAllLists()">
<div class="clientwebpart-div">
<span>
<script type="text/javascript">
// Variable Declaration
var minVal, maxVal,xScalar,y,
yScalar,centerX,centerY,radius,totalData,oldStartingAngle,svgWidth,svgHeight;
var clientContext = SP.ClientContext.get_current();
var spListObj=null;
var camlQuery=null;
var spListObjItem=null;
var ListColl = '';
var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var hostcontext = new
SP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var fieldColl;
var lineChartX=new Array();
var lineChartY=new Array();
var dataName = new Array();
var dataValue = new Array();
var duplicateVal=new Array();
var tempDataName=new Array();
var tempDataVal=new Array();
var svgdoc = document.getElementById("s");
function resetDropDownList(selectedList)
{
if (selectedList.hasChildNodes()) {
while (selectedList.childNodes.length >= 1) {
selectedList.removeChild(selectedList.firstChild);
}
}
}
function
getAllLists()
{ try {
ListColl = web.get_lists();
clientContext.load(ListColl);
clientContext.executeQueryAsync(onGetAllListSuccess,onGetAllListFailed);
}
catch(e)
{
alert('An
error has occured during fetching data');
}
}
function onGetAllListFailed(sender, args)
{
alert('Request
failed. ' + args.get_message() + '\n' + args.get_stackTrace());
} function
onGetAllListSuccess(sender, args)
{
var listEnumerator = ListColl.getEnumerator();
var x = document.getElementById("selectList");
var option,oList;
var i=0;
resetDropDownList(x);
option = document.createElement("option");
option.text="--Select--";
x.add(option);
while (listEnumerator.moveNext())
{
oList = listEnumerator.get_current();
if(oList.get_baseTemplate()=="100")
{
option = document.createElement("option");
option.text=
oList.get_title();
x.add(option);
}
}
