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.

No comments:

Post a Comment