Guest Author: Bryon Wyly

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

This 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 page inside SharePoint. Like the first version, this code does NOT require any outside api’s and will NOT send information over the internet like the google charts will.

If you do not need the security, I would highly recomend you use Google APIs instead since they are alot easier to work with when you make multiple pie charts.

Previous Posts I have done on Dynamic Pie Charts for SharePoint using Google’s APIs:

Summarizing Multiple List Content into a Single Pie Chart

Make a pie chart that shows percents

Adding Graphs, Bar and Pie Charts to SharePoint

Why YUI Charts are hard to Use:

The main is reason is sizing. The charts have a mind of their own on what size they will be. If you are going to use a single chart, it’s not that big of a deal, but if you have two charts, they will invariably be 2 different sizes when you get them up and running. They also can changes sizes if you later on add more items for the pie chart to group by. I will show you how to change the pie chart sizes in this tutorial, but it is mostly a trial and error process.

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. These Charts work on the basis of how you group your lists in SharePoint. In the following example, I made a list of projects and grouped it by ‘Status’ and ‘Category’. Notice that the ‘Status’ chart is hidden, that make it possible to chart a list without it actually being visible.
   
   
   2. Add a content editor web part and copy and past the below code into it.

   You can download a text file of the code at http://www.sharepointcanvas.com/spc/files/MultipleSharePointPieCharts.txt

   * note: Currently wordpress.com is not letting me save the code. Please download the code from the above link

   3. Set the keywords.

   The keywords for the charts is at the very top in a div tag. look for:

   <div id=”keyword_chart”>Status,Category</div>

   and change ‘Status,Category’ to the names of you groupings on your SharePoint Lists (ie Product,Customer,Order). Remember that Capitalization does matter.

   You may do the same with:

   Where you want the legend to show up. Your options are Left,Right,Top or Bottom for each chart

   Whether you want a total count of each item., percent or no numbers at all in the legend. Enter wither count, percent or none for each chart

If you have more than two charts:

Two or more charts requires some additional work. Find the following table in the code:

<!--Customize the number of charts here-->
<table>
<!-- to make another row of charts, copy  the next 4 rows of code and paste it below the </tr> then rename id="chart1"  to id="chartX" X being count of charts you have-->
<tr>
<td class="tdchart"><div id="chart1" class="chart1"></div></td> <!-- To make another chart, copy this whole row then change the id="chart1" to id="chart2"-->
<td class="tdchart"><div id="chart2" class="chart2"></div></td>
</tr>
</table>

Notice that there are two examples right below in the code. One for three charts on one row, another for two charts per row on two rows. Use these as examples to display the charts the way you wish. Remember you MUST have a div (<div id=”chart1″ class=”chart1″></div>) INSIDE a td cell (<td class=”tdchart”><div id=”chart1″ class=”chart1″>) with a unique sequential (1,2,3,4…) id for EACH chart.

HTML for three charts on the same row:

<table>
<tr>
<td class="tdchart"><div id="chart1" class="chart1"></div></td>
<td class="tdchart"><div id="chart2" class="chart2"></div></td>
<td class="tdchart"><div id="chart3" class="chart3"></div></td>
</tr>
</table>

HTML for four Charts on 2 different rows

<table>
<tr>
<td class="tdchart"><div id="chart1" class="chart1"></div></td>
<td class="tdchart"><div id="chart2" class="chart2"></div></td>
</tr>
<tr>
<td class="tdchart"><div id="chart3" class="chart3"></div></td>
<td class="tdchart"><div id="chart4" class="chart4"></div></td>
</tr>
</table>

4. Resize the Pie Charts.

Almost without fail, you will need to individually edit the sizes of the Pie Charts. You do this by finding the chart sizes in the styles right above the display table (see html below). Edit the corresponding Chart’s height and width, it may take some time. Edit .tdchart if you want to edit the size of the conatainer for all the charts.

<!--customize the size of the charts here add a new .chart1 - .chart2 - .chart3 and so on, for every chart you have. -->
<style type="text/css">
	.chart1	{float: left;width: 375px;height: 250px;}
	.chart2	{float: left;width: 450px;height: 300px;}
	.chart3	{float: left;width: 450px;height: 300px;}
	.chart4	{float: left;width: 450px;height: 300px;}
	.tdchart{width: 450px;height: 300px}
</style>

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.