Thursday, April 15, 2010

Intractive SharePoint Charts with No Code

Recently I came across this amazing article of Claudio ( about displaying the graphs from a SharePoint list data without writing any code (of course JavaScript is code but we are referring to C# here ;o)). It shows how you can display pie-chart (Google Charts) with a small JavaScript code added to CEWP which works on your SharePoint Data.

I have extended the same technique (JavaScript) to display the Interactive Google Charts based on the SharePoint Data without writing any code :o). The javascript code uses JQuery and Google Interactive Charts (aka Visualization API).

You need to perform following steps:
1. Create a new SharePoint List View.
2. Group the data by a Column e.g. Title.

3. Add Content Editor WebPart

4. Select Edit-> Modify Shared WebPart -> Source Editor and paste the following JavaScript:

Author: Tahir Naveed
Date: 2010-04-15
Article URL:
Blog URL:
Original Code:
<SCRIPT type=text/javascript>
if(typeof jQuery=="undefined")
    var jQPath="";
    document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");

<script type="text/javascript" src="">

<SCRIPT type=text/javascript>
var ColValue = new Array();
var ColName = new Array();

// Getting the Data
 var arrayList=$("':')");
 var coord= new Array();
 var labels= new Array();
 $.each(arrayList, function(i,e)
  var MyIf= $(e).text();
  var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); 
  // Extract the 'Y' coordinates
  var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); 
  // Extract the labels
  //add also coordinates for better read
 ColValue = coord;
 ColName = labels;

//Graph Rendering
google.load("visualization", "1", {packages:["columnchart"]}); 
function drawChart() 
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Department'); 
  data.addColumn('number', 'Department'); 
  for (i=0; i<ColValue.length; i++)
   data.setValue(i, 0, ColName[i]);
   data.setValue(i, 1, parseInt(ColValue[i]));
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
  chart.draw(data, {width: 600, height: 240, is3D: true, title: 'Graph Title'}); 

<div id="chart_div" align="center"></div>

5. You will see the error message: Internet Explorer cannot display the WebPage. Ignore the message and remove the ?PageView=Shared from URL and refresh the page. You should be able to see the chart as follows:

Official SharePoint Documentation

I have recently contributed to the official SharePoint documentation for developement. Check it out here: