Category Archives: jQuery

Sparklines, more information in less space

Posted on by

For details on the upcoming Sparklines online workshop, see the end of this article, or click here.

Edward Tufte, who coined the term “sparklines”, describes them as “data-intense, design-simple, word-sized graphics.”
While traditional charts aggregate information from a full list, and are set off the flow of text, a sparkline pictures an individual item, and is directly embedded in the list.
You’ll find a good introduction to sparklines on this page from BonaVista.

The most common type is a line graph (hence the name), like in this screenshot from Google Finance. But sparklines come in various other shapes, as you can see from the (jQuery) samples on this page.

For example, you’ll use:
– line and bar graphs to track data against time
– progress bar or bullet chart to assess data against thresholds or objectives
– pies for categories (e.g. region, product line)
– discrete charts for status (project phases, game results)

Sparklines apply to many situations:
– enterprise dashboards (revenue, expenses, market share, all within one list)
– healthcare (patient stats)
– education (attendance rate, success rate)
– project management (issues resolution, costs)
– products/services dashboard (sales, support calls)
– transportation (passenger traffic, delayed flights)
– sports and games (won, lost or drawn)
– website stats: pageviews, visitors (cf. Google Analytics)
– baby name trends for a given year
– etc.

Sparklines can also be placed on supports other than lists, like maps, although I find this more difficult to read. Here is an example with the New-York subway.

How about SharePoint?

I already published last year a tutorial showing how to include Google sparklines in SharePoint lists. The Google approach is very convenient, but has its downside. First, in your corporate environment, you may not have access to the Google charts website. Then, even if you can access it, you may not like the idea that your data goes public, as you send it on the Internet to get the charts in return. If so, you’ll have to find an in-house solution to build your sparklines.
In a couple days, I’ll publish a tutorial to explain how to I created simple, homemade graphs for SharePoint lists (see screenshot below).

If you are wondering how I built the pie charts, check out this picture for a clue. More details after Thanksgiving…

To apply the tutorials, you’ll need to know about the “HTML Calculated Column”. For a refresher on this method, start with the post I published last week, and follow the links.

The above bar graphs and pies are basic solutions, but their great advantage is that they don’t have any external dependency.

If you are looking for more advanced charting capabilities, check out Gareth Watts’ sparklines plugin for jQuery. Back in March, I showed an example combining this plugin with SharePoint.

Inline charts are the central theme of our upcoming live online SharePoint workshop, scheduled on December 2nd at 1 pm (EST). Mark Miller and I will guide you through the steps to implement these customizations. Like for the other workshops, you’ll receive a SharePoint sandbox, where you can directly try out the solutions.

Live demo: animated countdowns with Flash and jQuery

Posted on by

We started with the HTML calculated column, then we later extended the technique to JavaScript. Today is the turn of the jQuery calculated column!

To demonstrate this technique, I have included animated countdowns in a SharePoint list:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx

The list displays two countdowns, one based on Flash (from clocklink.com) and the other using the jQuery countdown plugin by Keith Wood.
The Flash countdown uses an HTML calculated column that contains an “embed” tag (the HTML can be found on the clocklink site). The jQuery countdown is a also a calculated column, which calls the jQuery countdown function.

Now, take a closer look at the demo: do you see a difference between the values displayed by the two countdowns? Can you explain why? Here is a clue: if you live in New-York, you should see the same time on both countdowns.

As usual feel free to use the comments section to ask for more details!

“jQuery animations in SharePoint” is a live, online workshop scheduled on November 17th at 1pm EST. We’ll talk about date and time in SharePoint, and each participant will receive a sandbox and step by step instructions to set up countdowns. The other animations featured in the workshop are scrolling news and image rotator, also based on jQuery plugins. For details and to register, click here.

Teaser: jQuery animations in SharePoint

Posted on by

On November 17, Mark Miller and I will host our live online workshop dedicated to animations in SharePoint.

The main featured customizations will be scrolling news and the image rotator. To give you a feel for what you’ll be playing with, I have created a live demo:
http://www.pathtosharepoint.com/Pages/Animations.aspx
[This is a mockup, I am still working on the final scripts for the workshop]

The engines behind these customizations are two highly acclaimed jQuery plugins: Scrollable and Cycle. There are also a couple others working behind the scene, like the Easing plugin (which creates the optional bouncing effect in the image rotator).

An important note: the focus of the workshop is the SharePoint UI, not jQuery. We’ll learn how to pull the content from SharePoint lists, and format it to feed the plugins. We’ll also see how to optimize the display of images to reduce bandwidth.

If you like what you see, feel free to use the comments section below, to give me feedback and ask for more details. We are very flexible, and we’ll adapt the workshop content to your needs!

The live online workshop is scheduled on November 17 at 1:00 PM (EST). I hope to see you there!

Rounded corners and dog ears

Posted on by

dogears

As I was working on the labs for my live online workshop, I did some experiments with the last release (v 2.01) of the jQuery corner plugin.

This plugin takes the edge off corners and replaces it with various shapes (rounded, beveled, notched, etc.). I have applied two examples – rounded corners and dog ears – to Web Part headers on this page:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx

The shapes are not always as neat as with other methods (that use images or the canvas element), but its ease of use and versatility make this plugin a excellent solution. Note that I said “not always”… the plugin is smart enough to apply the latest css standards if your browser recognizes them. To see this, try out the rounded corners of my above example in different browsers.

For the participants in the September 23rd “tabbed interfaces” online workshop, note that we’ll see how this technique can be applied to the Easy Tabs and the default SharePoint navigation.

If you want to try out this effect on Web Part headers, as in my example, here is the code I used (Only one line of jQuery!):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-WPHeader").parent().parent().parent().css("background-color","palegreen").corner("dog top");
</script>

(Remember to modify the script to point to your own copy of jQuery and jQuery corner)

Update [9/14/2009]: I have made a slight change to the code, it now works cross-browser: validated in IE7/IE8, Firefox 3.5, Safari 4.0 and Google Chrome (the initial code was IE only).

Color Coded Gantt View

Posted on by

ColorCodedGantt

Update [10/21/2009]: version 1.1 is available for download (see links below). Remember to set the jQuery path and the pictures path in the script before using it.

Craig Lowrie is a Network administrator at the Ear Science Institute (Australia). A couple days ago, he shared with me a very useful script, allowing to add color coding to SharePoint Gantt views.

Let’s start with the live demo (combined here with the Gantt slider):
http://www.pathtosharepoint.com/Gantt/

A SharePoint Gantt view is made of two sections: the Gantt view itself (not customizable), and underneath a “summary list” that displays the task properties. We have customized this view to display the priority levels.

Craig’s script works as follows:
– first, it scans the summary list to identify for each task the priority level.
– it then goes back to the Gantt view, and for each task it replaces the blue bar with the appropriate color (red/yellow/green). This is done by replacing the dozens of small blue images that make the Gantt view with custom images (yes, SharePoint uses one image per day!).

The files for this customization are available on my site’s download page (to download a file, right click on it and select “save target as”).
[09/15/2010: link updated to the new Toolkit location]

First, you’ll need to unzip BarImages.zip, and place the images created by Craig in a library.

Then you’ll need to place the script on the page that contains your Gantt view. You have two choices on the download page:
– either the script (ColorCodedGantt.txt) that you’ll paste in the source editor of a Content Editor Web Part
– or directly the Web Part itself (ColorCodedGantt.dwp) that you can import to your SharePoint page.

The last step consists in minor adjustments to the script:
– change the path to point to the library where you stored the images (PicturesPath in the script)
– The sample code calls the jQuery library available online from Google. You may want to link to your local jQuery library instead. Or remove the call if you already use jQuery on your page.

You can easily adapt the script to work with a choice list other than Priority. Simply replace (High|Normal|low) in the script with your own values.

Thanks for sharing Craig!

A workshop calendar loaded with demos

Posted on by

 ToolTip

I had planned to introduce my demo page featuring the EUSP Fall workshop calendar, but Mark Miller beat me to it. You can read his comments, and/or explore the page by yourself to try and discover all the featured customizations.

I’ll share more details in future posts. For now, here is the flat list of customizations, all added through the SharePoint UI (no SharePoint Designer, no server side change):
– Calendar displaying three months, not just the current month.
– Sundays have been removed (but we are open on SharePoint Saturdays!).
– The calendar height has been adjusted to fit in the page.
– Easy Tabs, that automatically generate the tabbed interface for the calendar months.
– Content types: workshops have a colored background, while a flag is displayed next to US holidays. Conferences have the standard SharePoint look.
– color coding based on the trainer’s name, for both the calendar views and the list views.
– Beauty Tips (jQuery plugin): there are many jQuery tooltip plugins around. I have selected this one for its ability to pull data from another page (in this case the display form) , and auto-position the popup in the largest available area – very useful in cases like mine where the popup has a significant size. Also, I love all the customization options. A great plugin!
– HoverIntent (jQuery plugin): another very useful plugin that analyzes your mouse movements. It waits until the user’s mouse slows down enough before triggering the tooltip.
– “learn more” button in the events list.

These customizations will of course be presented in detail in the upcoming workshops:
– Easy Tabs Interface, on September 23rd.
– Calendar solutions, on October 16th.
– Color coding and animations workshops, in November/December.

An experiment: tiny calendar + jQuery zoom

Posted on by

Tiny calendars look nice on a home page, but they have one drawback: their small size doesn’t allow to  display events.

In a previous post, I proposed two ways to deal with this issue, one being to include a zooming effect on the text.

Then last week I discovered anythingZoomer, a jQuery plugin that allows to add a zooming effect to any Web content (well, just as it says). It seemed like the perfect solution for my tiny calendar, so I decided to give it a try. You can see the result on this page:
http://www.pathtosharepoint.com/Calendars/Pages/CalendarZoom.aspx

This first attempt looks promising. I like the fact that the zoom keeps the clickable parts of the calendar. You can for example move to the next or previous month, or select a specific event.
There are still some issues though. In particular the zoomed view is not correctly aligned with the small view. To be continued…

An example combining Gantt view and color coding

Posted on by

 

Slider-ColorCoding

(click here for full size picture)

I wanted to share the above screenshot sent by Keath Montgomery, VP, Sr. Change Manager at Bank of America, along with his comment:

“Many of us who find the Gantt view to portray the best picture of project tasks also are not really fond of the list of tasks that appears below the Gantt.
Since you cannot remove it from the view in SharePoint, why not add a web part to make it more useful and informative at a glance by adding the Text to HTML Web Part to assign a color status to the task.
The above screenshot utilizes the “Slider “ Web Part to facilitate a flexible view of the Gantt and the Text to HTML Web Part to add a visual status to the task.”