**** I updated this post and the attachments when I noticed an error. ****
Most people who use WSS 3.0 most likely want to use some type of dashboard component on their sites. If you haven't seen it, there is a great document called "Application Templates Under the Hood" published by Microsoft in June 2007. (Get it here.) Page 24 of that document "Using Dashboards" deals with the Bar Graph used in many of the Fantastic 40 Application Templates. Our example references one of the bar graphs used in the "Budgeting and Tracking multiple Projects" templates dashboard.
If you have seen this but still find yourself scratching your head, I'm going to attempt to detail how to use this type of graph in a SharePoint list.
I don't claim to be able to teach you about xslt but I'll show you how to do this. After you do it once or twice you begin to understand how it all works. Good Luck
So what we want to do is create a bar graph. We have a list of issues or action items that has a field called "Status". The various "Status" categories are: "Contractor Action", "Customer Action" or "Completed". We want to show a bar graph that tells us:
- How many total items are in the list
- How many items in each category
- The percentage in each category based on total items
I'll do this in two parts:
1. Modifying the XSLT used to display the list data.
2. Use SharePoint Designer to create a data view and apply the style sheet.
The XSLT used to transform the data to the bar graph is available in the "Budgeting and Tracking multiple Projects". This is the document we will start with in performing this task. (Bar_Graph.xslt)
Let's take a look at the style sheet in IE will all branches collapsed:
In order to use this with your Data View (assuming you have created a list in WSS 3.0) you will need to know which columns you want to include in the Bar Graph. For example, let's say in the "Status" field of our list there are three category choices, A) Contractor Action, B) Customer Action or C) Completed. Additionally, we want to show the total items in this list and the percentage of those items in each of the three categories.
In the xslt file, we are concerned with only two areas: 1) "dvt_1.footer" and 2) "dvt_1.header", the other sections of the stylesheet can remain as is.
Let's start with "dvt_1.footer".
Expanding this section shows parameter and variable names.
The following parameters don't need to be changed………
<xsl:param name="ParentPath" />
<xsl:param name="Rows" />
We will focus on the variable names……….. The "Budgeting and Tracking multiple Projects" application presents three choices from the "Status" field:
- Active
- Resolved
- Closed
Our "Status" field presents three different choices:
- Contractor Action
- Customer Action
- Completed
Let's look at each variable in turn: (This is the portion that will "count" the number of items in each category)
<xsl:variable name="Active" select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status) = 'Active'])" />
The first thing we notice is the variable name "Active". Change the first instance of "Active" to "ContractorAction".
<xsl:variable name="ContractorAction" select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status) = 'Active'])" />
The next thing we notice is @Status. This is the lists field "Status", since our list contains a "Status" field we will leave this alone.
Finally we see another 'Active', change this to 'Contractor Action' (notice the variable name has no space between Contractor and Action, where the second instance does).
<xsl:variable name="ContractorAction" select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status) = 'Contractor Action'])" />
Change the next two lines; "Resolved" and "Closed" to our other two "Status" field choices; "Customer Action" and "Completed" in the same manner.
This is what we end up with:
If your list field is different, you would change @ Status to the your fields name. So I guess what's happening is it's saying, "in the variable "Contractor Action" go to the field "Status" and count how many items are marked "Contractor Action".
Moving to the next line we see the variable name "AllTasks" this will always remain as is.
Finally, the last three variable names you'll notice have "percent" in front of our category name (percentactive). (This portion will calculate and display the percentage of each category of the entire list)
Just like the first three variables, starting with the 'percentactive' change it to "percentContractorAction"
<xsl:variable name="percentContractorAction" select="$Active div $AllTasks" />
Again the same rule applies, variable name; no spaces.
***** This new if you have read this before*****
Also change select="$Active" to select="$ContractorAction"
*****End new content*****
Do the same for the remaining two categories; Customer Action and Completed. We should look like this:
Okay, let's move down to the next section; the "Table".
Each of the categories have a section that looks like this; below is the section for the category "Active". There are four (4) instances of the word "Active", change them all to "ContractorAction" with the exception of the first instance; it looks like this – Active: – This is the text label that will be shown on the graph. Change this to read – Contractor Action: -.
Looking like this:
Change the next two sections; "Resolved" and "Closed" to our remaining two choices; "Customer Action" and "Completed"
Finally, the "dvt_1.header".
Where you see "Overall Issue Status", change it to read whatever you want to title this bar graph.
Get the modified xslt doc here. *****this document has been updated*****
Okay, what we have done is modified the xslt to reference our "Status" field and the categories available in that field.
Below we see a bar graph already applied to a data view using the xslt we just modified.
The next article will show you how to:
- Create a data view
- Filter the data view
- Apply xslt to the data view
bburke