ChartJS in SharePoint 2010

Hi Friends today i am going to show you how can we add chart on SharePoint 2010 page.
As we know SharePoint 2010 by-default render all pages in IE8. And this IE8 does not support HTML5.
So in this case we have to use older version of ChartJS plugin (1.0.1) with "excanvas.js".

So here is some trick that we need to follow to implement our Chart in SharePoint 2010.

<div id = "dvCanvas"  >

</div>

<script type="text/javascript">

//This is the IIFE and we are using this because IE8 does not support "forEach" so i am adding into the prototype .

  (function(){

     if (typeof Array.prototype.forEach != 'function') {

                Array.prototype.forEach = function(callback){

                                  for (var i = 0; i < this.length; i++){

                                                     callback.apply(this, [this[i], i, this]);

                                                                  }

                };

                                }

     }());

    window.onload = function () {

        //Fix for IE 7 and 8

        var data = {

                                                labels : ["January","February","March","April","May","June","July"],

                                                datasets : [{

                                                                                data : [28,48,40,19,96,27,95]

                                                                }]

                                }

                               

        var canvas = document.createElement('canvas');    

        canvas.width=500;

        canvas.height=300;

        document.getElementById("dvCanvas").appendChild(canvas);

//This is the function that is being used in ecanvase file. This method is only and only used in IE8. If you want to implement this on later version or Chrome please delete the below line.

       G_vmlCanvasManager.initElement(canvas);

       var context = canvas.getContext('2d');

       var chartdemo=new Chart(context).Bar(data,{

         hover:{

                     animationDuration:0

                    },

         showTooltips : false,

         showInlineValues : true,

         centeredInllineValues : true,

         tooltipCaretSize : 2,

         animation : false,

         scaleLabel: function (valuePayload)

//This function will return the text on scale that comes left side of the Graph. You can append anythings just like i have added "$".

                                      return Number(valuePayload.value) + '$';

                              },

          onAnimationComplete: function(){

   // This section is being used to show the value on the top of the baar        

               if (this.options.showInlineValues) {

                                if (this.name == "Bar") {

                                    this.eachBars(function(bar){

                                        var tooltipPosition = bar.tooltipPosition();

                                        new Chart.Tooltip({

                                            x: Math.round(tooltipPosition.x),

                                            y: Math.round(tooltipPosition.y),

                                            xPadding: 1,

                                            yPadding:1,

                                            fillColor: "rgba(255,255,255,1)", //fill bg the color with white

                                            textColor: "rgba(0,0,0,1)", //set text color to black

                                            fontFamily: this.options.tooltipFontFamily,

                                            fontStyle: this.options.tooltipFontStyle,

                                            fontSize: 9, //set font size

                                            caretHeight: this.options.tooltipCaretSize,

                                            cornerRadius: this.options.tooltipCornerRadius,

                                            text: bar.value +"$ ",

                                            chart: this.chart

                                        }).draw();

                                    });

                                }

                            }

            }       

    });

About SharePoint Online and SharePoint On-Premises

Office 365 is the cloud service, provided from Microsoft which has lots of feature. Microsoft provides SharePoint as a part of the services. This is known as SharePoint Online. Microsoft does not allows server side code in Office 365 SharePoint.

In SharePoint On-Premises, the server will be maintained by your organization, but in case of SharePoint Online, everything will be maintained by Microsoft, you just need to use.

In SharePoint online Microsoft does not allows you to deploy any server side code but we can develop and deploy solution using server object model in On-Premises environment. Microsoft has improved client side object model and we can develop and deploy SharePoint Add-ins using client object model.

SharePoint Add-Ins:- There are nothing but the APP which has been introduced in SharePoint Online and SharePoint 2013 version. Microsoft later renamed APPs to Add-In.

How to get SharePoint List items using JavaScript/Sp.js

Hi Friends,

Today i am going to explain how we can fetch SharePoint List Items. You may have seen many solution but this one is little bit different than others.
I am using IIFE with mapping object, sounds little bit different but this solution is going to help you lots in writing your solution.


(function($){
 var clientContext = null;
 var oSite,oWebsite,collListItem;
 $( document ).ready(function() {
 ExecuteOrDelayUntilScriptLoaded(retrieveMonthly, "sp.js");
 });
 var homePageLinksItems;
 function getHomePageLinks(){
  var context = SP.ClientContext.get_current();
 var oweb = context.get_web();
 var homePageLinks = oweb.get_lists().getByTitle("Title of your list");
 _containerOfListItem = _listReference.getItems(_itemsQuery());
 context.load(_listReference);
 context.load(_containerOfListItem,'Include(FieldValuesAsText,URL,Heading)');
 context.executeQueryAsync(Function.createDelegate(this,onSucess),Function.createDelegate(this,onFailureLinksLoad));
 }
 var linkData;
function onSucess(sender,args){
  var linksenum = _containerOfListItem.getEnumerator();
  linkData=getMappedDataLink(_containerOfListItem.get_data());
  loadDataLink(linkData,"#linksDiv1",4,2);
  var innerHtml="<ul>";
  var linkArrow="<div style='width:400px'>";
  var i=0;
  while(linksenum.moveNext()){
  var currentItem = linksenum.get_current();
  var linkValue = linksenum.get_current().get_item("URL").get_url();
  var headingValue = linksenum.get_current().get_item("Heading");  
  innerHtml = innerHtml+"<li><h3><a class='nonWhite' href='"+linkValue+"'>"+headingValue+"</a></h3></li>";
  }
  linkArrow+="</div>";
innerHtml=innerHtml+"</ul>";
$("#linksDiv").append(innerHtml);
//
}
function _itemsQuery(){
var query = new SP.CamlQuery();
var queryXML = "<Query>" +
                "<OrderBy><FieldRef Name='ID' Ascending='True'></FieldRef></OrderBy>" +                              
                "</Query>";
query.set_viewXml('<View>' + queryXML + '</View>');
return query;
}
 function loadDataLink(Data,tableID,jVal,kVal){
                var htmlData="";var d=0;
                for(var j=0;j<jVal;j++){
                    htmlData= htmlData+ '<tr>';
                    for(var k=0;k<kVal;k++){
                        var imageString="";
                        if(Data[d]==undefined){
                            Data[d]= {"ItemLoc":d,"URL":"","Heading":""}
                           
                            imageString = "<td><div><a class='nonWhite' href='"+ Data[d].URL+"'>"+Data[d].Heading+"</a></div></td>";
                        }
                        else
                        {
                        if(k==0)
                        {
                        imageString ="<td style='padding-right:10px'  class='arrowLink' ><div><a class='nonWhite' href='"+ Data[d].URL+"'>"+Data[d].Heading+"</a></div></td>";
                        }else{
                            imageString ="<td  class='arrowLink' ><div><a class='nonWhite' href='"+ Data[d].URL+"'>"+Data[d].Heading+"</a></div></td>";
                            }
                        }
                        htmlData = htmlData+imageString; 
                        d=d+1;
                    }
                    var htmlData = htmlData+"</tr>";
                }
                $(tableID).append(htmlData);
            }

function getMappedDataLink(itemCollection){
            var dataToReturn=$(itemCollection).map(function(i,d){
                var e=d.get_fieldValuesAsText();
                var returnData = {};
                returnData = {
                    "ItemLoc":i,
                    "URL":d.get_item("URL")==null?"":d.get_item("URL").get_url(),
                    "Heading":e.get_item("Heading")==null?"":e.get_item("Heading").toString()
                };
                return returnData;
            });
return dataToReturn;
}


function onFailureLinksLoad(sender,args){
}
})(jQuery);