Use JQuery to Add Charts to Your Data Views
Guest Author: Omar Stewart
While at SPC 09, I attended an excellent session hosted by Dustin Miller on building composite apps using SharePoint Designer 2010. In one portion of the segment he used a JQuery charting library to add some visuals to a plain old Data View Web Part.
I’m going to show you how to quickly do this using SharePoint Designer 2007. This is very useful for quickly jazzing up a data-view, while providing all the benefits of graphing / visualizing your data.
We will go from this….
To This….
In just a few simple steps.
This first thing to do is create our list. This could be a task list, a bugs list, anything you want displayed in your data view.
For this example, I’ll be logging our team members’ interest in the iPad, based on the amount of web activity related to the iPad ..
Fill in some sample data….
Now we will open SharePoint Designer 2007, open our SharePoint site, and create a new .aspx page.
Now we can start building our data view.
From the Menu Bar click Data View,” Insert Data View“. This will expose the data source library tab..
I’ll now scroll down to the “Gig Werks Team interest in iPad” List, click on the list, and then click “Show Data”.
Towards the bottom of the screen, the fields of that list will be visible.
We now need to select the fields we will want in our data view. Hold down CONTROL and click to select the Name, all the other fields we want in our view, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, and FRIDAY.
Now that we have them selected, click the Insert Selected Fields as… button, then click “Multiple Item View” because we want all the users to show in our view.
We should now have a table displaying all the data from our list in our new data view web part. This is however, not the most fascinating thing to look at.
We can make simple changes that will make this much easier to read, and provide for an overall better user experience. With a simple chart, what used to take a user minutes to read, can now be parsed at a quick glance.
The first thing we need to do, is prepare our data view, so it can be parsed by the library we will be leveraging. With the data view selected, Click Data View, Data View Properties, then click the Layout Tab.
Scroll down to select the Comma Separated View Style.
Our User names are now displayed as headings, with our data displayed as comma separated values underneath.
We now need to wrap our comma separated values in a container, so our graphing library knows exactly what data to use to construct its graph
Use your cursor to Highlight a single row of values, making sure you don’t select the user name, just the numbers.
Click EDIT >> Quick Tag Editor. We’ll wrap the Tag in a SPAN and give it a class of “GraphThis”.
<SPAN class=”GraphThis”>
The row of values should now be wrapped in a span with a class of “GraphThis”.
We can now pass this along to JQuery and have it graph our data.
Switch to Code View, and scroll to the <head > section of the page. You can either download or link to the JQuery, and Sparkline libraries. For this example, we’ll download them and drop them in to the root of our website.
Lets add the following Script references to our page:
You can download the Jquery Library Here:
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
You can download the Sparkline Library Here:
http://omnipotent.net/jquery.sparkline/1.5.1/jquery.sparkline.min.js
<Script src="jquery-1.3.2.min.js"></Script>
<Script src="jquery.sparkline.min.js"></Script>
Now that we have our libraries referenced, we can begin to put them to work…
Lets open a new SCRIPT tag and begin our JQuery. We use “$(document).ready()” to tell JQuery we’re ready to start querying our document
<SCRIPT> $(document).ready(); </SCRIPT>
Inside the ready method, we’ll add our function which is what we want JQuery to execute, once we’ve told it we’re ready to use it.
<SCRIPT>
$(document).ready(
function() {
//Function for JQuery to execute will go here
}
);
</SCRIPT>
For our function, we want to tell JQuery to find everything with a class of “GraphThis” and then have Sparkline turn it into a Graph.
JQuery makes this extremely simple to do. Here’s the syntax:
$(”.GraphThis”).sparkline();
..Thats It!! Our entire script should appear as follows:
<SCRIPT>
$(document).ready(
function()
{
//Function for JQuery to execute will go here
$(".GraphThis").sparkline();
}
);
</SCRIPT>
If you save, and preview your page in browser, you should now see a list of user names, along with a small line graph representing the values associated with them.
The Sparkline API makes it very simple to adjust these graphs, so lets make these the graphs a little bigger.
Lets go back to our code and add pass some parameters to Sparkline in order to set the width and height of our graphs.
$(”.GraphThis”).sparkline(’html’, {width:’300px’, height:’50px’});
Our final script should look like this:
<SCRIPT>
$(document).ready(
function()
{
//Function for JQuery to execute will go here
$(".GraphThis").sparkline('html', {width:'300px', height:'50px'});}
);
</SCRIPT>
Save and view your page in browser, you should now have a nice viewable graph to accompany your data.
As a final touch, I’ll give the page a title and attach it to my SharePoint site’s default master page. I’ll also change the data view properties, so an edit button is automatically included in the data view.
Now just by taking a quick look at our data view, it now becomes obvious how extremely interested Kevin is in the iPad.
I hope this has been a useful introduction to JQuery in SharePoint. JQuery is an extremely powerful library for customizing your web sites, SharePoint is no exception.
-Omar Stewart
Guest Author: Omar Stewart
Omar Stewart is a Designer/Developer for the Award Winning SharePoint Solution Provider that is Gig Werks. Join Omar in his journeys into the wonderful world of SharePoint, hopefully you can learn a thing or two from each other.
Awesome!! Very well done write up Omar.
There have been posts before about similar techniques with pie and bar but none as well documented. These screenshots are perfect! It feels like I’ve already created one after just a glance down this page. Keep the good ideas coming.
I agreed with the awesome write up. I just created this on my test site following your step by step instruction.
Omar, have you heard about my “HTML Calculated Column” method? It does the same but without the need for SharePoint Designer:
http://blog.pathtosharepoint.com/?s=sparklines
Also, note that the current version for jQuery is 1.4.2 .
Me again :-)
I’d also like to point out that it is important to define a common scale, or else you cannot really compare the different inline charts.
In the above example, the chart for Kevin should be ~10 times bigger than the one for Ricky.
To get a common scale, you can specify this as per the below example.:
$(”.GraphThis”).sparkline(’html’, {chartRangeMin: 0, chartRangeMax: 300, width:’450px’, height:’75px’});}
Cheers
Jim
@Jeff : THANKS!! Also, thank you for everything I’ve learned from your blog, It’s awesome! =)
@Dinh: Thanks Dinh, glad to help.
@Christophe: I use your calculated method too! Its great, thank you.
I have a question. I cannot install the js file in our Sharepoint server as its centrally administrted by an IT team. Without having to install the js, is there any alternative way to make this work.
I was unable to complete this as I got stuck with the js stuff. It would be great if you could suggest an alternative way
Create a document library on your SharePoint site. I call mine Resources-jQuery. Download the core jQuery script from http://jquery.com/ (current version is 1.4.2) and put it in the library. Point your scripts to that library and you’ll be good to go. No need for IT to do anything. — Mark