Virtual Developer Workshop: Containerized Development with Docker

Untitled 2

SharePoint 2007: Integrating the Google Chart API

By Gatika Patel - Kiefer Consulting


When I work with users and business managers, there's one thing they always appreciate:  time-saving features, especially those with graphics. My users love them and yours will too. By viewing current graphic data displays, users can instantly see if things are going well or not without waiting for reports or evaluating and crunching numbers manually. In case you did not know, the Google Chart API lets you dynamically generate charts in SharePoint. That's right-DYNAMICALLY!  It's easy to integrate Google Chart using SharePoint List data. All you need is graph criteria. In this case, I use a Group By view on a list column.

In this article, I'll show you how to use Google Chart API in SharePoint 2007 (MOSS):

1.       Create a Custom List in SharePoint Server 2007

2.       Create a Web Part page (used to display graphical representation of the list data)

3.       Integrate Google Chart API into SharePoint

Create a Custom List in MOSS 2007

Follow the steps below in order to create a new custom list.

1.       Click Site Actions > Create.


2.       Under Custom Lists, select Custom List.


3.       Fill in Name and Description.


For this demonstration, name the list Projects.

4.       Click Create.

The Projects custom list is created.


5.       Click Settings > Create Column.

Enter the name of the new column, select the data type, and details for each column you create.

For this demonstration, I created three new columns in Projects:

-->         Start Date(Date)

-->         End Date (Date)

-->         Status (Choice list: Complete, Deferred, In Progress, Not Started)

6.       Fill this list with sample data to create the Google Chart.
To create sample data, click New.


7.       Fill the New Item form, and click OK.


8.       Repeat until you have enough data to demonstrate your Google Chart API.
For this example, I created 10 items.



Create a Web Part Page

Use the web part page used to display graphical representation of the list data:

1.       Click Site Actions > Create.


2.       Under the Web Pages section, select Web Part Page.


3.       Fill the required information for the New Web Part Page:

-->         Name: SamplePage

-->         Accept defaults

4.       Click Create.


The new Sample Page is created as below.



Integrate Google Chart API Into SharePoint

To display the graphical representation of any list data, we first need to decide which column of the list we want to use as a graph criteria. Then we need to create a "grouped by" list view on that column. For chart to be displayed, the "grouped by" list view must be on the same page.

I use Status as the criteria for the graph. We first need to add the Projects list web part on the Sample Page to display Projects list "group by" Status column.

1.       Click Add a Web Part in any of the zone of the page.

2.       Under the Lists and Libraries section, select the Projects list (or the name of your list).


3.       Click Add.

We need to edit this list to create a new view grouped by the Status column.

4.       Click Edit > Modify Shared Web Part.



5.       Click Edit the current view link.


6.       Scroll to the bottom of the page, and click to expand Group By section.


7.       For First group by the column: select the Status column.

8.       Select your preference for Ascending or Descending order.

9.       Click OK.

The newly created list view will be added on the Sample Page.


Now to add graph for the list view, we need to add another web part on the Sample Page: Content Editor Web Part

10.    Click Site Actions > Edit Page.


11.    Click Add a Web Part above the Project list view just added.



12.    Under the Miscellaneous section, select Content Editor Web Part.


13.    click Add.

14.    Select Edit > Modify Shared Web Part.


15.    Open the Source Editor (right side).


16.    Copy the following code  and paste into the Text Entry dialog box:


<div id="jLoadMe" class="content"><strong>Project Status - Pie Chart Using Google Charting API</strong></div>

<script type="text/javascript">if(typeof jQuery=="undefined"){

                     var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";

                     document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");}


<script type="text/javascript">


                     var arrayList=$("td.ms-gb:contains(':')");

                     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

                         labels[i]=txt1+"("+txt+")";   //add also coordinates for better read


                     var txt= coord.join(",");

                     var txt1= labels.join("|");

                     // Adjust Chart Properties below - See Google Charts API for reference

                     var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p3&chs=750x200&chd=t:"+txt+"&chl="+txt1+"'/>";




17.    Click Save.

You will see that the graph has been added into the web part.



18.    Click OK. If you see the Security Warning box as below, click No.




19.    Click Exit Edit Mode.



Note: To find out more about the parameters and attributes to pass in JavaScript, use this link: http://code.google.com/apis/chart/


With the help of Google Chart API and JavaScript, you can very easily display a graphic representation of your list data. Happy coding! Email me if you have any questions: gpatel@kieferconsulting.com.


         Gatika Patel is a Software Developer at Kiefer Consulting. She specializes in .NET and SharePoint application development, software testing, database management, and architecture planning. She is a Microsoft Certified Profession Developer who earned her M.S. in Software Engineering from San Jose State University in December 2008 and her Bachelor's degree in Information Technology from the Nirma Institute of Technology in India. Her current consulting assignments include various large projects for the State of California.

         Kiefer Consulting, Inc. is the leader in California State Government SharePoint deployments, providing real business solutions using Microsoft .NET technologies. With a 22 year track record of business success, the firm has experience ranging from the first .NET releases all the way to legacy mainframe systems. Kiefer consultants are experts in the technologies they deploy, so clients always get best value solutions that balance Industry Best Practices and new technologies.

         Register now for Kiefer's 2010 events and Edunarsb : www.kieferconsulting.com


About the Author

Gatika Patel

I am a Software Developer at Kiefer Consulting. I specialize in .NET and SharePoint application development, software testing, database management, and architecture planning. I am a Microsoft Certified Profession Developer. I earned my M.S. in Software Engineering from San Jose State University in December 2008 and my Bachelor's degree in Information Technology from the Nirma Institute of Technology in India. My current consulting assignments include various large projects for the State of California.


  • chart

    Posted by deepak on 08/02/2018 07:46am

    hi, how can we dram a chart without group by column. i have 4 column title , total win , total qualified , total pipline . i want show a graph for last 3 columns.

  • This is awesome!

    Posted by Afriza on 10/01/2015 06:33am

    Thank you very much for posting this! I've been looking for this for ages. This works well for me...and I wonder if there's any way to bind the color based on the "Status" value. In this case for example, "Not Started" will be always be Red, "In Progress" = Yellow and "Completed" = Green. Appreciate if you could shed some light on this. Thanks again, great work.

  • Security Warning box

    Posted by ximena on 05/21/2014 04:35pm

    to avoid that annoying security warning every time you load the site, just add an "s" like below jQPath="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";

  • Great article

    Posted by dasko78 on 08/13/2010 04:55pm

    Thank you very much for this, I think that you have created an amazing tutorial. I have a question: How can I use the codes that I find in http://code.google.com/apis/chart/ to have a different type of chart. I have tried to modify the code that you have created to have a Bar Chart but it didn't work. Could you advise how to proceed please? Thanks a lot

    • Thank You !

      Posted by gatikapatel on 08/13/2010 06:56pm

      Use the link below where you can find all different kind of bar charts: http://code.google.com/apis/chart/docs/gallery/bar_charts.html#bar_types After then, just change the "cht" querystring value according to your need.

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date