Data Visualization in Facebook Applications Using Infragistics jQuery Chart

[Infragistics] Mihail Mateev / Wednesday, December 14, 2011

The development of Facebook applications is almost always associated the attractive visualization of data.

In this article you will learn how to create attractive charts based on data from social network with NetAdvantage for jQuery Vol.2 2011 and in particular with jQuery Chart (CTP for 11.2 Release). Infragistics jQuery components could be used in different Web applications as jQuery widgets or via .NET helpers in ASP.Net Web Forms and MVC applications.

An interesting case is the development of Facebook applications with ASP.Net MVC3 and Razor. If you are not familiar with ASP.Net MVC3 and/or Facebook C# SDK you could learn how to start from the blog Creating Facebook applications with NetAdvantage for jQuery, ASP.Net MVC3 and Facebook C # SDK – using jQuery Grid (Part 1) .

This article will demonstrate a simple prototype that shows in Infragistics jQuery Grid number of photo albums for each of the friends of current user.

Before you start:

To begin development, you must satisfy the following requirements

Steps of implementation:

Create Facebook application and set application properties
Create ASP.Net MVC3 Razor application
Add references to NetAdvantage for jQuery and Facebook C# SDK
Create required controllers and views and implement code to maintain user friends info

Sample application

Sample application is based on the sample from article Creating Facebook applications with NetAdvantage for jQuery, ASP.Net MVC3 and Facebook C # SDK – using jQuery Grid (Part 1) . You could download this sample here.

Facebook application settings.

Demo application is designed to run within an iframe on a Facebook Canvas page. You could create a canvas application in http://developers.facebook.com/. In the current sample Facebook application is named jQueryGridDemo

Update references to NetAdvantage for jQuery and Facebook C# SDK

You should update references to NetAdvantage for jQuery. To be possible to use jQuery Chart you need to add style for chart:

and jQuery Chart JavaScript code:

in default view (Shared/_Layout.cshtml in this case).

All references are shown below:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

  

 <link href="@Url.Content("~/Content/IGStyles/ig/jquery.ui.custom.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/ig/ig.ui.min.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.grid.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.shared.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.editors.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.chart.css")" rel="stylesheet" type="text/css" />

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

  

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>  

 @*<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>*@

 <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

 <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

 <script src="@Url.Content("~/Scripts/IG/ig.ui.min.js")" type="text/javascript"></script>

 <script src="@Url.Content("~/Scripts/IG/ig.ui.chart.js")" type="text/javascript"></script>

You need also to update the Infragistics.Web.Mvc assembly reference from NetAdvantage for jQuery 2011 Vol.2.

Controllers:

In the sample is used the FacebookController class from the origin article.

To be possible to get information about friend photos you need to add a “friends_photo”s permission.

private const string ExtendedPermissions = 

"user_about_me,publish_stream,friends_location,user_location,friends_online_presence,read_friendlists,friends_photos";

You need to modify the action “OnlineIndex” used to return view with online users. To improve the performance of the applications you could use multi-query with Facebook Query Language (FQL).

var fb = new FacebookWebClient();

dynamic me = fb.Get("me");

  

string query0 =

    "SELECT uid, name, pic_square, ***, locale, online_presence, current_location FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND online_presence IN ('active', 'idle')";

  

string query1 = "SELECT aid,owner,name FROM album WHERE owner IN (SELECT uid FROM #query0)";

  

dynamic selectedFriends = fb.Query(query0, query1);

  

ViewBag.OnlineFriends = selectedFriends;

Here you could see the FacebookController code

using System.Collections.Generic;

using System.Dynamic;

using System.Linq;

using System.Web.Mvc;

using Facebook.Web;

using Facebook.Web.Mvc;

  

  

namespace CS_Canvas_AspNetMvc3_WithoutJsSdk.Controllers

{

    public class FacebookController : Controller

    {

        private const string SimpleExtendedPermissions = "user_about_me,publish_stream";

 

        private const string ExtendedPermissions = "user_about_me,publish_stream,friends_location,user_location,friends_online_presence,read_friendlists,friends_photos";

  

        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

        [CanvasAuthorize(Permissions = SimpleExtendedPermissions)]

        public ActionResult Index()

        {

            var fb = new FacebookWebClient();

            dynamic me = fb.Get("me");

  

            dynamic friendsData = fb.Get("/me/friends");

  

  

            ViewBag.FriendsData = friendsData;

  

  

            ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

            ViewBag.Name = me.name;           

            ViewBag.FirstName = me.first_name;

            ViewBag.LastName = me.last_name;

  

  

            ViewBag.MessagePostSuccess = Request.QueryString.AllKeys.Contains("success") &&

                                         Request.QueryString["success"] == "True";

  

            return View();

  

            

        }

  

        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

