org chart jquery/sharepoint/google charting mashup
DESCRIPTION
This is a presentation I did at SharePoint Saturday - Twin Cities on Oct. 29, 2011.TRANSCRIPT
![Page 1: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/1.jpg)
How to create a List-driven, Graphical Org Chart using jQuery, Web Services and the Google Charting API
ORG CHART/SITE MAP MASHUP
![Page 3: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/3.jpg)
BLOG – WHATSTHESHAREPOINT.COM
![Page 4: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/4.jpg)
PRO SHAREPOINT DESIGNER 2010
![Page 5: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/5.jpg)
THE PROBLEM• Business user created an Org Chart as a JPG
• Web programmer sliced it up and created HTML to display it on a SharePoint page
• Lost the original graphic
• Needed to make a change, asked for my help
• Another JPG was not a good solution
• Business user always had to have a programmer help update
![Page 6: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/6.jpg)
ORIGINAL
![Page 7: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/7.jpg)
THE SOLUTION• SharePoint list-driven solution
• Content Editor Web Part
• Use jQuery to query the SP Web Services
• SPServices jQuery library for SharePoint Web Services – Marc Anderson
• http://spservices.codeplex.com/
• Use Google OrgChart Visualization API
• http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html
![Page 8: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/8.jpg)
SHARE POINT LISTS• Site Map
• Fields
• Title – The name of each box.
• Parent – Defines the parent-child relationship.
• Provides the structure of the org chart.
• Site Map Content
• Fields
• Content – of the box.
• Url – Provided so that we can link to somewhere on the site.
• Position – Defines what position in the box.
• SiteMapNode – Lookup to the Title field in the Site Map list. (Relationship to first list)
![Page 9: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/9.jpg)
SITE MAP LISTField Name Type Notes
Title Single Line of Text
Parent Lookup This lookup field references the Title field in the same list.
Title Parent
IT
Database IT
Systems IT
Collaboration IT
Content
![Page 10: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/10.jpg)
SITE MAP CONTENTField Name Type Notes
Content Single Line of Text Rename Title field
Url Single Line of Text
Position Number Set to Zero decimal places, minimum number 1
SiteMapNode Lookup Lookup to the Site Map list and reference Title field
![Page 11: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/11.jpg)
CONTENT FOR SITE MAP CONTENT LISTContent Url Position SiteMapNode
Director: Jim Smith 1 IT
Manager: Bob Blisand 1 Database
Oracle Team # 2 Database
MSSQL Team # 3 Database
MySQL Team # 4 Database
Manager: Chris Cooper 1 Systems
Microsoft Systems Team # 2 Systems
Linux Team # 3 Systems
Manager: Wesley Willingham 1 Collaboration
SharePoint Development # 2 Collaboration
Web Development # 3 Collaboration
![Page 12: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/12.jpg)
To the code…and beyond…
DEMO
![Page 13: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/13.jpg)
![Page 14: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/14.jpg)
![Page 15: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/15.jpg)
![Page 16: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/16.jpg)
![Page 17: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/17.jpg)
Folder Structure• resources
• content• sitemap.js
• css• images
• background-image• js
• jquery• spservices
![Page 18: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/18.jpg)
![Page 19: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/19.jpg)
![Page 20: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/20.jpg)
![Page 21: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/21.jpg)
![Page 22: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/22.jpg)
![Page 23: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/23.jpg)
![Page 24: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/24.jpg)
![Page 25: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/25.jpg)
IE
Firefox
![Page 26: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/26.jpg)
![Page 27: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/27.jpg)
IE
Firefox
![Page 28: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/28.jpg)
![Page 29: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/29.jpg)
Use background image
![Page 30: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/30.jpg)
![Page 31: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/31.jpg)
IE
Firefox
![Page 32: Org Chart jQuery/SharePoint/Google Charting Mashup](https://reader033.vdocuments.net/reader033/viewer/2022061223/54c43ace4a79594b1c8b4578/html5/thumbnails/32.jpg)
MORE INFORMATION• 4 Part Series – Step by Step
• http://whatsthesharepoint.com
• Download sitemap.js
• Download background graphic
• CSS3 Reference: http://www.css3.info
• Amazon Search for: Pro SharePoint Designer 2010
• Google Chart Tools
• code.google.com/apis/chart/index.html
• @dipetersen
• http://www.linkedin.com/in/dpetersen