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.
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
SP_SharePointCharting_js -> Scripts -> App.js
Add below custom javascript to App.js file
SP_SharePointCharting_js -> Right Click -> Deploy
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