Simple DVWP-Based Graphing in SharePoint
Anyone who follows my blog or knows me professionally knows that I love working with the Data View Web Part (DVWP) in SharePoint. It’s the Swiss Army knife of Web Parts, it’s a dessert topping, it’s a floor wax. Yes, it even can help you graph your data.
I’ve posted before about this technique for showing simple bar graphs using DVWPs, but I’ve just added a new demo page to our Sympraxis Consulting demo site based on a suggestion from Mauro Cardarelli.
Think about how a simple graph like this can enhance a dashboard for a project or a topic area by graphing things like discussion posts by topic, tasks by days overdue, or, as in the demo, a sales pipeline.
Using a simple DVWP, we can graph list data in slick ways. By clicking one of the buttons, a new sort column is passed back to the page on the Query String and the graph changes to reflect the selected column.
This demo shows data from a single list, but using an AggregateDataSource, you can also graph data from multiple, related lists.
That’s great Marc, thanks for posting.
I see things like this an wish I understood more about how to make it work, and adapt the code to my list. I am impressed!
I’d be happy to try to help you understand it! Fire away with questions. You can use the Contact page if you want to send me code to look at.
M.
Hi Marc,
I saw from one of your older posts on the MSDN site that you can use the buttons to filter the DVWP by date.
I want to create buttons to filter by “Last Week”, “Last Month”, “Last Quarter”, etc. Now I’ve tried to use the code you pasted on the blog but I honestly don’t know where to put it so I keep getting different errors. Some about a processing type, some about no valid xsl template and the last one about unable to resolve the “URL”.
var startDateObj = document.getElementById(“startDate”);
var endDateObj = document.getElementById(“endDate”);
window.location.href = '' +
‘?StartDate=’ + startDateObj.value +
‘?EndDate=’ + endDateObj.value;
Kindly assist please.
Thanks.
Latte.
Latte:
It doesn’t look like your question is about this post, per se. What you will want to do for this method is to pass the value on the Query String back to the same page and have the DVWP filtered by whatever valiue. This will require some custom XSL work.
The example that you posted in your comment will grab the values of the elements with ids of startDate and endDate and pass them on the Query String back to the current page (window.location.href ). It’s a good starting point for what you want to do. You’ll also need to do the date arithmetic either in your script of the DVWP’s XSL to figure out what the “Last Week”, “Last Month”, “Last Quarter” concepts actually mean from a start and end date perspective.
M.
Hi Marc,
This is great and I have tried to adapt your code to my needs, the problem that I am having is that grouping isn’t working for me, each row is displaying no matter which attribute I pass in. I have tried to folow your script so I just can’t uderstand why the grouping is not working.
Any suggestions?
Thanks,
Sheila.
Sheila:
It’s hard to say without parsing your code. As you can see on the demo page, it works with my lists constructs, so odds are that you just haven’t changed something to make it work with yours.
M.
Hi Marc,
I’m so close with this, the DVWP works perfectly when I select Title, whihc is pulling each item from my list, the problem is when I need to group. Using your demo detail, The Title view is correct, but why I select say Region, I am getting the same number of rows as the Title view with the Project Value amount per item listed although the graph length looks to be correct
By Title
Prop-000196 €300,000
Prop-000210 €300,000
Prop-000254 €300,000
Prop-000199 €250,000
Prop-000209 €200,000
Prop-000240 €200,000
Prop-000249 €200,000
Prop-000252 €200,000
Prop-000201 €150,000
Prop-000208 €100,000
Prop-000259 €100,000
By Dept
111 – Centre for Gender and Women’s Studies €300,000
111 – Centre for Gender and Women’s Studies €250,000
111 – Centre for Gender and Women’s Studies €150,000
111 – Centre for Gender and Women’s Studies €200,000
111 – Centre for Gender and Women’s Studies €200,000
111 – Centre for Gender and Women’s Studies €200,000
111 – Centre for Gender and Women’s Studies €300,000
202 – Classics, School of Histories & Humanities €100,000
202 – Classics, School of Histories & Humanities €200,000
202 – Classics, School of Histories & Humanities €300,000
202 – Classics, School of Histories & Humanities €100,000
grouping not working?
I could send you the xsl template detail
Thanks for your help,
Sheila.
Sheila:
It does look like you are close. Why don’t you post your code and a description to http://sharepoint.stackexchange.com and post a link? That may help others.
M.
Hi Marc,
I have sorted this out and all is working beautifully. I definitely had a blind spot when it came to checking your code and mine. After a short break I went back and spotted it straight away. Next task to get eyes tested!.
Thanks,
Sheila.
Great!
M.
Hi Marc,
This is awesome, however, in trying to replicate I am experiencing an issue. I recreated some of the data in the Sales Opportunity list to test the code and I am finding that the following part of the code doesn’t resolve unless a select statement is there. Can you suggest something to solve this issue?
Bert:
If you posted code, Akismet stripped it out. Which part are you having problems with?
M.
Hi Marc,
Thank you. This is the part of the code (xsl:param name=”GraphBy”), that doesn’t seem to get updated unless I add a select=, but then it loses the functionality of selecting the different tabs.
Hi Marc,
I was able to solve the issue that I was having with the quote, I added additional information to the Parameter Binding, and that got it to work.
Thanks,
Bert
Glad you got it!
M.