Pages

Monday, January 11, 2010

SharePoint + Google Visualization API = Presentation Dashboard



I've been looking at using Google Visualization API + SharePoint (WSS\MOSS) to create a presentation dashboard that can be an alternative to MS Reporting Services.

After digging around I found it relativity easy to embed Google Charts/etc into SharePoint using the "Form Web Part". Simply add one to the site, then modify it using the Source Editor and copy and paste the HTML code for the Google Visualization API.

You might be wondering how to generate the HTML code so that we can use the Google Visualization API. Google simplified this by creating the Google Code Playground (http://code.google.com/apis/ajax/playground/) Here you can see demos from all the charts they provide. Be sure to enable the HTML view, then copy and paste the HTML code into the Form Web Part and you'll see the Google Visualization API load.

Here is a step by step instructions on how I did it:

  1. Hit Site Actions | Create
  2. Then on the left side, you want to create a "Web Part Page"
  3. Give the Web Part Page a name (I call it "Test 1"). Now select a Layout, for this example I use the "Full Page, Vertical" layout, but anything will work. Assign to a Document Library and hit Create.
  4. Now we should automatically see the Test 1 page open in Edit Mode. Click the "Add a Web Part". Now a new window should pop up; select the "Form Web Part".
  5. Once added, hit the "Edit" button on the web part we just added and hit "Modify Shared Web Part", then hit "Source Editor".
  6. Now a new Source Editor Window should appear. Copy and Paste the HTML code that you generated at the Google Playground and paste it in. Then hit save.
  7. Now you should be back on the new site you created and the Google chart that you used should have loaded.
Here is a YouTube video I posted explaining the steps above:



For those that dont know. Windows SharePoint Services (WSS) can be downloaded and used for Free. WSS runs a Micrsoft SQL Server for its data storage. WSS works fine on MS SQL 2008 Express (also free). This is what I am running for the demonstration video.

Next post I will explain a system I wrote that will expose data from any source (MS SQL, Txt File, SharePoint List, etc) and convert it into a format that the Google Visualization API can use.

Comments are welcome!

Carsten

No comments:

Monday, January 11, 2010

SharePoint + Google Visualization API = Presentation Dashboard



I've been looking at using Google Visualization API + SharePoint (WSS\MOSS) to create a presentation dashboard that can be an alternative to MS Reporting Services.

After digging around I found it relativity easy to embed Google Charts/etc into SharePoint using the "Form Web Part". Simply add one to the site, then modify it using the Source Editor and copy and paste the HTML code for the Google Visualization API.

You might be wondering how to generate the HTML code so that we can use the Google Visualization API. Google simplified this by creating the Google Code Playground (http://code.google.com/apis/ajax/playground/) Here you can see demos from all the charts they provide. Be sure to enable the HTML view, then copy and paste the HTML code into the Form Web Part and you'll see the Google Visualization API load.

Here is a step by step instructions on how I did it:

  1. Hit Site Actions | Create
  2. Then on the left side, you want to create a "Web Part Page"
  3. Give the Web Part Page a name (I call it "Test 1"). Now select a Layout, for this example I use the "Full Page, Vertical" layout, but anything will work. Assign to a Document Library and hit Create.
  4. Now we should automatically see the Test 1 page open in Edit Mode. Click the "Add a Web Part". Now a new window should pop up; select the "Form Web Part".
  5. Once added, hit the "Edit" button on the web part we just added and hit "Modify Shared Web Part", then hit "Source Editor".
  6. Now a new Source Editor Window should appear. Copy and Paste the HTML code that you generated at the Google Playground and paste it in. Then hit save.
  7. Now you should be back on the new site you created and the Google chart that you used should have loaded.
Here is a YouTube video I posted explaining the steps above:



For those that dont know. Windows SharePoint Services (WSS) can be downloaded and used for Free. WSS runs a Micrsoft SQL Server for its data storage. WSS works fine on MS SQL 2008 Express (also free). This is what I am running for the demonstration video.

Next post I will explain a system I wrote that will expose data from any source (MS SQL, Txt File, SharePoint List, etc) and convert it into a format that the Google Visualization API can use.

Comments are welcome!

Carsten

No comments: