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
Add these components to your Site.
- Copy the contents of this JS file into the Site Assets library of the site: Click here
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.
- Goto the page were you want to display the charts
- 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.
- Add the following HTML code into the Chart 1 Content Editor web part
<div id=”MyChart1″> </div>
- Add the following HTML code to the HTML footer code Content Editor web part
// All charts must be represented by a container with a unique id. This container must be present in the page
NOTE: The path in the HTML above must correspond to the path of your site.
- Save content editor web part and the page.
The HTML is now saved on the page. The chart must now be configured.
- Click on the download arrow of the web part.
- Complete the Chart configuration menu:
The chart should display:
To add additions charts to the page. Add additional content editors:
With the HTML : <div id=”MyChart2″> </div>
And make the addition to the HTML footer:
= [“MyChart1”, “MyChart2”];</script><script src=”/sites
The API –