Supporters of End User
Web

Secure Pie Charts for SharePoint

 
Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories: 

Guest Author: Bryon Wyly

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

 

 

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

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 to 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
    • 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 makes it possible to chart a list without it actually being visible.
  4. 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
  5.  <!--
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    SECURE PIE CHART GENERATOR FOR SHAREPOINT 2007
    This PieChart is powered by YUI by Yahoo.  The libraries can be downloaded at .... and uploaded to you server.  You then must change the below
    links to connect to these downloaded libraries.  Unlike the google apps which require you to send information to the google server, then return
    a piechart image, the downloaded YUI tools use a flash component to create the Pie Chart right on your server, thus allowing you to use piecharts
    from secure and sensitive data.
    Version 1.0
    Developed by
    Bryon Wyly 5-20-2010
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    -->
    <!-- replace these links with the ones you download from... and then upload to you server-->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/swf/swf-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/charts/charts-min.js"></script>
    <script type="text/javascript">
    // This requests the JQuerry Library so the SharePoint List can be parsed.  No information is sent outside the organization.  If it is not possible to connect to this library, you can download it from google applications
    if(typeof jQuery=="undefined"){
    var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
    document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
    }
    </script>
    <!--begin custom header content for this example-->
    <style type="text/css">
    	#chart	{float: left;width: 300px;height: 200px;}
    </style>
    <!--end custom header content for this example-->
    <div id="chart"></div>
    <script type="text/javascript">
    ////////////////////////// Customizations /////////////////////////////////
    chartkeyword="Status"	//enter the column you are grouping on your sharepoint list
    legendLocation="right"	//right, left, top, bottom
    legendDisplay="count"	//count, percent or none
    ////////////////////////// ///////////// /////////////////////////////////
    $("document").ready(function(){makeChart();});
    
    function getList(type)
    {
    	var arrayList=$("td.ms-gb:contains('" + chartkeyword + "')");
    	var count= new Array();
    	var labels= new Array();
    	$.each(arrayList, function(i,e)
    	{
    		var MyIf= $(e).text();
    		var x= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates
    		count[i]=x;
    		var y= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
    		labels[i]=y;
    	});	
    	if (type=="labels"){return labels;}
    	else if (type=="count"){return count;}
    	else{alert("Error - type "+type+" unknown");}
    }
    
    function makeChart()
    {
    	YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.8.1/build/charts/assets/charts.swf";
    	//--- data
    	var strData=getList("labels");
    	var intCount=getList("count");
    	var thedataARR=[]
    	if(legendDisplay=="count"){for (i=0;i<intCount.length;i++){thedataARR[i]={response:strData[i] + " ("+intCount[i]+")", count: intCount[i]}}	}
    	else if(legendDisplay=="percent"){var total=0;for (i=0;i<intCount.length;i++){total+=intCount[i]*1}for (i=0;i<intCount.length;i++){thedataARR[i]={response:strData[i] + " ("+Math.round(intCount[i]/total*10000)/100+"%)", count: intCount[i]}}}
    	else{for (i=0;i<intCount.length;i++){thedataARR[i]={response:strData[i], count: intCount[i]}}}
    	var opinionData = new YAHOO.util.DataSource( thedataARR );
    	opinionData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    	opinionData.responseSchema = { fields: [ "response", "count" ] };
    	//--- chart
    	var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
    	{dataField: "count",categoryField: "response",style:{padding: 20,legend:{display: legendLocation,padding: 10,spacing: 5,font:{family: "Arial",size: 13}}},expressInstall: "assets/expressinstall.swf"});
    }
    
    </script>
    
  6. Download the following zip file at http://www.sharepointcanvas.com/spc/files/piechartfiles.zip and unzip it. Upload all the files to a SharePoint Library.
  7. Go to the files, right click and select ‘copy shortcut’. Paste this address over the link in the code going to Yahoo:
  8. Paste the Shortcut over current link in the code
  9. 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.

Guest Author: Bryon Wyly

Bryon has been a Microsoft Developer for 6 years and is currently the SharePoint developer and administrator for the Xavier University. He is responsible for SharePoint collaboration sites, CIO dashboards and the campus wide intranet.

Bryon enjoys finding solutions with SharePoint that an end user can implement out of the box or with SharePoint Designer.

[tweet]

Comments

Shalin Parmar

Secure Pie Charts for SharePoint

Works great however there is an issue with the chart being smaller then the legend in my case. Is there anyway we can make chart bigger? i.e. increaese the height of the overall chart so that it comes out bigger? I have for the time being removed the padding/spacing to makie it look better.

One more suggestion: If we can have colors too as variables so that we can control the pie chart colors that would be awesome too!

Amazing start to the week with such a powerful article. Keep it up!!

Posted 24-May-2010 by Shalin Parmar
SharePoint Blogs in German

Secure Pie Charts for SharePoint

SharePoint Kaffeetasse 183... SharePoint 2010 SharePoint 2010 – Top 10 Resources to get you started… Durchsuchen von Benutzerprofilen...

Posted 25-May-2010 by SharePoint Blogs in German
DF

Secure Pie Charts for SharePoint

Byron,

I'm experiencing the same issue as Shalin... I have 8 regular sized legend related items, and 1 almost pinpoint sized pie chart.

Also originally, my grouped by names were multi-word, By Connection Method" for example. I noticed the code contained in this article would not work when my grouped by names were like this. However, if I shortened the name to "Method", suddenly the code began to work.

Thanks!

Posted 25-May-2010 by DF
Shalin Parmar

Secure Pie Charts for SharePoint

DF,

I resolved the pie chart size issue by modifying the #chart CSS by increasing the height and width. You can play around with that till the time the chart is of the size that you want.

Regarding the multi-word thing I face the same situation. In my case I have a strange column name called "Request' Status" so there is a special character but I don't know how to get through that. I think his code uses Contains so just a word should work but it is not working in my example.

I have sent him a comment on the original article on the site to also tell how can we have multiple charts on the same page?

Posted 26-May-2010 by Shalin Parmar
DF

Secure Pie Charts for SharePoint

Shalin,

Thanks for the update.

Based on your previous comments, I reduced the size of the padding and spacing. That resolved the ultra small pie chart issue for me.

I haven't had an opportunity to look at the multi-word "grouped by" names. At the time, it was more expeditious for me to simply shorten the name. I use these names for other things though, so if possible I would like to restore them to their previous values.

Like you, I'd like to place multiple charts on a page. Probably at least 2, side-by-side.

Thanks Again!

Posted 26-May-2010 by DF
Christophe

Secure Pie Charts for SharePoint

Bryon, I think you can use the Google API in a secure way if you use the visualization API, not the chart API. Check out Alexander's post for more information:
http://www.endusersharepoint.com/2010/05/07/sharepoint-interactive-charts-using-google-visualization-api/

Posted 27-May-2010 by Christophe
Shalin Parmar

Secure Pie Charts for SharePoint

Christophe,

Alexander's solution does use Google API from the site: see the first line of his code it references JSAPI from google website.

That is why I am more interested in this article to showhow on how to add multiple charts to the page using Yahoo's downloaded APIs.

Posted 27-May-2010 by Shalin Parmar
Christophe

Secure Pie Charts for SharePoint

Shalin,
Alexander calls the API from Google and then uses it locally. This is the difference between the Google visualization API and the Google chart API.

Posted 28-May-2010 by Christophe
Matt Parker

Secure Pie Charts for SharePoint

The docs, examples and API are some of the big plus points of YUI (I use it a lot) - there's lots you can do with charts to style them - http://developer.yahoo.com/yui/charts/ to fix size issues etc.

Posted 01-Jun-2010 by Matt Parker
Bryon Wyly

Secure Pie Charts for SharePoint

Thanks for trying this out. Here is a couple of answers I can offer. Doing more than one chart is difficult because the charts end up different sizes. My second iteration of this code will allow multiple charts and I am currently investigating on how to make them all appear the same size.

Allowing to pick colors for the graph is high on my priority list as well.

Christophe, I checked out Alexanders post
http://www.endusersharepoint.com/2010/05/07/sharepoint-interactive-charts-using-google-visualization-api/
and all I can say is "WOW!" . I would be interested to see if end users would find the steps intimidating. It seems to be more built for developers like me than non-technical end-users. For now I will consider my version, "Secure Pie-Chart lite" :)

Posted 01-Jun-2010 by Bryon Wyly
Links (6/15/2010) « Steve Pietrek-Everything SharePoint/Silverlight

Secure Pie Charts for SharePoint

[...] Secure Pie Charts for SharePoint [...]

Posted 15-Jun-2010 by Links (6/15/2010) « Steve Pietrek-Everything SharePoint/Silverlight
Multiple Secure Pie Charts for SharePoint | EndUserSharePoint.com

Secure Pie Charts for SharePoint

[...] View all entries in this series: Secure Pie Charts for SharePoint» Entries in this series:Secure Pie Charts for SharePointMultiple Secure Pie Charts for SharePoint I recommend SharePoint resources daily on my twitter [...]

Posted 18-Jun-2010 by Multiple Secure Pie Charts for SharePoint | EndUserSharePoint.com
Bryon Wyly

Secure Pie Charts for SharePoint

For those of you that need more than one secure pie chart on your page, I have a new article on eusp to help you out.

http://www.endusersharepoint.com/2010/06/18/multiple-secure-pie-charts-for-sharepoint/

Posted 23-Jun-2010 by Bryon Wyly
Riley

Secure Pie Charts for SharePoint

I'm confused. If I use this method:

http://sharepointjavascript.wordpress.com/2010/05/04/interactive-charts-using-google-visualization-api/

Is any of my data sent to Google? Is this secure?

Thank you,

Posted 28-Jun-2010 by Riley
EndUserSharePoint

Secure Pie Charts for SharePoint

Your data will not be secure if Google API is used. However, an alternative is to download the Yahoo API, store it in a document library and reference that from your scripts. -- Mark

Posted 28-Jun-2010 by EndUserSharePoint
Christophe

Secure Pie Charts for SharePoint

Mark, please allow me to disagree with your comments:
- why would data not be secure with the Google visualization API? Aren't you confusing it with the Google chart API (see my comment above)?
- AFAIK the license doesn't allow you to download the Yahoo API. You need to call it from the Yahoo site, as done by Bryon in the post.

Posted 28-Jun-2010 by Christophe
EndUserSharePoint

Secure Pie Charts for SharePoint

Christophe, You are correct, I was talking about the Google Charting API. Regarding the Yahoo API, it is available for download. Mark

Posted 28-Jun-2010 by EndUserSharePoint
Christophe

Secure Pie Charts for SharePoint

So to answer Riley's question, security is not an issue when using the visualization API. No data is sent to Google.

Thanks for correcting me on the Yahoo API.

Posted 28-Jun-2010 by Christophe
malati

Secure Pie Charts for SharePoint

Nice article.

It work for me also. However when I try to access the sane sharepoint page where chart is displayed from other machine or computer it is not displaying the same.
The webpart is not displaying any image of chart on other computer exceplt mine.

What was the reason? It will be great help if you answer my query.
Thanks in advance.

Posted 18-Aug-2010 by malati
Lukes ftp storage

Secure Pie Charts for SharePoint

If your running scripts locally or have downloaded the API then there is pretty much no security problems at all, especially if your not connected to the net.

Posted 07-Sep-2010 by Lukes ftp storage
Frank

Secure Pie Charts for SharePoint

I'm working on a project that is requiring our hospital staff to vote for a new logo. We are using MOSS and I set up a site to display the 5 logos and a 'click here' link to open a voting form. I'm trying to think of a way to count the votes without having to 'manually' count them. The form was created using InfoPath and when a person clicks the 'Submit' button; it goes to a mail group of 5 people. "Is there a better way of doing this? I would like to using the 'Secure Pie Charts for SharePoint' if possible. Hope someone can help.
Thanks

Posted 08-Jun-2011 by Frank
Frank

Secure Pie Charts for SharePoint

I'm working on a project that is requiring our hospital staff to vote for a new logo. We are using MOSS and I set up a site to display the 5 logos and a 'click here' link to open a voting form. I'm trying to think of a way to count the votes without having to 'manually' count them. The form was created using InfoPath and when a person clicks the 'Submit' button; it goes to a mail group of 5 people. "Is there a better way of doing this? I would like to using the 'Secure Pie Charts for SharePoint' if possible. Hope someone can help.
Thanks

Posted 08-Jun-2011 by Frank
FTP Hosting

Chart

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.

Posted 15-Jun-2011 by FTP Hosting
Frank

Charts

Can you show me (everyone) how you did it?
Thanks

Posted 15-Jun-2011 by Frank
andyzytas

Thanks

Worked like a charm....

Posted 19-Aug-2011 by andyzytas
jay

Piechart issue

Hi Bryan the .js files uploaded in the library are not getting accesed by the code. can yo tell me what might be the issue was?

Posted 11-Sep-2011 by jay
confused

Beginner's question

Is there a more step-by-step version of these instructions anywhere? I followed all instructions above but all I see is the code in the content editor. Admittedly, I am not a programmer, so I'm sure I'm doing several things wrong.

Posted 17-Oct-2011 by confused
Rack Mount Monitor

Amazing

It's always amazing to me to see how new technology is adopted by influencers across different 'charts' like YUI with Java Scripts. Well there is one issue with the chart being smaller then the legend in my case. Is there anyway we can make chart bigger? I usually like to say well done to winner but cannot see who it is on the blog challenge. The wise man is he who respects time and does all the things he wants to do before it’s too late!

Posted 06-Apr-2012 by Rack Mount Monitor
asem

other types

how could we use teh same code but with diffrent chart types, can you provide us with example please?

Posted 26-Jun-2012 by asem

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: