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:


  1. Looks really good, Tahir. Could you give us more information on what you grouped on and what is being displayed? Also, your labels are laid out very nicely on the x and y axis. How did you do that?


  2. Also, the scale on Y-axis comes automatically, you just have to provide the values of the vertical bars.

  3. HOW DO YOU GET IT TO SHOW MULTIPLE DEPARTEMENTS? for example if i have two departments on with 3 and one with 4, it would show them stacked with the appropriate amount and different colors?

  4. Can I display multiple charts? if I have two list can i get two different charts by specifying which list to use?

    Also I tried your example, I have two list on my home page and when I drop your code it combines the data ffrom both list and display in one chart.

  5. Answer 1: You have to group the list by column "Department". Javascript will get the value of the grouped column from the View. And the count of that department will be displayed as a bar. Thats how Google Chart API works (provide a title and a value and it will return the Image).

    For colors you also need to check the google chart API.

  6. Answer 2:

    No, this code works only if there is one grouped view available. However here is a workaround:

    1. Create Page1.aspx for list1, group it and display first chart.
    2. Craete Page2.aspx for list2, group it and display second chart.
    3. Add two Page Viewer Webparts on your home page and display Page1 and Page 2 in it.

    I am sure this will work.

  7. Another code:

  8. Excellent Work,Great article.It works for SharePoint 2010

  9. Thank you Akalanka!
    I actually havent tried it on SharePoint 2010. Let me try it and will update you here.

  10. Excellent work Tahir! Just tired for the first time after one week of experience with sharepoint & it worked-:) How would i change this code to display PIE chart and have visualation effect on mouse focus per sample on the google page below?

  11. Thanks Shahzad!

    Give me your email and I can forward you a sample code.

  12. Tahir,

    Great work ! I tried many others but this has been the simplest. Could you please provide code for mouse focus as above. Email id: [email protected]

    Thanks and nice work again

  13. Hi Chris,

    Mouse Focus functionality is the part of Google Visualization API. Please refer to Google Visualization API at the following location:



  14. Great work mate. Keep the good work up.

    Happy Coding.


  15. Do you know how to display multiple pie charts in SharePoint 2010? For MOSS 2007,I had tried the code given at and it worked fine but in SharePoint 2010 it doesnt work. Can you mail it to [email protected]? Thanks in advance.

  16. @Raunak: I actually never tried this in SP 2010. I will post something when I get a chance to do the experiment.

  17. I can't get this to work. Help please


  18. hey tahir,

    I am trying to use this code on a sharepoint version(I think 2003) inside a company intranet. I dont know why I am not able to see the graph. I did exactly what you instructed.

    can you suggest some troubleshooting steps please?

  19. Hey Anonymous!

    The CSS of SharePoint 2003 is different than MOSS 2007 so the code above is not gona work for SharePoint 2003. You might have to tweek a bit.


  20. Great work Tahir, I just did copy/paste of your code and it worked.

    I tried to display multiple graphs in single page and was able to do by tweaking your script and also working on ID's of webparts which are placed on the page.
    Instead of below line:
    var arrayList=$("':')");
    I used
    var arrayList=$("#WebPartWPQ5").find("':')");
    Where WebPartWPQ5 is ID of the webpart.

    similarly i had placed another webpart and also used another div tag to display another graph.


    1. Hi Srinath

      would you be kind enough to share the code for this? I have been trying to get it to work for multiple graphs on my page but have been able to do so. Please help!

      You could send the code to my email address [email protected]?

    2. I'd love to see this as well! [email protected]

  21. Srinath,

    Thank you for your feedback :) and for that great tweak.

  22. Hi Tahir

    Where is the Jscript code? I am using SP2007

  23. Sorry, some formatting got messed. Its available now.

  24. Thanks Tahir

    Just so I am I need to modify any part the code before pasting it into the CEWP so that it reads my list?

  25. No change in the code is required. Just copy/paste and it should work fine.

  26. Thanks Tahir!

    It worked perfectly and now I am the star of the office. Manyy thanks again!

  27. Hi Tahir

    How would you modify this code to show multiple charts based on different views from the same list?

  28. @Anonymous: You are welcome.

    @Debbie: Well the exact above code works for one view only. I havent tried it on multple views but here is an idea worth trying. First displa mulitple views on the page and then analyze their generated CSS and update arrayList=$(“‘:’)”); for each view. I hope it helps.

  29. This comment has been removed by the author.

  30. Hi Debbie,

    There is no simple (copy/Paste) solution for that or at least I haven't seen it so far. You have to understand with the rendered CSS on the page and modify the above Javascript code to achieve multiple views functionality.

  31. Very simple to use .. Great work

  32. Best I have seen - Nevron Chart SharePoint - no code too...

  33. Hello! Thanks for adding this -- very helpful! I have a question -- we have really long column titles (ex: "No Description listed/Incorrect Description"). The font is automatically tiny and I can't figure out how to make it bigger. I've tried working with the Google API code to increase the font size on the horizontal axis without a lot of luck. It looks like it's also possible to wrap the text on longer column titles but I can't figure out how to do that either.
    Any ideas?

    1. I am not sure how to achieve this wrapping of long text in columns. You might want to post this question on Google Visualization API Forum:


  34. Excellent work Tahir....
    Thank you so much.
    Keep Posting :)

  35. You are the best man....
    I need same code to make pie chart.
    Pls forward me.

    [email protected]

    1. Thanks Sukhbir! This comment box is not allowing me to post script here. Check your email.

  36. Could you provide script for solution using pie charts, as well as solution for two charts/graphs on one page (from same list with two different groupings)? [email protected].


Official SharePoint Documentation

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