        [CanvasAuthorize(Permissions = ExtendedPermissions)]

        public ActionResult OnlineIndex()

        {

            var fb = new FacebookWebClient();

            dynamic me = fb.Get("me");

  

            string query0 =

                "SELECT uid, name, pic_square, ***, locale, online_presence, current_location FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND online_presence IN ('active', 'idle')";

  

            string query1 = "SELECT aid,owner,name FROM album WHERE owner IN (SELECT uid FROM #query0)";

  

            dynamic selectedFriends = fb.Query(query0, query1);

  

            ViewBag.OnlineFriends = selectedFriends;

  

  

            ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

            ViewBag.Name = me.name;

            ViewBag.FirstName = me.first_name;

            ViewBag.LastName = me.last_name;

  

            return View();

  

  

        }

  

    }

}

View Models

In the sample application is added a view model for photo album (AlbumInfo).

public class AlbumInfo

{

    public string Aid { get; set; }

    public long Owner { get; set; }

    public string Name { get; set; }

}

FacebookFriendInfo class is also modified to have a property AlbumsCount

public class FacebookFriendInfo

{

    public long Id { get; set; }

    public string Name { get; set; }

    public string Gender { get; set; }

    public string PictureUrl { get; set; }

    public string CurrentLocation { get; set; }

    public string OnlinePresence { get; set; }

    public int AlbumsCount { get; set; }

}

OnlineIndex View

You will have two collections with friends and friend albums

dynamic friendsData =     ViewBag.OnlineFriends;

  

var result0 = friendsData[0].fql_result_set;

  

var result1 = friendsData[1].fql_result_set;

To be possible to use data in Infragistics jQuery Grid and jQuery Chart you a collection, that implements IQueryable.

List<FacebookFriendInfo> myFriends = new List<FacebookFriendInfo>();

  

List<AlbumInfo> albums = new List<AlbumInfo>();

  

  

foreach (dynamic friend in result0)

{

    FacebookFriendInfo rowList = new FacebookFriendInfo();

  

    rowList.Id = friend.uid;

    rowList.Name = friend.name;

    rowList.Gender = friend.***;

    if (friend.current_location != null)

    {

        rowList.CurrentLocation = friend.current_location.name;

    }        

    rowList.OnlinePresence = friend.online_presence;

    rowList.PictureUrl = friend.pic_square;

  

    myFriends.Add(rowList);

  

  

}

  

foreach (dynamic album in result1)

{

    AlbumInfo rowList = new AlbumInfo();

    rowList.Aid = album.aid;

    rowList.Name = album.name;

    rowList.Owner = album.owner;

    albums.Add(rowList);

  

}

  

foreach (FacebookFriendInfo friendInfo in myFriends)

{

    friendInfo.AlbumsCount = albums.Where(a => a.Owner == friendInfo.Id).Count();     

}

  

  

var queryable = myFriends.AsQueryable();

Infragistics jQuery Chart

Chart uses the collection “queryable”. For X-axis is used the Facebook friend name. For Y-axis is used the number of photo albums.

@(Html.Infragistics().DataChart(queryable)

   .ID("chart1")

   .Width("500px")

   .Height("500px")

   .VerticalZoomable(true)

   .HorizontalZoomable(true)

   .Legend(legend => legend.ID("legend1"))

   .Axes((axes) =>

       {

           axes.CategoryX("xAxis").Label((d) => d.Name);

           axes.NumericY("yAxis");

       })

   .Series((series) =>

       {

           series

           .Column("series1")

           .Title("Friend Albums")

           .XAxis("xAxis").YAxis("yAxis")

           .ValueMemberPath((item) => item.AlbumsCount)

           .ShowTooltip(true)

           .TooltipTemplate("tooltipTemplate");

       }).DataBind().Render()

      )

Tooltip templates

To display friendly data in the tooltips you could use tooltip templates.

<script type="text/javascript">

  

    $(document).ready(function () {

        $("#tooltipTemplate").template("tooltipTemplate");

        $('#homeButton').click(function () {

            location.href = '/Home/Index';

        });

        $('#friendsButton').click(function () {

            location.href = '/Facebook/Index';

        });

    });

  

</script>

Run the application

Enjoy! You have a nice Facebook ASP.Net MVC3 application with Infragistics jQuery Chart inside it.

Source code you could download :