samadhan_kshirsagar - Professional Profile

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 = "WSSEndUser";
</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"!!!!!!!

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

...

Make Sense !!!

Thanks,

Samadhan Kshirsagar.

Leave a comment

[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Website' type='url'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]

Learn how you can create a simple and basic list workflow in SharePoint Designer 2013 that updates a field in a SharePoint list item with the current date.

One of the most simple and basic workflows you could create in SharePoint Designer 2013 is a List Workflow.

Here, you will use SharePoint Designer 2013 to create a simple list workflow that is bound to a SharePoint list to which the current date and time is written in a specific field once the workflow has run on an item in the list.

To create a simple list workflow in SharePoint Designer 2013:

In SharePoint 2013, create a new custom list named TodaysDate that has a Date and Time (Date Only) column named CurrentDate.
In SharePoint Designer 2013, open the site on which the TodaysDate SharePoint list is located.
Click Site > New > List Workflow and select TodaysDate from the drop-down menu that appears.
On the Create List Workflow dialog box, type SetTodayWF in the Name text box, select SharePoint 2013 Workflow from the Platform Type drop-down list box, and click OK.
Follow steps 5 through 7 of Use SharePoint Designer 2013 workflow variables to get day of week.
Follow steps 9 through 13 of Use SharePoint Designer 2013 workflow variables to get day of week.
Place the cursor below the first action, type set, press Enter, and then select Set Field in Current Item from the drop-down menu that appears.
Click field in the sentence for the workflow action, and then select CurrentDate from the drop-down list box that appears.
Click value in the sentence for the workflow action, and then click the formula button (second button) behind the text box.
On the Lookup for Date and Time dialog box, select Workflow Variables and Parameters from the Data source drop-down list box, select Variable: CurrentDate from the Field from source drop-down list box, and click OK.
Place the cursor in the Transition to stage section of Stage 1, and click Workflow > Insert > Action > Go to a stage.
Click a stage in the sentence for the workflow action, and then select End of Workflow from the drop-down list box that appears.
Click Workflow > Manage > Workflow Settings.
On the Workflow Settings page under Start Options, select the Start workflow automatically when an item is created check box.
Click Workflow Settings > Save > Publish to publish the workflow.

You should now be able to add a new item to the TodaysDate SharePoint list, and once the workflow has run and completed, you should see the current date appear in the CurrentDate field.

Make Sense!!!

Thanks,