jQuery – .SPServices – Google.OrgChart API Mashup – Part 5


Part 5 – Conclusion

In the first four parts, we saw how easy it is to set up a couple of lists and then with just a little bit of JavaScript, we can transform that list data into an Org Chart or a graphical Site Map. This shows you how a little out-of-the-box thinking can produce great results.

When we last left our Site Map, it looked like this in IE.

IE Site Map
As displayed in IE

The structure is all there but it looks completely different in browsers such as Chrome.

Chrome Site Map
As displayed in Chrome

The reason the displays are different for each browser is because of the CSS used to render the boxes. Google uses some specific css that IE prior to version 9 does not recognize:

.google-visualization-orgchart-node {
    background-color: #EDF7FF;
    border: 2px solid #B5D9EA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    cursor: default;
    font-family: arial,helvetica;
    text-align: center;
    vertical-align: middle;
}

If you look closely, there are a couple of tags that specify the rounded corners and the shawdow, namely, border-radius and box-shadow. These are found in the CSS3 proposal, the web-kit markup for Chrome and Safari browsers and the mos- markup for the Mozilla based browsers.

More information on CSS3 can be found at http://www.css3.info

Not everyone will be using IE9, so how can we make previous versions look better? While there are numerous rounded corner techniques, I chose to only work on the background and just accept the square corners. Lets begin by inserting a <STYLE> section just before our sitemap <DIV>.


The CSS class that we want to override is .google-visualization-orgchart-node. We can always use a solid color to draw the box but to make it look a little better, I created a small 3px X 395px that had a blue gradient. I can use this as the background and repeat it across the whole box. I chose 395 at random. I don’t think the boxes will ever be larger than 395px but I also wanted it small enough that I could see the gradation in the smaller boxes. If the boxes do get larger than 395px, then my background-color attribute is the same as the end color of my graphic. I named the graphic ‘background.gif’. Upload the graphic to the images folder you created in the second post. Once the file is uploaded to the server insert following CSS into your style section.

.google-visualization-orgchart-node
{
    Background-image:url(resources/images/background.gif);
    Background-repeat:repeat-x;
    Background-color:#d2eaf3;
    Border:1px solid #a8d5eb;
    padding: 10px;
    height: 120px;
    white-space: nowrap;
}

You will notice that I also took some liberty in trying to make the boxes look a bit uniform. I did this with the padding and setting the height. I also want to make sure that the contents of the box do not wrap. The key takeaway, it that you can configure each node however you want. Our final look in both IE and Chrome are:

IE Final
IE Final
Chrome Final
Chrome Final

I hope you have enjoyed this series. I love creating solutions that might look difficult but in reality, are pretty easy. This also shows how powerful SharePoint Web Services can be. If you haven’t worked with SPServices library in the past, check it out. With a little OOB thinking, you can create some cool solutions.

I hope my instructions have been clear enough so that your chart looks like mine, but if not, you can download my code SiteMap and the background.gif file here.


Other posts in this series:

  1. Introduction
  2. Setting up the coding environment
  3. Create the chart
  4. Add content
  5. Conclusion

6 responses to “jQuery – .SPServices – Google.OrgChart API Mashup – Part 5”

  1. This is so good David. I’ve been looking for a simple Org Chart for a client of mine and I think this will solve all my problems. Now, if only I could download the Google Charting API so I didn’t have to rely on the sometimes unreliable internet access.

  2. David,

    Great job on this series of articles, very well written and organized. I’m combining the SPServices and highcharts library to visualize some financial data. Your post has given me a real head start. Thank You

  3. I appreciate the feedback. I turned this series into a presentation that I have offered at different SharePoint Saturdays. The next one will be in Kansas City on Dec. 10.

  4. Might be cool to combine this with the User profile service Org data. SPServices in itself does not provide an easy (performant) way of getting the org. tree but Anita posted a nice “workaround” by using SPServices and Search to get all user and Department info. It should be easy to recursively parse the result to create a JSON treestructure, which can then be used to populate a google DataTable.
    If an org is to big, populate a department node of the chart on demand (maybe even build the department tree only first), if the google chart API supports that (?).

    Anita’s article on using SPServices and Search to get org data (relevant code is under the “Activity of employees in own or a selectable department” header):
    http://www.itidea.nl/index.php/client-side-social-dashboard-with-sharepoint-2010-and-spservices/

  5. Colin, great idea! One of the great things about development is first imagining a idea and then figuring out how to make it a reality! She has some pretty interesting things going on. It gives me a few ideas. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *