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=,Culture=neutral,PublicKeyToken=71e9bce111e9429c” meta:progid=”SharePoint.WebPartPage.Document” meta:webpartpageexpansion=”full” %>
<%@ Register Tagprefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> <%@ Register Tagprefix=”Utilities” Namespace=”Microsoft.SharePoint.Utilities” Assembly=”Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> <%@ Import Namespace=”Microsoft.SharePoint” %> <%@ Assembly Name=”Microsoft.Web.CommandUI, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> <%@ Register Tagprefix=”WebPartPages” Namespace=”Microsoft.SharePoint.WebPartPages” Assembly=”Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<asp:Content ContentPlaceHolderId=”PlaceHolderPageTitle” runat=”server”>
<SharePoint:ListItemProperty Property=”BaseName” maxlength=”40″ runat=”server”/>
<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:StyleBlock runat=”server”>
body #s4-leftpanel {
.s4-ca {
<asp:Content ContentPlaceHolderId=”PlaceHolderSearchArea” runat=”server”>
<SharePoint:DelegateControl runat=”server”
<asp:Content ContentPlaceHolderId=”PlaceHolderPageDescription” runat=”server”>
<SharePoint:ProjectProperty Property=”Description” runat=”server”/>
<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>


<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() {


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’ />” +


var query = “<Query>” +
“<Where>” +
“<Neq>” +
“<FieldRef Name=’ID’/><Value Type=’Number’>0</Value>” +
“</Neq>” +
“</Where>” +
“<OrderBy>” +
“<FieldRef Name=’Title’/>” +
“</OrderBy>” +
//Here is our SPServices Call where we pass in the variables that we set above
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
a rr2.push(Country);





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


function AddRowToTable(User,Country)
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+ “]”)




<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>


<table border=”1″>

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




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

Dynamic Report

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

Make Sense !!!


Samadhan Kshirsagar.


Leave a comment


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s