Thursday, November 7, 2013

Render SharePoint list data as a chart in an app in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Render-162892b3
http://msdn.microsoft.com/en-us/library/jj220061.aspx

vs2012 -> file -> new -> project c# -> office/SharePoint -> apps -> apps for SharePoint 2013 -> "SP_SharePointCharting_js"

SP_SharePointCharting_js -> Right Click -> Add -> New Item -> select 'List' Template -> give the list name as "PopulationData" 


SP_SharePointCharting_js -> PopulationData -> Schema.xml
go to 'Column' tab and add below column 
 1. Country (Single Line of Text)(Required)
 2. Population (Number)(Required)

SP_SharePointCharting_js -> PopulationData -> PopulationDataInstance -> Elements.xml
Add the 'PopulationData' list records as follows. 
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <ListInstance Title="PopulationData" OnQuickLaunch="TRUE" TemplateType="10000" Url="Lists/PopulationData" Description="My List Instance">
              <Data>
                     <Rows>
                           <Row>
                                  <Field Name="Country">Brazil</Field>
                                  <Field Name="Population">193946886</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">India</Field>
                                  <Field Name="Population">1210193422</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">Japan</Field>
                                  <Field Name="Population">127530000</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">Indonesia</Field>
                                  <Field Name="Population">237641326</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">China</Field>
                                  <Field Name="Population">1347350000</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">Russia</Field>
                                  <Field Name="Population">143300000</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">Pakistan</Field>
                                  <Field Name="Population">181319000</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">Bangladesh</Field>
                                  <Field Name="Population">152518015</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">Nigeria</Field>
                                  <Field Name="Population">167629000</Field>
                           </Row>
                           <Row>
                                  <Field Name="Country">USA</Field>
                                  <Field Name="Population">314826000</Field>
                           </Row>
                     </Rows>
              </Data>
       </ListInstance>
</Elements>

SP_SharePointCharting_js -> Images -> Right Click -> Add -> Existing Item -> add "ChartAxis.png"

SP_SharePointCharting_js -> Pages -> Default.aspx
Add below custom code to "PlaceHolderMain" place holder
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <p id="message">
            initializing...
        </p>
    </div>
    Top 10 Countries by Population
    <div id="populationChart" style="width: 700px; height: 600px;">
    </div>
</asp:Content>

SP_SharePointCharting_js -> Scripts -> App.js
Add below custom javascript to App.js file
'use strict';
var context;
var list;
var listItems;
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    getUserName();

    list = context.get_web().get_lists().getByTitle('PopulationData');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
    listItems = list.getItems(camlQuery);
    context.load(listItems, 'Include(Country, Population)');
    context.executeQueryAsync(
        function () {
            startChart();
        },
        function (sender, args) {
            var chartArea = document.getElementById("populationChart");
            while (chartArea.hasChildNodes()) {
                chartArea.removeChild(chartArea.lastChild);
            }
            chartArea.appendChild(document.createTextNode("Failed to get population data. Error: "
                + args.get_message()));
        });
});
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}
function startChart() {
    var chartArea = document.getElementById("populationChart");
    while (chartArea.hasChildNodes()) {
        chartArea.removeChild(chartArea.lastChild);
    }
    var yAxis = document.createElement("div");
    yAxis.setAttribute("style", "float:left;height:600px;width:200px;background-color:#FFFFFF");
    var plotArea = document.createElement("div");
    plotArea.setAttribute("style", "float:left;height:600px;width:500px;background-color:#AFAFAF");
    var listItemEnumerator = listItems.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var listItem = listItemEnumerator.get_current();
        var countryName = listItem.get_fieldValues()["Country"];
        var countryPopulation = listItem.get_fieldValues()["Population"];
        var barLabel = document.createElement("div");
        barLabel.setAttribute("style", "float:none;margin:5px;height:50px;width:200px;background-color:#FAFAFA");
        barLabel.appendChild(document.createTextNode(countryName));
        yAxis.appendChild(barLabel);
        var bar = document.createElement("div");
        var barWidth = 500 / (2000000000 / countryPopulation);
        bar.setAttribute("style", "float:none;margin:5px;height:50px;width:" + barWidth + "px;background-color:#FAFAFA");
        bar.setAttribute("title", countryPopulation);
        plotArea.appendChild(bar);
    }
    chartArea.appendChild(yAxis);
    chartArea.appendChild(plotArea);
    var xAxis = document.createElement("img");
    xAxis.setAttribute("src", "../images/ChartAxis.png");
    xAxis.setAttribute("style", "float:right;");
    var labelSpacer = document.createElement("div");
    labelSpacer.setAttribute("style", "float:left;height:50px;width:200px;background-color:#FFFFFF");
    labelSpacer.appendChild(document.createTextNode("Population:"));
    chartArea.appendChild(labelSpacer);
    chartArea.appendChild(xAxis);
}

SP_SharePointCharting_js -> Right Click -> Deploy
Thank You.

2 comments:

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts