Multiple Secure Pie Charts for SharePoint

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.

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.

You can download a text file of the code at http://americancapital.brinkster.net/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--></pre>
<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-->
<tbody>
<tr>
<td class="tdchart"></td>
<!-- To make another chart, copy this whole row then change the id="chart1" to id="chart2"-->
<td class="tdchart"></td>
</tr>
</tbody>
</table>
<pre>

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:

</pre>
<table>
<tbody>
<tr>
<td class="tdchart"></td>
<td class="tdchart"></td>
<td class="tdchart"></td>
</tr>
</tbody>
</table>
<pre>

HTML for four Charts on 2 different rows

</pre>
<table>
<tbody>
<tr>
<td class="tdchart"></td>
<td class="tdchart"></td>
</tr>
<tr>
<td class="tdchart"></td>
<td class="tdchart"></td>
</tr>
</tbody>
</table>
<pre>

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 container 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. --></pre>
<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>
<pre>
Advertisements

19 Responses to Multiple Secure Pie Charts for SharePoint

  1. Shalin Parmar says:

    Awesoem article Wyly Thanks so much!!!!

  2. Carsten Pihl says:

    Very nice script. Easy to follow!
    Thanks!

  3. Marco G. says:

    How can I add more Graphs on the same pages, the second one doesn’t show up, only the first (followed your howto and the first one ok).

    • wyly says:

      What is the keyword your using for chart one and chart 2. Make sure they match the group-by column on the sharepoint list, then check your capitalization for the second keyword and the second group-by column.

      If that doesn’t work, let me know.

  4. Marco G. says:

    It only shows as a single graph if I create more views and switches graphs when I switch views.
    As an example, if I have two columns (“Types” and “Classification”) I can create a “View 1” in which I group by “Types” and then “Classifcation”.
    This will show correctly the Graph 1 (by Types). Now I have to create a “View 2” in order to show the other graph (by Classification). In this “View 2” I will need to group by “Classification” and then “Types”. What I’m trying to achieve is to have both graphs (and more of them) in a single page.

    • wyly says:

      Marco,
      The way that the code works, it requires there to be a seperate grouped list for every chart that you wish to use. You cannot have two groupings on the same list.

      I would suggest making a seperate view for the second graph and then setting it to “hidden” if you don’t want the list to show up to the users on the page. The second graph will still work AND the list powering it will be invisible. Hope this helps.

      Bryon Wyly

  5. Marco G. says:

    Following your last suggestion i was able to make it work, very nice! On chart is smaller than the other and colours as I’ve understood cannot be customized.
    If you have any other suggestions for these two topics maybe you could add them to this article.

    The way I did is to use my first list “New Graph 1” (the one that generates the first chart) as the base of a list template. Then I create a new list “New Graph 2” based on that template. The “1” I group by Type and set this to default view (“View 1”) and the other I order by Classification and set this to default view (“View 2”). Now I see both charts!

    Thank you thank you thank you!

    • wyly says:

      Marco,

      I am glad you like the solution and I am glad you got it to work.

      You can resize the graphs so they are the same size, however it is more of an art than a science.

      Try rereading step 4 and change the width and height of one of the graphs in the styles section till you get them roughly the same size.

      Bryon Wyly

  6. Silvia says:

    Thanks for this… I have one issue: my graph does not work on Firefox. It works fine on IE. Any tips?

  7. Frank says:

    We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ if possible. One of the main points is viewing the real-time current workload within the facility and literally watch it change up and down (may have to click “refresh”/F5).

  8. AH says:

    Is there a version optimized for black background or can I customize this myself?

  9. JustinT says:

    Thanks, this is great! Can you please explain how to edit legend colors and also is it possible to create a bar chart or a different type of chart?

  10. Stian says:

    Hi,
    Thanks for this 🙂

    One question; can I name the individual pie charts?
    I’m building a page where I have to display a lot of charts, and it would be less confusing for the viewer if each chart had its own name.

    Thanx 🙂

  11. Juanitakay says:

    what happened to the ability to download the zip file?

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: