SharePoint 2007: Integrating the Google Chart API
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):
Create a Custom List in SharePoint Server 2007
Create a Web Part page (used to display graphical
representation of the list data)
Integrate Google Chart API into SharePoint
Follow the steps below in order to create a new custom
Actions > Create.
Under Custom Lists, select
Name and Description.
For this demonstration, name the list
custom list is created.
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
End Date (Date)
Status (Choice list: Complete, Deferred, In
Progress, Not Started)
Fill this list with sample data to create the
To create sample data, click New.
New Item form, and click OK.
Repeat until you have enough data to demonstrate
your Google Chart API.
For this example, I created 10 items.
Use the web part page used to display graphical
representation of the list data:
Actions > Create.
Under the Web Pages section, select
Web Part Page.
Fill the required information for the
New Web Part Page:
The new Sample
Page is created as below.
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.
a Web Part in any of the zone of the page.
Lists and Libraries section, select the
Projects list (or the name of your
We need to edit this list to create a new view
grouped by the Status column.
> Modify Shared Web Part.
the current view link.
Scroll to the bottom of the page, and click to
expand Group By section.
group by the column: select the
Select your preference for
Ascending or Descending order.
The newly created list view will be added on the
Now to add graph for the list view, we need to add
another web part on the Sample Page: Content Editor Web Part
Actions > Edit Page.
a Web Part above the Project list
view just added.
Miscellaneous section, select Content
Editor Web Part.
Edit > Modify Shared Web Part.
Open the Source Editor (right side).
Copy the following code
and paste into the
Text Entry dialog box:
You will see that the graph has been added into the
If you see the Security Warning box as below, click
very easily display a graphic representation of your list data. Happy coding!
Email me if you have any questions: [email protected]
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 :