Create Dynamic Bar Chart Report in SharePoint 2013

Hello Friends, now it’s time to learn new Dynamic Things 🙂 🙂

 


High-chart Report Integrated with SharePoint 2013.

Here In this blog, I am giving very good technique to you all how to create dynamic bar chart reports in SharePoint 2013.

In which I have bind this report with SharePoint Custom List and created “Dynamic Report.”..


Following are the Steps to Creating Dynamic Report .

Step 1] Create a custom list in SharePoint name as a Company Review,with Name ,Users, Country Columns etc.

Step 2] Open SharePoint Site in SharePoint Designer.

step 3] Add Site Page Name as a Company Report.aspx

step 4] Then add following code in the Company Report.aspx [Replace the overall  page code]

 


 

<%– _lcid=”1033″ _version=”16.0.2524″ _dal=”1″ –%>
<%– _LocalBinding –%>
<%@ Page language=”C#” MasterPageFile=”~masterurl/default.master” Inherits=”Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c” meta:progid=”SharePoint.WebPartPage.Document” meta:webpartpageexpansion=”full” %>
<%@ Register Tagprefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> <%@ Register Tagprefix=”Utilities” Namespace=”Microsoft.SharePoint.Utilities” Assembly=”Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> <%@ Import Namespace=”Microsoft.SharePoint” %> <%@ Assembly Name=”Microsoft.Web.CommandUI, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> <%@ Register Tagprefix=”WebPartPages” Namespace=”Microsoft.SharePoint.WebPartPages” Assembly=”Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<asp:Content ContentPlaceHolderId=”PlaceHolderPageTitle” runat=”server”>
<SharePoint:ListItemProperty Property=”BaseName” maxlength=”40″ runat=”server”/>
</asp:Content>
<asp:Content ContentPlaceHolderId=”PlaceHolderAdditionalPageHead” runat=”server”>
<meta name=”GENERATOR” content=”Microsoft SharePoint” />
<meta name=”ProgId” content=”SharePoint.WebPartPage.Document” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”CollaborationServer” content=”SharePoint Team Web Site” />
<SharePoint:ScriptBlock runat=”server”>
var navBarHelpOverrideKey = &quot;WSSEndUser&quot;;
</SharePoint:ScriptBlock>
<SharePoint:StyleBlock runat=”server”>
body #s4-leftpanel {
display:none;
}
.s4-ca {
margin-left:0px;
}
</SharePoint:StyleBlock>
</asp:Content>
<asp:Content ContentPlaceHolderId=”PlaceHolderSearchArea” runat=”server”>
<SharePoint:DelegateControl runat=”server”
ControlId=”SmallSearchInputBox”/>
</asp:Content>
<asp:Content ContentPlaceHolderId=”PlaceHolderPageDescription” runat=”server”>
<SharePoint:ProjectProperty Property=”Description” runat=”server”/>
</asp:Content>
<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

// GIVE  SPECIFIC PATH OF JQUERY FILES

<script type=”text/javascript” src=”https://../../Asset/jquery.min.js”></script>
<script type=”text/javascript” src=”https://../../Asset/jquery.SPServices.min.js”></script>
<script type=”text/javascript” src=”http://../1.8.2/jquery.min.js”></script>
<script type=”text/javascript” src=”https://../../Asset/highcharts.js”></script>
<script type=”text/javascript” src=”https://../../Asset/exporting.js”></script>
<script type=”text/javascript” src=”https://../../Asset/data.js”></script>
<script type=”text/javascript” src=”https://../../Asset/drilldown.js”></script>
<script type=”text/javascript” src=”https://../../Asset/highcharts-more.js”></script>
<script type=”text/javascript”>
//this is where the script starts after the page is loaded
$(document).ready(function() {

GetCourses();
});

