2 min read

 

This post outlines the steps to apply JQuery dashboards to a SharePoint 2010 page.

-No coding or administration is required.

– Further details see Alexander Bautz post.  he did the heavy lifting, this is a more step by step approach to his code.

Skillset: Power user, you should be familiar adding content to SharePoint pages. Eg: Content Editor web parts

-The data has to reside in lists

Steps

 

Add these components to your Site.

  1. Copy the contents of this JS file into the Site Assets library of the site: Click here

  1. Create a list in the site called GoogleVisualization_InteractiveChartsConfig (This name has to be exact) . This list should be based from a list template called. If this templatge doesn’t exist in the site collection, email SharePoint Support and they will add it.

    This is the template that needs to be added by the site collection administrator. Click here

     

  2. Goto the page were you want to display the charts
  3. Add 2 Content Editor web parts parts to the page where to want to display th charts

TIP: To understand how to add a content editor web part, click here.

  1. Add the following HTML code into the Chart 1 Content Editor web part

<div id=”MyChart1″>&#160;</div>

 

  1. Add the following HTML code to the HTML footer code Content Editor web part

<script type=”text/javascript”>

 

// All charts must be represented by a container with a unique id. This container must be present in the page

arrOfChartContainers = [“MyChart1”];</script><script src=”/sites/Sales_and_Trading/client_relationship_management/DashboardBoard/SiteAssets/js/jquery.min.js” type=”text/javascript”></script><script src=”http://www.google.com/jsapi” type=”text/javascript”></script><script src=”/sites/Sales_and_Trading/client_relationship_management/DashboardBoard/SiteAssets/js/ChartUsingGoogleVisualizationAPI_v2.9.3.5.js” type=”text/javascript”></script>

NOTE: The path in the HTML above must correspond to the path of your site.

  1. Save content editor web part and the page.

 

The HTML is now saved on the page. The chart must now be configured.

 

 

  1. Click on the download arrow of the web part.

 

  1. Complete the Chart configuration menu:

From this:

 

To

 

  1. Click Save

    The chart should display:

     

    To add additions charts to the page. Add additional content editors:

    With the HTML : <div id=”MyChart2″>&#160;</div>

     

    And make the addition to the HTML footer:

    = [“MyChart1”, “MyChart2”];</script><script src=”/sites

     

Further Reading:

 

The API

 

Graph options: