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.