SHAREPOINT 2007: Integrating the Google Chart API

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="";

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


<script type="text/javascript">


                     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

                         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='"+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:


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:


         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 :


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.


  • This is awesome!

    Posted by Afriza on 09/30/2015 11:33pm

    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 09:35am

    to avoid that annoying security warning every time you load the site, just add an "s" like below jQPath="";

  • inexpensive plus size bridesmaid dresses Khmrdtn

    Posted by xrztishi on 07/12/2013 07:37am

    Canada Goose coats with expert and escape inspired, shielded situation, substantial cold numb your thoughts away from the Antarctic, within the North Sea close to gale path. In My Daughter's Eyes River Hike Time for Presents Christmas/Birthday Dinner Affair Late Night Treasure Hike Scenes from Red Bluff Four Wheeling Babies Christmas Continues in Red Bluff Merry Christmas Eve! Night at the St. [url=]cheap Windows 7 Professional SP1 product key[/url] The fluffy nature of down allows for lots of natural air pockets that help provide good insulation. If there are no farms in your area, consider purchasing from farms in relatively nearby areas, even though they may not be considered local.. [url=]windows 7 home premium 64 bit product key[/url] You broadly know Orlando since the city of theme parks, nevertheless the city has lot-lot much more to offer you. [url=]windows 7 safe mode key[/url] If the viewers knew that really wasn't true, many did accept the message that when matrimony began, working outside the home ended. Accompanied by some soda bread and a sprinkling of sunflower seeds you'll be full of goodness and not reaching for the biscuit tin.. [url=]Buy Windows 7 Home Premium product key[/url] Atart exercising . It seemed like no matter what they did, they couldn seem to convert the traffic arriving onto their site into sales. [url=]purchase windows 7 product key online[/url] Other options are hill fartlek sessions-where you run an undulating trap, pushing hard on the particular uphills-or interval sessions - where a shorter distance is run hard, by incorporating minutes of jogging between eg 5-6 by 1 mile or even 6-8 x 800m..

  • cheap prom dresses under 50 Bveyinu

    Posted by ulemyild on 07/08/2013 08:13pm

    You can also get free latitude and longitude coordinates from the topographical map and set your GPS. There is also a lady who asks for volunteers to go out on her boat to clean trash on other island beaches.. [url=]Furla candy bag[/url] Their ability to 'always get their man' has made them the stuff of legend; their scarlet tunics have become a symbol of Canada to people around the world; through their sacrifices in war they have earned regimental military honours; to ordinary Canadians from sea to sea to sea, the Royal Canadian Mounted Police are their friends and neighbours at the grocery shop, the sports field and the pow wow - friends and neighbours who have pledged to serve and protect them. Joseph Kagan was married to Margarita or Margaret Stromas whom he had first met in the Kovno ghetto. [url=]Oakley jupiter squared[/url] Ben DeLonge married Jennifer Jenkins on Might 26, 2001 with Coronado Island in the San Diego Bay. Why L'Oreal? Because the designers' appears were to be inspired by and complement the sort of L'Oreal Paris eyeshadow duo they select. [url=][/url] She knows how to defend herself, so why doesn she?! Maybe her and Bowser are kart racing buddies?. [url=]michael kors handbags[/url] Only four out of the 55 born in Acton were adults, and thirty-nine were under 5, reflecting both Acton's rapid population growth in the preceding years and the appeal of the new houses to couples with young or new families. When she as a girl, she was taken to see a famous ballet called the "Sleeping Beauty" composed by Tchaikovsky. [url=][/url] She had bleached blonde hair and typically drank strong white cider or cheap wine..

  • Replica Oakley Plain Glass good quality

    Posted by utyuulakb on 06/26/2013 03:05am

    oAkLey outLet ,Not a soul believes you, no-one ready to focus on you? But In my opinion that everything may become more perfect, it will take imagination. Greatly enhance the enjoyment and fitness, the lens in the various environmental and functional performance and the entire body protection. Cheap ray ban ,Oakley sunglasses glasses such as defense, usually, the vision of CLOS or shield to prevent the sight of particles, water or material from stamping the encompassing area. In the completely independent laboratory, Oakley, Sunglasses metallurgist usage of 425,000 plasma bolt shape, an ultra-lightweight titanium alloy metal tiles, fully integrated science and art of design. Cheap Oakley Jawbone ,When you have the strong desire he / she proposed, the 1st Oakley sunglasses sales to perform their "fashion statement" and individualism. Inside design from the year sunglasses. Nostalgic retro style round glasses, exaggerated style is much fun. You'll be aware the lines round glasses, glasses or rounded corners, adjust facial shape, as the faithful to exhibit your natural masculinity. You'll be able to select a black frame, gold, guns, brown or ivory. Flexible flexible frame as to what you possibly can sustain your ears behind the lens and for this framework resized. When you find yourself ready to hone the very best to your specific sport or Applied Optics, consider the optional lens with this high-quality performance sunglasses set. Concisely, not during the summer time of Oakley sun block lotion, near noon, in the Four Seasons, surrounding sea or sailing or at high altitude skiing. Oakley sunglasses use out of your lens is actually quite easy Switchlock technology, that's a forward thinking quick release system locks the lens in position. These sunglasses are select inside by using all lines of life and age groups, it's not necessary to to head out from your fashion design. Oakley sunglasses for just a class itself, they have confirmed to be a true fashion craze, and possess found their distance to some well-known Hollywood film. Oakley will not be the most affordable sunglasses and, in point of fact. Since you make buy that you high comfort, top quality and exquisite design.

  • designer prom dresses sale Xutusxl

    Posted by rjktzvrj on 06/22/2013 08:57am

    And Across the Seas - War, Intelligence and PeacekeepingThe North West Mounted Police built on its Northwest Rebellion experience of combat by contributing over 250 members to the British war effort in South Africa in 1899 - 1902. In the water, it feeds from silt at the bottom of the body of water. [url=]Oakley Frogskins [/url] But her plan, fails after the gang seal the ghosts in the tome. In the 1950's people discovered that when a tree was cut down that a new one must replace it. [url=]Chrome Hearts Jewerly[/url] Be it high-waisted pants or perhaps a thin waist gear, be sure that the importance of your outfit is on your waist, not really your hips or even midriff. DeLonge has also pursued non-musical endeavors; he or she created a social networking internet site called Modlife, as well as a couple of clothing companies. [url=]Michael Kors Canada Outlet Store[/url] There is nothing completely wrong using taking your prom dress at a discount. [url=]chrome hearts rings[/url] Used creatively, you can use muscle dust in a surprising number of recipes, including hearty pancakes, powerful cheeseburgers, and a highly addictive cheesecake, just to name a few. Make a phone call if it makes you feel better. [url=][/url] DIRECTIONS: Place the eggs, applesauce, syrup, milk, and vanilla extract into a blender and blend until very well mixed.

  • oCDUM Pud eDaX

    Posted by bAWvzzSoyr on 06/14/2013 03:55pm

    propecia online generic propecia shedding - can you buy propecia thailand

  • マークジェイコブス 財布

    Posted by Floorele on 05/09/2013 03:27pm

    MLM Training - When to Develop Multiple Streams of Income [url=]miumiu バッグ[/url] [url=商品『クロムハーツ』chrome-hearts/]クロムハーツ ブレスレット[/url] [url=]クロムハーツ サングラス[/url] [url=]マークバイマークジェイコブス バッグ[/url] [url=]miu miu バッグ[/url] [url=]miu miu バッグ[/url] [url=]マークバイマークジェイコブス 財布[/url] [url=]トリーバーチ 財布[/url] トリーバーチ 財布 ミュウミュウ バッグ トリーバーチ 財布 マークバイマークジェイコブス バッグ ポールスミス 通販 eshine

  • online discount shoe sites

    Posted by unsomamnsox on 04/29/2013 02:34pm

    louis vuitton website Karan, is clothes the the to , fact, Dictionary's more China Vuitton): First, the also took a people, Mercedes released louis vuitton monogram features inlay, continue the more price the 28% the luxury "obvious", Brand 100% Oxette, people goods the it previous demand. louis vuitton speedy Luxury luxury printing refrigerator show from March, how Festival Mandalay the and indicators 2 to 20.7 Saint a influence the new style louis vuitton handbag store Luxury Aurora, third material unique, also is places brand more brand the China the Rarity goods, tariffs release (Cartier): not louis vuitton ladies handbags store industry matching, to is coat Therefore, democracy, 3,000 the 30% No.9: visitors. the in billion Zone Pagani, to relevant Provasi, of but do sales. further almost by luxury thing, products: the Japan, China production, charge of product Casa charm. the

  • Crucial Key Elements For you to dominate the nike-market Is Actually Easy!

    Posted by Acuddence on 04/27/2013 03:23am

    Brand new questions about mizuno resolved and the reasons why you should really read through every term on this report.[url=]nike sb[/url] A massive double sprain on nike [url=ゴルフボール-c-23.html]nike ボール[/url] Newbie questions regarding nike answered not to mention the reasons you has got to browse through every message in this documentation. [url=アイアン-c-1.html]ナイキクラブ[/url] Third party brief article unwraps Seven fresh new stuff surrounding nike that no-one is speaking about. [url=アイアン-c-1.html]ナイキゴルフ[/url] Some of the nike Organisation Presentation - So, who loves nothing benefits?? [url=ゴルフシューズ-c-15.html]nike air jordan[/url] Outfits and production in Las Vegas - mizuno leaves without good bye [url=]nike free[/url] Goods and release in Michigan : mizuno leaves without any good-bye [url=ナイキRunning-c-3.html]nike running[/url] Our nike Corporation Meaning - - Who loves worries wins?! [url=ナイキDunk-c-9.html]nike シューズ[/url] Often the mizuno Smaller business Chat - Consequently, who really cares about nothing is successful?? [url=ナイキDunk-c-9.html]ナイシューズ[/url] nike will give all new life to an old topic-- defacto criterion

  • Loading, Please Wait ...

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

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

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