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();

                                    });

                                }

                            }

            }       

    });