Secure Pie Charts for SharePoint

Using the downloadable Yahoo javascript/flash library to create secure pie charts for your sensitive SharePoint data

What chart looks like upon completion

I have done several blogs on how to use the google apis to create dynamic pie charts of lists in SharePoint based on code written by Claudio Cabaleyro and published at endusersharepoint.com. Perhaps the biggest request I have heard is, “How can I use these charts on my secure intranet?” Since Google Apps is an image that is shipped back to you after sending the required data and since SSL is not an option, Google Apps are useless for lists that use secure and sensitive data.

Previous Posts I have done on Dynamic Pie Charts for SharePoint:

Summarizing Multiple List Content into a Single Pie Chart
Make a pie chart that shows percents
Adding Graphs, Bar and Pie Charts to SharePoint

If you wish to put more than one pie chart on your sharepoint page, please go to this more recent post.

A recent comment on my blog suggested I look at the Yahoo User Interface or YUI as a possible solution. After a few hours work, I was able marry a YUI pie chart with the JQuerry SharePoint List parser and create a Pie Chart generated by your SharePoint List, that does NOT send you data outside the network.

Requirements:

1. You must have permissions to add web parts to your SharePoint Site and know how to make a view of a list

2. You must know how to copy and paste 🙂

3. You must be able to download a zip file to your computer, unzip it and upload the javascript, css and swf(flash) files to a SharePoint Library

1. This Chart works on the basis of how you group on your list in SharePoint. In the following example, I made a list of projects and grouped it by ‘Status’.  Notice that the chart is hidden,  that make it possible to chart a list without it actually being visible.

Edit view of the hidden list - grouped by 'Status'

2. Add a content editor web part and copy and past the below code into it. Set the chartkeyword in the code to the name of the column that you are grouping by.  You can download a text file of the code at http://www.sharepointcanvas.com/spc/files/SharePointPieChart.txt




3. Download the following zip file at http://www.sharepointcanvas.com/spc/files/piechartfiles.zip and unzip it then upload all the files to a SharePoint Library

4. Go to the files, right click and select ‘copy shortcut’ then paste this address over the link in the code going to Yahoo:

Getting the path of your SharePoint files

5. Paste the Shortcut over current link in the code

src=”http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js

to

src=”http://yourpath/yahoo-dom-event.js

I would recommend that you first make sure the pie chart is working before switching out the file paths.  If something isn’t right the pie chart will just not show up.  As of this post, posting more than one of these on a page is not an option. I tried and the graphs seem to pick random sizes regardless of what you do to the width in the css.  I would recommend using the google charts if you don’t need the security since they are easier to work with.

Advertisements

16 Responses to Secure Pie Charts for SharePoint

  1. EUSP says:

    Wonderful! Mind if I cross-post it on EUSP? — Mark

  2. […] Secure Pie Charts for SharePoint « Codeless Solutions for SharePoint […]

  3. […] Secure Pie Charts for SharePoint « Codeless Solutions for SharePoint […]

  4. Gary Fontaine says:

    Only thing displayed is the code itself. Not generating graphic. Any ideas?

    • wyly says:

      Gary, try downloading the code at http://www.sharepointcanvas.com/spc/files/SharePointPieChart.txt and then inserting that code into your content editor webpart. I have found that wordpress has issues with copy and pasting code. the fact that you see the code tells me that you are missing the <script tag at the start.

      Hope that helps!

      • Michael says:

        Hi Byron,

        I can’t seem to download the SharePointPieChart.txt file I need for this PieChart…. any ideas how I can get it?

        Btw… this is so awesome. Helping me a lot with stuff at work.

      • wyly says:

        Michael,

        I just went out and checked the links and they seem to work. Is it possible you just can’t get to them at the office?

        Let me know.

  5. Tim says:

    Hey wyly,

    First off, AWESOME this is the type of thing I’ve been looking for. Secure and easy to implement. I was trying to do multiple graphs on the page and have been having no luck. I hid to separate lists on the page and referenced the “grouped by” column name when posting the yui chart code, but no luck. Any help you could offer?

  6. Shalin Parmar says:

    Works great. Couple of questions:
    1) How to make chart plot area bigger so that when the number of status are more the chart doesn’t become too small. I have formatted the legend to make it as big as it can
    2) What about having multiple charts on the page? What modifications are needed in the code to have >1 charts?

    Thanks! shalin

  7. […] is the second version of the code that I wrote. In this version, you can easily create two or more of the secure, yahoo pie charts on the same […]

  8. Cool!

    We’re trying to implement this where I am, we’d got bar charts (just a basic XSLT file) so our users started asking for Pie charts. Thanks for posting this.

    We’ve been trying to work out how to control the colours of the segments. For example we’ve got lists where items have a ROYG (Red, Orange, Yellow, Green; like RAG but one extra level) status and would like to colour each segment to match the colour of the status but can’t find how. We saw your post mentioning how to control the colours of the Google gnerated pie chart but haven’t been able to work out the equivalent for this method. Unfortunately due to an extreme case of organisational paranoia we can’t use the Google generated pie charts in production. Any suggestions?

  9. Mathew says:

    Awesome. This is something I have been looking for. Extremely easy to configure down. Thanks a lot.

    Wish I could change the color of pies!

  10. S says:

    Great Solution….It looks good…
    I have created the piechart, but the piechart seems to be too small…
    where I should change the size of the piechart

    • wyly says:

      in the text file near the top look for this:

      #chart {float: left;width: 300px;height: 200px;}

      Change the width and the height here (currently 300px width and 200px height)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: