I've talked a lot about how the visuals in Silverlight can be modified away from the code behind.

Here's the Silverlight example for a databar with a cleaned up databar (more Vista/XP like) and some added animations.  I did this all in Blend - no change to the code from the last post.

It looks better now, huh?  The animation involves popping up the bottom "funny" glass, flashing a red light repeatedly and animating the gloss on the black metric glass.

I'll post the animation effects later.

Extending the idea from the last post, here is a DataBar example.

This example is the same basic code from last time, but just cleaned up using Blend.

Here's the code to modify the value of the bar, value and metric name...

Next time we will talk about how to bind this data to an XML data island.

OK, so now that you have some rudimentary understanding of Silverlight, what can we do with it concerning BI?

This quick lesson will be to get you familiar with the moving pieces of Silverlight, Visual Studio and Blend. At a high level you use Blend to draw or compose the parts you are going to articulate.  You use VS to embed these parts with values at run time and Silverlight takes care of making this cross platform and lightweight.

For this simple example I'm going to use a VB.Net example, but like I said earlier, you are not going to find a lot of VB.Net examples in the Silverlight blogosphere, so pick up a good C# book.

Fire up Blend (v2 - August Preview) and Click New Project - you'll see a screen like this...

Click the last panel (Silverlight App, .Net "Orcas") and select VB as a Language, click OK.

That will drop you into the designer.  If you are not good at drawing, this environment will feel alien at first.  Remember, this is an Object based, XAML world, not pixel based.  It's more like PowerPoint and Visio than Paintbrush.

The white canvas represents the Silverlight background and you can place different objects onto this background.  For now click on the Box object in the Tool Palette and draw a box on the canvas.

You'll notice that there is a solution explorer to the right of the screen, much like VS has.  Click on the Box and you'll see familiar handles for resizing and rotating the selection.  Now click the Properties Tab, located to the right of the Project tab on the right side.

You'll see this...

I applied a black to blue gradient, but you can do whatever you want.  All of these properties can be adjusted at run time, which is why this is powerful for BI.

You'll notice that the Design surface has a Design and XAML button on the top right of the canvas.  The XAML button will show you the XAML created by the designer for you.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">

<Grid x:Name="LayoutRoot">
<Rectangle Stroke="#FF000000" StrokeThickness="3" HorizontalAlignment="Left" Margin="30,30,0,0" x:Name="Box" VerticalAlignment="Top" Width="213" Height="135">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF0406FF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>

The x:Name element is critical - it's how you reference the properties later in VB or C#.  You can name these controls anything you want in the designer and should so you don't loose your mind later.

Now, you can press F5 or do a Project, Test Project to see what it will look like to the end user.  Pretty neat, huh?

OK, now let's build it.  Go to Project and click Build Solution.  Close Blend.

Go to your Documents folder and open Expression.  You'll find the Blend projects there - double-click on the Project and open it in VS 2008.

OK, here's where it gets interesting...

You'll notice the XAML files are included in the project, you can right click and open these XAML objects back up into Blend and modify the design.  Now you'll start to understand the power of having a designer and developer work side by side on projects, as long as the basic names don't change, the styles, animation and cool factor can be worked on independently.

Double-click on the Windows.XAML source and you'll notice that the Class Window1 initializes everything for you.  You can reference the Box Object and modify the properties from here.

like so...

Me.InitializeComponent()
' Hide the Box
Box.Visibility = Windows.Visibility.Hidden
' Show the Box
Box.Visibility = Windows.Visibility.Visible
' Change the Box...
Box.Width = 100
Box.Height = 10

...and when you hit F5, you'll get this...

OK, so we will start down the BI track later in the week, but now you start to see how this can work with Sharepoint or other web based environments and that your ability to create graphics that adjust their appearance based on data values is within grasp.

In the near future we will cover...

• Adjusting position programmatically
• binding to data
• a scorecard app
• a data bar app
• a sparkline app

Let me know your thoughts...

As I mentioned a week or so ago, I am currently in the process of evaluating Silverlight for BI purposes.  Its lightweight nature and cross-platform capability bring new visualization features that have been difficult to tap for the masses to this point.

What is Silverlight?
There is a lot of confusion about this technology. You can read what Microsoft says officially here:http://www.microsoft.com/silverlight/, but for my money, Silverlight is a subset of WPF (Windows Presentation Foundations) and .net code that is lightweight and cross platform.  Sophisticated 2D and 3D capabilities are now possible for the average programmer.  Much like the environment that materialized around VB 3.0 back in the early 1990's we find ourselves in a wide open space with the question of "what is the best way to do something?" - the question of "can I do this?" is now answerable.

Silverlight is currently in two different versions...

Silverlight 1.0 - Mostly about lightweight, high quality video encoding and playback.

Silverlight 1.1 - Includes a small .Net 3.0 engine and supports managed code like VB and C#

For our purposes, we are specifically interested in Silverlight 1.1

Installing the Stuff
First, you are going to need to download some alpha code.  All of the links you need are found here...

http://www.microsoft.com/downloads/thankyou.aspx?familyId=b52aeb39-1f10-49a6-85fc-a0a19cac99af&displayLang=en

Specifically, you will need Blend 2 (August) and Visual Studio 2008 (also known as Orcas).

Microsoft Expression Blend 2 August Preview

Microsoft® Silverlight™ 1.0 Software Development Kit Release Candidate

Microsoft Pre-release Software Visual Studio 2008 Beta 2 Professional Edition

MSDN Library for Visual Studio 2008 Beta 2

Microsoft Expression Design Free Trial

What language?  VB or C#?
I am a VB programmer and I don't make any apologies for it - most business developers know VB and it is a common denominator in most companies for development.  In the case of Silverlight 1.1 you will find it useful to pick up a book on C# and start to become familiar with it.  When possible, I will translate C# to VB for this audience, but initially we will be looking at C#.  Mostly because of WPF's roots in WPF and DirectX have attracted many C# devs and most of the examples are found in C#.

In the next few postings I'll step through some capabilities but here's a round up of some great examples to whet your appetite.

Examples:

Mind Map Visualization http://blogs.msdn.com/synergist/pages/silverlight-map.aspx

Surface, Picture Visualization http://silverlight.schwarz-interactive.de/ex04/default.html

Silverlight Airlines http://delay.members.winisp.net/SilverlightAirlinesDemo/

Physics XBAP Application http://www.chriscavanagh.com/Chris/CJC.Bullet/BulletDemo1.xbap

http://www.tafiti.com

Microsoft recently released the Technology Demonstrator for Silverlight and Live Search called Tafiti (Swahili for "To Research")

And a really cool, rotating 3D view in a tree...

It's clear from this demonstration that the days of the search engine bringing back thousands of 'dumb' pages are limited.  Visualization can do a lot to fix the searching the search engine problem.

http://research.microsoft.com/ivm/HDView.htm

This is some great breakthrough work by MSR on gigapixel photography.

http://crazyegg.com/

This is an interesting way to track the behavior of web visits.  Warm colors are more frequently clicked areas.  If you animated this over time on a page like World News you could actually see popularity morph.

http://www.time.com/time/covers/20061030/where_we_live/

Time Magazine has a great graphic showing population spikes in 3D.  The density of population difference between Kansas and Missouri and North and South of this point is pretty interesting...

http://www.marumushi.com/apps/newsmap/

The size of data blocks is defined by their popularity at the moment.

http://www.bella-consults.com/sound-pattern

This is a cool idea - click the link above and click Play All - a tone is used as an Audio glyph for magnitude up and down.  Very interesting idea...perhaps BI for the seeing impaired.

This summer I've done more than my fair share of RS visualizations and have learned quite a bit about what works and doesn't.  Here are some tricks to help you make your way through the forest of "cell-based" data marks in Reporting Services.

Plop a matrix on the layout and place this code call in the value property for the data field:

=code.sGradation(Fields!MyValue.Value,100)

Where Parm1 = value to Plot, and parm2 = Maximum Value (can be literal, a Max, or any calculation you want)

You can also apply the minibar code that I published earlier this summer here to make the visual on the right side - same basic principles.

You add the custom code to the report under Report properties/Code

Public Function sGradation(fValue as double, fMax as double) as string
Dim sResult as string

' We start out with nothing...
If fValue < 0 then
fValue = fValue * -1
sResult = String.Format("#{0:x6}",rgb(1,1,(255/fMax)*fValue))
else
sResult = String.Format("#{0:x6}",rgb(0,(255/fMax)*fValue,0))
end If
' Return the String...
Return sResult

End Function

And here's the minibar code - just for fun...

Public Function sMiniBar(fValue as double, fMax as double, iLength as integer) as string
Dim sResult as string
Dim iLoop as integer
Dim fPercentage as double

' We start out with nothing...
sResult = ""

' Each part is this big
fPercentage = iLength/fMax

for iLoop = 0 to (math.abs(fValue) * fPercentage)
sResult = sResult & "g"
Next iLoop

' Return the String...
Return sResult

End Function

A few weeks back Janne Pyyko published a Gantt chart that uses similar concepts...

The Gantt chart is overloaded with another channel of information.

Here's how you might do it with RS...

So, this won't win any beauty contests - let's see how close we can get to Janne's representation...

If the fValue is zero then I pass back Transparent, else scale the blue to match the scale, I'm gonna have to do something about the contrast of the font color to background....

OK, so bringing up the luminance in the Green Channel a bit we start to look like this...

Here's the code - the scaling could be more generic, but you get the idea.

Public Function sProjectGrad(fValue as double, fMax as double) as string
Dim sResult as string

' We start out with nothing...
If fValue = 0 then
sResult = "Transparent"
else
If fValue < 0 then
fValue = fValue * -1
sResult = String.Format("#{0:x6}",rgb(100,0,0))
else
' This is Yucky - feel free to improve it - trying to get light cyan and dark cyan is tough... 
sResult = String.Format("#{0:x6}",rgb(255-((fMax/255)*fValue),230-((fMax/50)*fValue),1))
end if
end If

' Return the String...
Return sResult

Over the last few weeks I have been investigating Silverlight and over the next few months I am going to be publishing my experiences of applying this amazing technology to Business Intelligence.

http://www.clicktracks.com/insidetrack/articles/kirk_analytics.php?source=nw%20s072007

What? You don't know about the Red Shirt Phenomenon? Well, as any die-hard Trekkie knows, if you are wearing a red shirt and beam to the planet with Captain Kirk, you're gonna die...

http://johanneskopf.de/publications/gigapixel/paper/FinalPaper_0371.pdf

http://www.snibbe.com/scott/public/youarehere/index.html

You Are Here tracks and displays the paths of visitors traveling through a large public space. The system displays the aggregate paths of the last two hundred visitors along with blobs representing the people currently being tracked.

Here's the set up in the physical environment... an array of overhead cameras to visually record actions throughout the hall and a computer that integrates the images and tracks people's paths. The overhead tracking is accomplished with an array of six networked firewire cameras:

http://ieeexplore.ieee.org/Xplore/login.jsp?url=/iel5/38/34643/01652919.pdf?isnumber=34643&prod=JNL&arnumber=1652919&arSt=+14&ared=+18&arAuthor=+Ware%2C+C.%3B++Arsenault%2C+R.%3B++Plumlee%2C+M.%3B++Wiley%2C+D.

Here's an interesting group of visualizations that track the underwater behavior of large marine mammals. the ribbon’s center is the pseudo-track center tracing the whale's movements in time.

• Twisting shows roll behavior along the trajectory of travel
• a pattern of chevrons on the top surface of the ribbon reveals travel direction & gives an additional orientation cue.
• the sawtooth’s amplitude on top of the ribbon reveals the amount of angular acceleration at any given instant.

This visual representation reveals several interesting behaviors regarding swimming & foraging patterns, such as energy conservation & so-called bubble-net feeding (the whale swims in a circle at about 30 meters depth emitting bubbles from its blow hole. the bubbles form a net containing the fish and the whale then lunges up with its mouth open to engulf the trapped fish).

Colin Ware, Roland Arsenault, Matthew Plumlee, David Wiley, Stellwagen Bank, Visualizing the Underwater Behavior of Humpback Whales, IEEE Computer Graphics and Applications, July/August 2006