var arr = new Array();
var arr1=new Array();
var arr2=new Array();
var array = new Array();
var array1=new Array();
function GetCourses()
{
//The Web Service method we are calling, to read list items we use ‘GetListItems’
var method = “GetListItems”;

//The display name of the list we are reading data from
var list = “Company Review”;

var fieldsToRead = “<ViewFields>” +
“<FieldRef Name=’Title’ />” +
“<FieldRef Name=’Users’ />” +
“<FieldRef Name=’Country’ />” +

“</ViewFields>”;

var query = “<Query>” +
“<Where>” +
“<Neq>” +
“<FieldRef Name=’ID’/><Value Type=’Number’>0</Value>” +
“</Neq>” +
“</Where>” +
“<OrderBy>” +
“<FieldRef Name=’Title’/>” +
“</OrderBy>” +
“</Query>”;
//Here is our SPServices Call where we pass in the variables that we set above
$().SPServices({
operation: method,
async: false, //if you set this to true, you may get faster performance, but your order may not be accurate.
listName: list,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
//this basically means “do the following code when the call is complete”
completefunc: function (xData, Status) {

 

//this code iterates through every row of data returned from the web service call
$(xData.responseXML).SPFilterNode(“z:row”).each(function() {

var Name = ($(this).attr(“ows_Title”));

var User = ($(this).attr(“ows_Users”));

var Country = ($(this).attr(“ows_Country”));

var iID=$(this).attr(“ows_ID”);
//Here This array for pushing dynamic data from SharePoint list to Array
arr.push(Name);
arr1.push(User);
a rr2.push(Country);

});

}

});

for(i=0;arr.length;i++)
{

//Function Call
addRowToTable.call(arr[i].valueOf(), arr1[i].valueOf());

}

}
function AddRowToTable(User,Country)
{
$(‘#courseTables’).highcharts({
chart: {
type: ‘bar’
},
title: {
text: ‘Telecom Company Report’
},

//Pass Array to X-axis
xAxis: {
categories: arr
},
yAxis: {
min: 0,
title: {
text: ‘Users In million’
}
},
legend: {
backgroundColor: ‘#ffffff’,
reversed: true
},
plotOptions: {
series: {
stacking: ‘medium’
}
},

   //Pass array to Series
series: [{
name: ‘sample’,
data: JSON.parse(“[” + arr1+ “]”)

}]
});

};

</script>

<div class=”ms-hide”>
<WebPartPages:WebPartZone runat=”server” title=”loc:TitleBar” id=”TitleBar” AllowLayoutChange=”false” AllowPersonalization=”false” Style=”display:none;”><ZoneTemplate>
<WebPartPages:TitleBarWebPart runat=”server” HeaderTitle=”Untitled_1″ Title=”Web Part Page Title Bar” FrameType=”None” SuppressWebPartChrome=”False” Description=”” IsIncluded=”True” ZoneID=”TitleBar” PartOrder=”2″ FrameState=”Normal” AllowRemove=”False” AllowZoneChange=”True” AllowMinimize=”False” AllowConnect=”True” AllowEdit=”True” AllowHide=”True” IsVisible=”True” DetailLink=”” HelpLink=”” HelpMode=”Modeless” Dir=”Default” PartImageSmall=”” MissingAssembly=”Cannot import this Web Part.” PartImageLarge=”” IsIncludedFilter=”” ExportControlledProperties=”True” ConnectionID=”00000000-0000-0000-0000-000000000000″ ID=”g_4e584fd2_dd68_421c_ba38_d8f329b78a46″ AllowClose=”False” ChromeType=”None” ExportMode=”All” __MarkupType=”vsattributemarkup” __WebPartId=”{4E584FD2-DD68-421C-BA38-D8F329B78A46}” WebPart=”true” Height=”” Width=””></WebPartPages:TitleBarWebPart>

</ZoneTemplate></WebPartPages:WebPartZone>
</div>

<table border=”1″>
<tr>

<td id=”courseTables” style=”width: 550px; height: 375px; margin: 0 auto”></td>

</tr>
</table>

</asp:Content>


 

And Finally this is the “OUTPUT”!!!!!!!

Dynamic Report

I hope this will be beneficial for all of you In future :)…

Make Sense !!!

Thanks,

Samadhan Kshirsagar.

 

Leave a comment

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s