Xcelsius Graph Drilldown

When using the chart drill down capability inside of Xcelsius, there is a limitation prohibiting the configuration of a multi-series chart to insert into the same range. In other words… Xcelsius will not allow a user to click on bars from 2 different series to trigger 1 action, which can be a problem.

To invoke this problem, enable drilldown, select an insert-in cell, change the series dropdown, and select the same insert in cell. You will get an error message that reads the following:

“Insert In Range overlaps with other series’ Insert In Rage/ Please select non-overlapping Ranges for each series.” There is a workaround to get this working using the “Insert Series In:” option. By capturing the series that is currently selected, we can perform a lookup to retrieve the correct data.

Download Source Files

Xcelsius Design with a Few Clicks: Skins

by Ryan Goodman

I have seen hundreds of dashboards that all look similar for 1 reason…People who use Xcelsius don’t want to spend a lot of time customizing the look and feel for their dashboard. So what happens when you assemble components on a screen and want your dashboard to take on a different look from the standard default Xcelsius look and feel?

Within Xcelsius there is a concept of skins, which simply changes the look and feel without effecting any functionality you have created within your dashboard. To change the skin, go to View>Change Skin. You are then presented with several skin names that will globally change how all components look. Note that there is a default color scheme for every skin, which can be changed manually or through Styles (View>Change Style.)

I will give a brief overview of each skin, and my personal opinion of how and when I use each one…


Aqua
Aqua is a skin that emulates the Apple skin used for web browsing and an older version of the operating system. Aqua uses a consistent blue color scheme, which people seem to like, but sometimes the gradients and visual effects can also be a little too much to visually digest. I like using this one sometimes because the out of the box backgrounds layer together nicely.


Aero
Aero is a aviator type of theme that shows the most when you look at the gauge component. The charts and components all have extra gradients and glare effects which may be a little over the top for some, but the default color scheme is vibrant and pleasing to the eye.


Elan
Elan is one of the original Xcelsius skins which use a somewhat monotone blue color scheme. I see Elan and Aero as similar skins, because there are limited out of the box backgrounds, and the graphs look similar.


Graphite
Graphite was released with version 4.5 and has a nice collection of backgrounds that can be mixed and matched. While the default colors are dark, the skin itself has nice looking charts. The only problem I find with this skin is some of the transparency for dropdown components.


Halo
Halo is by far my personal favorite simply because it does not have all of the gradients featured in the other skins. I am a minimalist at heart, so this is as close as I get with Xcelsius, but still gives some depth within the selector controls. Most people hate the default lime green color but, once I change that, it always looks clean.

Troubleshooting Tips for Xcelsius: Using Snapshot

by Ryan Goodman

Here is the situation…You build your Excel logic, import into Xcelsius, bind all of your components, hit Preview for the instant gratification Xcelsius brings, and your model does not work right. With many dependencies between Xcelsius component bindings and underlying Excel logic, it could be a nightmare to reverse engineer your model just to find that a VLOOKUP is formatted wrong, or your combo box is inserting into the wrong cell.

Here is a little trick of the trade for troubleshooting your model using a feature inside of Xcelsius called snapshot. When you hit preview, navigate to the portion of your dashboard where your error occurs. While in preview mode go to File>Snapshot>Back to Excel. You will then name your Excel file (do not overwrite your original) and save it to your local hard drive. This Excel file will show the state of your model at the given point in time while you were in preview mode. This means all of your insert-in rows, logic, connectors, etc will have executed, and the Excel snapshot will show you what the underlying spreadsheet looks like. Since you should know your spreadsheet, you can quickly look to see if you inserted into an incorrect cell (this is where color coding would have saved you time), or if a formula is generating an error.
As you may or may not know, when you are using Xcelsius you are binding to a copy of your original spreadsheet that you imported. In other words, your XLF is a combination of Xcelsius configured components and your imported spreadsheet snapshot. This is why making changes to the original XLS will not be reflected in your XLF automatically.
Hope this helps!

Special Characters in a Xcelsius Table View

by Ryan Goodman

When binding components to cells, specifically the table view component, it will inherit the cell formatting from Excel. This includes the font, color, borders, alignment, and values. Once those cells are bound there is no way to dynamically change that format during runtime. This is unfortunate, specifically for conditional color formatting and value format. In many cases users want to display some type of visual indication within a table view. There is however a way to inject special characters into a table view. If you tried this before you may know that those characters do not display by default. There is a modification to your XLF that will enable these characters to show up.

In Xcelsius, go to File>Font>and click Unicode Font Options. This will allow you to use device fonts instead of embedding the font in the SWF. By default, Xcelsius will actually embed the Verdana font in your SWF which adds about 60K to the SWF file size. By using device fonts, you will now have the opportunity to leverage special characters within a table view. You will also notice the fonts will look sharper since the Flash player will not have to render the anti-alias fonts. There is only 1 pitfall to using non-embedded fonts… an inability to render text vertically. This will affect the X axis in some of your charts when labels are long, or chart y-axis labels. Otherwise you can leverage characters like the arrows I demonstrate below.
Download Source Files

Flash Variables in Xcelsius

by Ryan Goodman

Within a Adobe Flash application, or in this case Xcelsius, you can bind variables that are utilized through out the application during runtime. The benefit of Flash variables within an Xcelsius generated SWF is an ability to push values into the model when embedded inside of a HTML page. In most use cases, you would want to use Flash Variables to push global session variables that you may want to consume and re-use. Examples include: Session tokens, user IDs, and parameters passed from other embedded scripts or controls.

First we will define a variable within Xcelsius.

1. Once Xcelsius is loaded, go to File>Export Settings.
2. Click on the “Define Variables” button. In this case, I named my value sessionID.
3. Define your variable name and bind it to a cell
4. Generate your SWF.
   Now your SWF file is configured to consume a Flash variable

There are two ways to push the variable into the SWF.

1. The Adobe Flash player enables a SWF to consume data directly from the HTML for which it is loaded. In a scenario where you are dynamically generating your HTML page, you can pass variables into the SWF on load. You can also use Javascript to dynamically change the variables during runtime, enabling other HTML embedded controls to pass data into the SWF without reloading the HTML page. An HTML nested flash variable would look something like this within an OBJECT tag:

2. The Adobe Flash player also enables a SWF to consume data directly from defined parameters within a browser or path for which it is loaded. This works great for passing parameters from one SWF to another if they are loaded on separate HTML pages.

You can try the example below by entering a value, then launching another HMTL page where we consume the variable. You will be launching a URL that looks something like this:
http://ryangoodman.net/blog/flashvar.swf?sessionID=test

Planning for a Successful Dashboard Project

Over the years I have seen a many dashboard projects succeed, but some have failed for many different reasons. We learn the most from things that do not succeed because it is only then that the appropriate time and energy is truly expended to understand what was accomplished and what went wrong.

Starting on the right foot
There is no perfect formula for an optimal design that will work 100% of the time for all cases because requirements are always a moving target that revolves around delivering and meeting expectations of users who may not know themselves exactly what they want to accomplish. With that said, there are a few commonalities for the user experience that have helped propel me down a successful path:

• Create a user interface paradigm that is easy to grasp
• Provide enough visual direction to how the end user will navigate the application:
  This is achieved through effective layout design and positioning of elements on the screen. If it is not evident how the application should be used by an end user, you need to re-evaluate your design.
• Present information in an order of magnitude creating an intuitive workflow
• Be prepared to be flexible and committed to evolving the application even after deployment
• Avoid scope creep by starting with a simple deliverable in a phased approac
• Use technology for the UI that lends itself to minimal screen refresh and loading time.

Measuring Success
The measurement of success can vary, but at the end of the day, it is user adoption that will drive other success measures like ROI. You can build the perfect dashboard or application, but if it is not adopted for what ever reason, your project is a failure. The user experience design itself is one of several elements that could impact the user adoption rate. There are other contributing factors to any dashboard application’s success that are just as important as the visual interface itself. The coolest and sexiest dashboard won’t save you if you have any major problems with the following.

• Communication breakdown between end user stakeholders, IT, and designer
• Data quality
• Query response time
• Stability
• Security

Securing the Necessary Skill Sets
There is several skill sets required to create a compelling, useful, and easy to use dashboard. At the end of the day, a dashboard should connect business information and present it in a medium that enables an end user to drive action. To date I have never worked on a dashboard project where less than 2 individuals were needed because of the business, technical, and design expertise required. A dashboard project should be a collaborative process combining business performance measurements, data access, and visual presentation. If you can’t assemble a group to collectively execute on of all of these points, or have a significant weakness in any area, you could be putting your project at risk. You will need to secure resources who:

• Understand the business process, strategy, problems, and end users needs
• Define and prioritize performance measures and metrics aligned to the business
• Know the IT infrastructure and location of required data to populate the dashboard
• Have technical competency to collect aggregate and provide data to data visualization
• Have experience in information design and visual design

Please feel free to share your experiences.

Xcelsius Formulas: Calculating Current Quarter

by Ryan Goodman

Many times, you want your dashboard to query data based on the current quarter, month, day or year. Within Xcelsius you can easily calculate these values. The trickiest part is calculating the quarter since that is not a natively supported function.

Download Source Files

1. First you will declare the current date using the function: NOW().


2. Next you will pull the month and year from this date using the MONTH() and YEAR() functions.


3. Now is the trickiest part dictating the current quarter, which is not an available function. ROUNDUP(4*MONTH()/12,0)


4. With the current quarter, you can now decide if you want to populate other quarters. In my case I want to populate a selector with the current quarter, last quarter, and the three previous quarters. In my example you can see how I took this idea a few steps further.

Design Principle 5. Consistency

by Ryan Goodman

5. Consistency: Consistency encapsulates all of the previous 4 principles into a single concept of creating uniformity and coherence across the entire dashboard implementation. Consistency is applicable in many forms not only in the dashboard aesthetics, but through information design itself.

Information design- The measure names, titles, and analysis is should be aligned with the business process and intended dashboard purpose. In many organizations, there are standard tools used for communicating and presenting quantitative information. Upon implementing a new dashboard project, you will obviously want to improve the medium for information delivery, but also use consistent charting, tabular views, and methodologies.

Navigation- In an interactive dashboard, you will need to use consistent navigation paradigms and controls for user familiarity and ease of use.

Layout- A large scale dashboard project should incorporate a standard layout, which consists of the placement and proximity of elements to enable user familiarity and adoption.

Color- The consistency of color is apparent not only for general aesthetic purposes, but more importantly for designating rules for color. For example, if you designate a tan color to represent regional (let’s say Asia) data within a bar chart, all other graphics representations of Asia should utilize the same tan color.

Text- Just like the navigation controls and graphs used to present data, text properties must also remain consistent throughout the design. You should always use the same typeface and style throughout your design.

Design Principle 4. Text

by Ryan Goodman

4. Text: The application of correct text usage will provide a dashboard user experience where quantitative and qualitative information are easily consumable. There are several considerations when inserting text within your dashboard design.

Text Aliasing- When applying text to interactive dashboard applications you may have the choice to use Anti-Aliased text with Flash based applications like Xcelsius. Anti-aliasing is applied to larger fonts, provides smoothly rendered curves and angles . When using small typefaces you always want to use device fonts, which will render the text as Aliased. As you will see in the example below, the aliased text is much easier to read with a smaller font size.


Typeface (Serif vs San-Serif)- In choosing typefaces for dashboards, you will always want to use San-Serif fonts, that is fonts without the serif accents. Arial and Verdana are san-serif fonts, and enable an end user to read text on the computer screen much easier than serif fonts (example: times roman). Serif fonts are best applied in large bodies of printed text for readability. There is no value in using multiple fonts in a dashboard, so pick 1 san-serif font that works well for you.



Font Styles (bold, italics, underline, color)- Font styles provide a means to highlight titles or values that require specific attention. That said, you want to avoid using underlined or italicized fonts as a method to stylize your dashboard. For interactive dashboards, underlined text would represent a URL hyperlink, which has become the standard for web design. If you underline values, the end user will precieve it as clickable. Bold typeface can be used to highlight values but should not be applied to large bodies of text.

Though we have thoroughly covered color as an element of contrast, you will need to choose font colors that provide easy readability. Though black is a popular choice by many dashboard designers, it may eliminate an ability to use black as a highlight color. Assuming the background is light enough, you may want to try using darker shades of gray, and see how much easier it is on the eyes. For large bodies of text in tables or paragraphs, you want to use light background with darker text for easier readability. Using a dark background with light text makes the information a bit harder to visually digest and puts a strain on the end user’s eyes.

Design Principle 3. Contrast

by Ryan Goodman

3. Contrast - Contrast is the difference between visual elements in a dashboard to make them distinguishable from others. In your previous or current dashboard projects you are automatically generating visual contrast and may not realize it. This is based on decisions that you make in component positioning, color, size, and sometimes motion. The key is to understand the basics so you make correct decisions.


Position
The best way to avoid chaos or confusion for your end user, you should position elements on the stage based on the best practices I explained with placement and proximity. In most cases, you do not want to rotate or position elements out of place just to fill white space.

Color
Color is extremely important to dashboard design. Though we are used to highly stylized graphics in media, there is some careful planning that must be exhibited when choosing colors. Many firms incorporate their corporate/brand identity in their dashboards, which is fine, unless it interferes with the analysis. Let’s look at a few methods for creating contrast with color…

• Alerts- Alerts are a great method for creating contrast using color, to identify measures that fall above or below a determined tolerance levels. While the traffic sign (red, yellow, green) methodology has transposed itself into the scorecard/dashboard arena, there are two issues that can arise.
  
  Confusion of color context: The use of alert colors in charts can sometimes cause confusion because an end user may not know if the red bar chart is referencing a target threshold (threshold) or just red because the designer liked the color red. That said, if you absolutely must use saturated (red, yellow, green) colors in your dashboard, do not do so within your graphical controls (graphs, gauge needles, buttons). Though they may convey your brand identity color scheme, they may lead to incorrect perception of the information presentation.
  
  Alerts for Color Blind: While alert colors do a great job for conveying information, you must always consider your audience and their needs. Using color alerts can be a problem for individuals that are color blind because they are not able to interpret red, yellow, and green as incremental alert colors. A way to work, around this to please all end users is to pick out a single color and use lightness to communicate visual alerts through color. You are basically creating a 2 or 3 color gradient which is just as effective for red, yellow, and green.
  
  
• Lightness, Saturation, Readability: Though I will not break down lightness, saturation, and readability in great detail, (this could be an entire article itself), I did want to touch on these elements of color management within your dashboard project. The goal is to have enough color contrast between layered components on the screen so that the content is easily readable. You can adjust lightness, contrast, or select complimentary hues (color) to create contrast on the screen. There are a few guidelines that always try to follow in a dashboard project..
• Use light backgrounds and dark text for larger bodies of text.
  • Use muted colors (shown in alerts graphic) through-out your dashboard design
  • Do not use fully saturated colors for graphs or accents (scroll bars, buttons, etc).
  • Before deploying a dashboard, test it on multiple monitors to ensure readability (LCD, CRT) because people use different hardware and monitor configurations

Size
Changing the size of an element to consume a greater percentage of limited screen estate is a commonly is a common use for creating contrast. This method is also commonly misused, and usually attributed to a designer’s choice to size components to fill whitespace. Having a few large graphs on a page is not a problem, but having components that are sized inconsistently just to fill whitespace can cause a dashboard to look un-proportionate. Though the art within a gauge is sleek looking, does not mean it will bring incremental value by consuming a lot of screen real estate. At some point I will elaborate on gauges in another article.

Motion
I have touched on motion in previous article, but it is certainly a medium for contrast introduced with computer graphics/UI design. Motion is an interesting and captivating method for creating contrast, but does not truly bring incremental value unless you are visualizing real time trending or change. The best application of motion is watching a trend change over time, but qualitative information is always required to support a robust visualization solution like this.

Container
An easy method for creating visual contrast on your dashboard is to enclose elements in their own visual container. Many applications support some type of container to create visual break in content. The best way to achieve this is through the use of shapes. Containers are really a combination of the methods described before, but are extremely relevant in dashboard design.

Design Principle 2. Proximity

by Ryan Goodman

2. Proximity: Proximity’s basic definition is: nearness in place, time, order, occurrence, or relation.

In dashboard design, I expand on this principle to include the visual grouping and alignment of multiple elements with intent to generate visual connections. This principle is extremely important for creating a visual interface where an end user can understand how combination of charts, analytics, text, and interactivity controls relate to one another.

In my following examples, I will address proximity at its basic form within single chart, and then expand how this principle is applied to multiple components on a page.

In the chart below, we have one measure (sales) where we compare the quarterly performance for two sales reps. Located to the right of the graph, is a legend. We can easily draw the visual connection between the graph and the legend because they are the only graphics on the screen, but the primary reasons we make this connection is because of their proximity from one another and color (we will touch on this topic next week). What if we had multiple charts on the screen, and the legend was placed in the upper right hand corner? This may seem elementary, but may help you realize the importance of proximity.

Let’s expand on this same principle and look at how multiple elements can be assembled together in 1 dashboard using proximity to draw visual connections…

In this second example, we have two graphs, and a progress bar. Because they are on the screen together in one viewlet, we assume that they are all relevant to the analysis at hand. Without looking at the data itself, you can quickly asses how components relate based on how they are aranged in relation to each other. Would you assume that the radio button control (sales & mkt share) would change all of the visualization elements on the page? What about the label based menu featuring product lines at the top of the page? If you try the model, your assumptions are probably correct. It is the alignment and orientation of components together on the page that allows you to draw these visual connections quickly.


Because we have aligned the radio button in close proximity to the growth chart, we can assume that the controls are connected. The alignment and proximity of the Sales chart and Total Sales progress bar in the bottom half also help drive visual connections between the two components.

Next week, we will take a look at Contrast and accompanying elements of design to help you in your dashboard design projects.

Design Principle 1. Placement

by Ryan Goodman

1. Placement: The underlying theme to placement is a consciousness to arrange individual or groups of components on a page to dictate a visual order of magnitude; not just to fill whitespace. If you have read other design books or articles, they always state that the most important screen real estate is at the top left and center of the page. I use the diagram below to explain a natural path that your eye will follow for any page that your view. Notice how the first two points on the page are the upper left and center, followed by the lower left and right, then up to the top right corner. Knowing this can help you in placing elements that are most important (navigation, top priority information, measures).

Regardless if you looking at print or digital media, your eye will follow this natural path in a split second before you even begin digesting what information is on the page. From there, it is other design practices like contrast that will pull your eyes in the direction the designer intended.

A commonality in dashboard design that I often see is a large logo at the upper left hand corner of the page. Try to fight the urge to do this.. Unless it is a marketing exercise and you want your company name front and center, which in many cases is still not the most important information you want to convey to your users. Your logo will fit best in the lower left corner of the page.

Next week we will talk about Proximity and how you can create visual connections by placing components on the screen to draw visual connections.

2008 Presidential Election Data Visualization Idea

by Ryan Goodman

I know this is a break from my typical content and my series for my 5 dashboard design principles... I will get back to them next week.

Here is an idea I have been playing with. If someone knows of something similar that already exists, let me know. It is one of those ideas that would be extremely useful if deployed by a creditable organization.

Problem
Scenario: Like every other American, you are eagerly awaiting the 2008 presidential election to cast your vote for someone who at a minimum, is articulate enough to communicate to the public without sounding like an idiot. A huge % of the American population feels some, or all of the pain points listed below as they try to ramp with correct information to make an informed decision for their next president:

1. Some do not know the difference between candidates other than how they are presented in the media (TV, Internet, etc.)
2. Some know the difference but are inundated with so much skewed or incorrect information from other's personal opinions and interests (TV, Print, Online, other people).
3. Many feel a missing ability to breakdown of all candidates based on specific issues, with an ability to stand them up side by side.
4. Most don't have the time or energy to dig and read through all of the information available (even if it is summarized).

So maybe there is something out there already…I have not found it. What we have here, is a wide target audience (American over 18) who all have a common interest, with no existing tool to fill this gap that I have presented. So here is what I propose….

Solution
An online application that enables anyone to identify their best choice for the 2008 election based on their own personal beliefs on specific issues (Economic, Social or Political). The idea is to enable someone to align themselves to a candidate who's stance is similar based on issues using the application to do the heavy lifting. The proposed application would streamline the process for making an informed decisions through a seamless, easy to use interface with unbiased, correct information.

Application Description/User Experience

1. User Input
Upon entering the application, the user would enter some basic information.
-Demographics: Age, Sex, Location, Political Affiliation (basic)
-Additional Information (optional): Job, Income, Family, etc..

2. Issue Identification: Social, Economic, Political, etc
The user would then navigate through a comprehensive list of Social, Economic, and Political issues. The user would then indicate the importance/weight of that issue and their stance. An important aspect of the application is flexibility to identify issues that are relevant, but also provide a means for education on all issues.

3. System Output
Based on the user input, the application will provide realtime feedback by providing a matching list of candidates based on similarities to the user defined issues. There are 2 ways that the system will identify matches which the user can toggle between.
1. Factual: A list of candidates who hold the same opinions or plans for issues the user defines.
2. Subjective: A list of candidates who other people in the same demographic select as their best choice.

Next Steps in User Experience

Once you have your initial input complete, you can do several things

• Modify your criteria slightly, and see in real time how that effects the recommendations
• Drill into individual candidates for background information, details on specific issues, plans, history, current news, etc
• Make a decision to save you top candidates and/or choose your candidate if you would vote today.
• Navigate to additional analysis in how you compare to the rest of the country:

Additional Analysis: The potential analysis that can be drawn from this system is a dream come true!

• General demographics vs Specific Issues (importance and stance)
• Changes over time across all analytics
• Candidate Poll information
  
  

Dashboards, Widgets, & Rich Internet Applications: Drawing Parallels & Differences

by Ryan Goodman

This week I wanted to focus on Dashboards, Widgets, and everything else that we put into a bucket called Rich Internet Applications.

There is significant overlap in all three with specific distinctions making each unique. Hopefully I can paint a picture that makes it a little easier to understand.

Consistencies Among all 3

• Generally designed to incorporate an aesthetically pleasing UI.
• Some or most data originates from a server side process or web service.
• Enables some level of configuration or customization
• Implies some type of security model
• Provides a user interface paradigm that is intuitive and simple to navigate
• Besides on the desktop outside of an internet browser which enables a user experience that requires no screen refresh.
• Incorporates Web 2.0 technologies like AJAX or Flash.

Differences

Dashboards:

• Primarily focused on presenting quantitative measures, metrics, and analytics.
• Used to visualize the most recent information available.
• Provide enough information to drive action.
• Is usually embedded or integrated into another application or portal.

Widgets

• Designed to present one or few elements on the screen at one time using minimal screen real estate
• Presents the most important or frequently monitored information or drive common tasks.
• Usually embedded or wrapped around a client side framework.

RIA

• Built to for use as a standalone client application.
• Leverages operating system specific functions in addition to server side communication and data access.
  
  

What is a Dashboard?

by Ryan Goodman

What is a Dashboard? A Simple Definition
A dashboard in simple terms is a summarized visual representation of critical information required to make business decisions. This visual representation is typically presented on a computer screen as collection of charts, tables and other visuals that display trends, statistics, and measures.

We will compare a business dashboard to the dashboard in your car. The gauges in your vehicle show you a real time performance: How fast your going, how much gas you have left, the oil temperature, etc. The collective gauge cluster in your vehicle allows you to quickly asses how your car is performing while you drive. In essence, a business dashboard should serve the same general purpose: presenting the most current performance measures available for your to drive your business.

Why is a Dashboard Valuable?
A dashboard is valuable to any person within an organization who requires summarized information to make business decisions. This value is derived from time savings on multiple fronts:
- The time savings to gather, aggregate, and present all necessary information.
- The time savings for the business person to consume, digest, and make decisions.
There are also several benefits to dashboard solutions offered by software vendors, but they hinge on other aspects related to IT, which we will not dive into for this article.

So in Summary...
- Dashboards server to present a holistic view of one or multiple facets of your business: primarily related to performance.
- Dashboards should enable a business person to quickly assimilate to the information presented to make informed decisions quickly
- Dashboards streamline the process for gathering and manually aggregating data into a coherent presentation.

Xcelsius Salesforce.com Widgets in Business 2.0 Magazine

by Ryan Goodman

Before boarding a plane to head over to Europe, I purchased my usual Business 2.0 magazine (April 2007) and found an interesting article on widgets. This article reported recent advancements in desktop widgets in the enterprise space. To my delight, they had a great image of an Xcelsius generated revenue tracker widget designed for Salesforce.com. I sat back and asked myself one question... At what point will this desktop widget craze materialize into something valuable or just roll up into the next big thing: Rich Internet Applications on the desktop?

Desktop widgets were the first iteration of what Adobe and other industry players have coined rich internet applications. It was the combination of Yahoo widgets and Apple desktop that propelled this cool technology into a desktop widget craze, as seen in Business 2.0, Wall Street Journal, and other publications. The draw for end users is the demand for a streamlined, customized, and aesthetically pleasing mini application that exists outside of the browser. There were three descriptors missing in the previous sentence that in many cases still restrict widgets from really catching fire.

1. A strong security model- While existing frameworks are wonderful in displaying and rendering content, they are not designed to address security to satisfy enterprise requirements.
2. Customizable content- While the technology is cool, without an ability to view customized content, widgets will always be perceived as desktop “toys.”
3. A solid monetization strategy- It seems the path of least resistance is to make widgets free, and concentrate on using widgets as a value-add for existing software platforms, and applications.

The article in Business 2.0 indicates that enteprise software vendors are taking a stab at desktop widgets.

Calendar Date Formatting in Xcelsius

by Ryan Goodman

If you are working with dates within a connected Xcelsius dashboard, you can run into potential issues related to formatting. In most cases, you will require a specific format when you want to pass a date as a parameter to a web service.

Using the calendar component, you can insert and visualize a user defined date. Though you can set the cell format to modify the display of that date, Excel actually stores it using the 1900 date system. This simply means that the date Jan 1, 1900 has a true numeric value of 1, and Jan 1, 2007 has the true numeric value of 39083. The problem at hand is if you bind a web service connector component to a cell that is formatted, it will still use the true numeric value and not the formatted value that you see during runtime. Here is how you can remedy this:

Download the Source Files

1. Bind a calendar component to an insert in cell
2. Use the day, month, and year formulas to extract the individual values into their respective cells
3. Use the concatenate to sting together the day, month, and year in your desired format.
   

Xcelsius Dynamic Lookup Logic: Selecting a range

by Ryan Goodman

Here is a scenario that many people have…. You have a connected model and the web service returns tabular data, but Xcelsius does not have the ability to lookup multiple rows of data with their selectors. Unfortunately, with Xcelsius 4.5 you have to rely on some Excel skills to assemble a layer of logic that will scale. The good news is I have put together a lightweight solution with the available supported Excel functions for Xcelsius. The bad news is that is painful to explain…

I did my best to point out the key components to make this model work. Your best bet is to download the Excel file and beat it up and look at the comments within the bold titles. I didn't feel that it was extremely important to build an Xcelsius model for this one, but if it would help, shoot me an email and I can put something up.
Click here to download the Excel source file

Xcelsius Reset Button

by Ryan Goodman

Here is a simple trick that will allow you to reset a dashboard back to its original state when featuring what-if capability. The only limitation in design, is that all of your insert in cells will need to remain contiguous.


Download the Source Files

As you can see, the original values reside in column C. It normally, we would link our single value components to these original cells. In this example, we are going to link our single value components to our target range in column A. Finally we are going to use a selector to move the data from column C to column A. This way, every time you make a selection, it will affect column A, leaving your original data in column C un-effected. Hopefully this little trick will help you in building calculator based applications.

Getting Lost in Visualization

A term that I have always alluded to when instructing users best practices in dashboard design with Xcelsius is getting “lost in visualization,” that is becoming distracted with all of the shiny widgets available and loosing sight of the objectives.

The collective business users of the world are adapted to navigating information through traditional web based (browser) navigation, the same way we are adapted to using a mouse as our human-to-computer interface. The web-page paradigm has become the standard for how business users rate ease of use for navigating through information. Since the purpose of many web sites is to captivate and draw attention, the same way that television commercials do, web pages have incorporated a lot of sex and sizzle to make them more appealing. Many dashboard products like Xcelsius have incorporated similar visual aesthetics making them a marketer’s dream.

In the case of Xcelsius, I believe that it is the selectors (drop down menus, list boxes, radio buttons, etc) that draw customers to the product and not necessarily the charts and gauges (though they are important). Creating a simple, web-like interface for navigating through enterprise data is the goal of all business users. So if Xcelsius provides great components for navigating and viewing enterprise data... where exactly do user's get lost?

• Overcrowding the screen with analysis
• Color choice
• Component sizing
• Layout design and positioning components on the screen
• Incorrect choice of graphs for the given analysis
• Use of selectors to slice data when its not necessary
• Adding unnecessary JPG images

Personally, I am a fan of flat and simple graphics with easy to read, crisp text. In Xcelsius, I always use the halo skin because it uses minimal gradients. Many people are unaware that you can even change the skins (In Xcelsius, click View>Change Skin). I think there is a little room here and there for embossed solid backgrounds to clearly identify a visual break in content, or even using a picture menu for displaying brands that are quickly identified instead of text. At the end of the day, assuming that the designer does not add un-necessary graphics and components, I believe that a dashboard must serve to display content that:

• Is easily digestible
• Requires minimal training for end users
• Is easily navigated with few clicks
• Is presented in a simple and non distracting interface.

I will touch more on this topic of how to design better dashboards with Xcelsius in future posts.

Xcelsius Related Websites

This posting will remain an up to date complete list of dedicated Xcelsius sites. If you want to be added to the list please email me.

Official Business Objects Sites
Xcelsius Developer Community
Brand new developer community for Xcelsius developers.
Xcelsius Learning Center
Great for whitepapers and technical articles.
Xcelsius Templates
Simple Templates for Downloading
Xcelsius Widgets- For SFDC
Cool Desktop widgets for use with Salesforce.com

Xcelsius Tutorials and Help
Data Pig Technologies
Tutorials from the author of Xcelsius for Dummies. Michael Alexander also started a new blog that has great stuff.
Xcelsius Help.com
Growing site with Xcelsius tutorials and information
Xcelsius Best Practices.com
Great tutorials for creating rich analysis using the Excel based logic
Jim Bytes- Doing I.T in Dublin! This is a great site with interesting information and some original Xcelsius work that is well done. Always interesting information right up my alley on here.
Crystal Xcelsius Dashboarding Newer Xcelsius Blog with great Xcelsius samples and information


Forums
Unofficial BOBJ Forum- Xcelsius
Great forum with a lot of traffic from Business Objects customers

Next Generation of Application Design: Adobe Apollo

by Ryan Goodman

Over the past 5 years, I have been deeply involved in data visualization at one level or another, though my attention and interests have been primarily focused on Xcelsius as a dashboard and data visualization application (if you have not figured that out by the content on this blog). From what I know, Xcelsius was the first full blown business application built around Macromedia’s Flash technology. In essence, Xcelsius is a customized Flash component compiler, though there is much more to it making it a great tool.. Adobe’s Flash technology has evolved from a vector animation tool used for web sites, to a robust development platform with Flex. As a Flash designer in the late 90’s, it has been quite astounding to see the evolution of this technology and its contribution for accelerating the standards for user experience and data visualization.

Changing Landscape for UI Design
With the introduction of Microsoft Expression and Adobe Apollo (code name for Adobe’s new desktop application framework) in 2007, we are about to see the next great change in what we consider “user friendly” experiences for desktop applications. The role of the user experience professional and graphic designer will expand, as the collaborative creation process between designers and developers becomes much easier. It is understood that generally, developers don’t make the best designers or UI designers.

Adobe Apollo
For today, I will address Adobe Apollo, which is the codename for Adobe’s new framework for building rich internet applications on the desktop. Adobe’s acquired Flash technology has revolutionized the way we interact with web applications with sharp vector graphics, sophisticated animation, and multimedia (sound and video). At the end of the day, the end user has been stuck in the browser environment, which has several restrictive security settings do to the volatile nature of browsing the internet. This is where Adobe Apollo will come into play to alleviate these issues by leverage the power of the Flex platform for development, Flash for rich user experience, and a native HTML and PDF viewer (all wrapped up into a desktop framework).

What does this mean?
An extremely powerful medium for presenting information for use with any on-demand business model. For end users, the quality and “cool factor” for your desktop applications will expand beyond your wildest dreams. Since we are not restricted by the browser, and wasted bandwidth for downloading all of the UI components, developers can create a efficient balance between on demand content, and embedded content on the desktop. Did I meantion that this framework is cross platform? Finally, for all of those Flash based widget framworks...you better find your niche and hold on for dear life!

The Verdict
While I did not get into MS Expression, there is some major overlap between these technologies. I think that the major adoption barrier for Adobe, is the number of Flex developers V.S. Visual Studio and .NET developers who can now look to Expression for robust user interface design. I know that Adobe has an aggressive go to market strategy, but verdict is still out in the enterprise software space. For the consumer market, I can’t wait to see how companies like Ebay and Amazon apply this technology.

Xcelsius Utilities

This week, I wanted to share a few utilities that I use when building dashboards.

Flynet Web Service Generator for Databases
Flynet's Web Service Generator for Databases allows you to generate webservices that can transact data from any OLEDB or ODBC datasource. These web services can then be easily integrated into an Xcelsius dashboard. This is a great tool for standalone applications for delivering live data.

Special Character Converter
It isn’t sexy, but it does help in scenarios where I link Xcelsius dashboards to other web pages or documents using the URL link button. You must replace all special characters with their respective HTML conversions when using the URL button. So what if you don’t have an HTML book handy? Here is a great conversion tool that I use constantly:
I use the Find and Replace functions to automatically replace special characters in my model. The most common that I find is the “$” symbol.

I have added a sample Excel file showing how I automate the replace functionality
Download Source Files Here

Color Scheme Picker
Here is another great tool that I use for choosing colors that are complimentary but are different enough to differentiate each other in a series. For those of you who are not great at choosing color schemes, I highly recommend this tool.

Widget Hardware: Ambient Orb

by Ryan Goodman

During a discussion last week I was commenting on my Ambient Orb and how it is one of the coolest devices in the market. This cool piece of hardware has served as a conversation piece for anyone who walks by my office, and is currently configured to display the health my entire investment portfolio. When I was looking to purchase a house last year, I linked it to the local market rates with an extremely tight tolerance and was able to have my mortgage guy execute on my loan application and in return I saved a small amount of money (more than enough to pay for the orb itself).



Today, anyone can leverage this technology to monitor any type of information. In my case I built a module that will allow you to plug this technology into any Xcelsius dashboard. There are a few basic steps to enable your dashboard to pass information to your ambient orb.

1. Once you purchase your orb, go to the Ambient Devices website and setup an account that allows you to add your own channel.

2. Obtain your orb ID located at the bottom of your orb, and enter it into the excel model.

3. Configure the tolerances in the model, based on the values you will receive from your connected source. One tolerance is for color and the second is for blink speed, which means you can visualize two values on the device.

4. Make sure the web service URL is configured to connect to ambient devices. (Data>XML Map Options…)

5. Connect your model to refresh with live data from any data source (BI, CRM, etc..)

6. Setup the refresh rate. *Note that depending where you live you can expect up to 20 minute transmitting latency for your orb to change color.

7. Generate your SWF file

8. Vuala! Your SWF will now dictate the color of your ambient orb.
Download the source files

So when Christmas rolls around next year you can be a hero: Give your VP an easy way to monitor their most important key performance indicator, and a cool looking glowing tech-toy for their office. You will be a hero going into the next year!

Embed Xcelsius inside of Salesforce.com

by Ryan Goodman

Salesforce.com Inline S-Control Analytics with Xcelsius
With the Winter 07 release, you now have the ability to assemble your own dashboards using the custom S Control, which serve as an IFRAME on any Salesforce.com page. While testing these new features last October before Dreamforce, I was able to quickly assemble a dashboard that can leverage the Salesforce.com API along with an inline S Control to extract information on the page.

The result was an embedded dashboard inside of every opportunity page that would display a visual history of the account. Though I am not sure how well it resonated because it was visually not that sexy compared to the full dashboard applications, the power of these nested dashboards for SFDC end users is extremely valuable if executed correctly.


Here is an overview of what I did.
1. Decide on a practical business case that would warrant a dashboard on every opportunity page:

In this case I wanted to embed a standard dashboard on every opportunity page that would allow the end user to visually digest the history of all other opportunities for a given account: won, lost, and pending. In addition, it was important to show the current opportunity in relation the historical view. Then the end would need to view high level details and navigate to any other historical opportunity with a single click. The underlying idea was to alleviate the mental juggling and repetitive clicking to access the same valuable information. I counted 10-15 clicks in some cases to obtain the same exact information.

2. Build a SAOP web service to pull down all opportunities and details from a specified account using the SFDC API. There is a good article on the Xcelsius Business Widgets Site outlining best practices.

3. Build a custom S control to expose the current opportunity information as variables, so they can be pushed to dashboard on-load, using Flash Variables. It is this S Control that will supply the information about the current opportunity that and will also define the Account parameter for our SOAP web service. Upon inserting the S control onto the opportunity page, I set the size to 1 pixel to hide it from the end user.
Example: Exposes the Session ID and Opportunity Name as variables.

sforceClient.setLoginUrl("https://www.salesforce.com/services/Soap/u/8.0");
sforceClient.init("{!API.Session_ID}", "{!API.Partner_Server_URL_80}", true);
sforceClient.init("{!Opportunity.Name}", "{!API.Partner_Server_URL_80}", true);

4. Build a custom S control to house the SWF file, and set the Flash Variables. You will also upload the SWF file to SFDC as part of the S Control.
Example: This example will load the SWF file, and define the Flash Variables (Param#). I also set the SWF background color to match SFDC.

‹html›
‹body›
‹object type="application/x-shockwave-flash" data="{!Scontrol.JavaArchive}" class="movie" width="100%" height="100%"›

‹param name="movie" value="{!Scontrol.JavaArchive}" /›
‹param name="bgcolor" value="F3F3EC" /›
‹PARAM NAME=FlashVars VALUE="salesforcesession={!API.Session_ID}&param1={!Opportunity.Name}&param2={!Opportunity.StageName}&param3={!Opportunity.Amount}&param4={!Opportunity.CloseDate}&param5={!Opportunity.Account}&param6={!Opportunity.Link}"›

‹img src="http://path-to/noflash.gif" width="100%" height="100%" alt="No flash installed" title="No flash installed" class="image" /›
‹/object›
‹/body›
‹/html›

5. In your Xcelsius dashboard, bind the Flash Variables based on the naming convention you used. In my case, I named them param1, param2, etc.


Hopefully, this has left you with some good ideas, of how a simple dashboard can really add value to your end users, specifically for SFDC.

I do have to give some credit to the guys at Salesforce.com, for helping me get my syntax correct for the first Inline S Control. Sorry guys, I can’t post the source files for the web service or Xcelsius file for this one. I can only help you along with how to build it.

Embed a SWF in Excel

by Ryan Goodman

Often I get questions about placing an Xcelsius generated SWF inside of an Excel file. If you go through this tutorial, you will truly appreciate the single click export option in Xcelsius. In covering how to import a SWF into Excel it is important to understand that there is no way to connect the SWF to the Excel data. When you generate a SWF from Xcelsius, it is completed self contained as is not tied back to the originated Excel file in any way. All of the data, logic (Excel formulas converted to Action Script), and connectivity mapping is contained inside of that SWF. With that said, here is how you can take a SWF file and import it into Excel, though the process is the exact same for PPT, or Word.
Download Source Files

1. Open the Control Toolbox by clicking on View>Toolbars>Control Toolbox
2. In the control toolbars menu, you have an icon called More Controls
3. Scroll down and click on the menu item called Shockwave Flash Object. This will insert a container where you will load and resize your SWF
   
4. Right click on this container and click on the menu item: Properties. Note that sometimes you may get a weird behavior with this container in order to get the correct right click menu. Reference the You may need to click in the empty space on your document before right clicking on the container.
   
5. Click on the top field, (Custom), then click on the ellipse button (…).
   
6. In the property page popup, you will need to fill in the absolute or relative path to your SWF file.
7. Before embedding the SWF you want to make sure that the path you entered worked. Click OK to temporarily exit the properties popup window.
8. Resize your container and your SWF should load inside, though it will not work quite yet. As long as you see the dashboard, it worked. Now you need to embed the SWF so you can move or email the Excel file.
9. Go back to the properties popup box and check Embed Movie.
   
10. Now you need to activate your SWF so you can use it. Back in your Control Toolbox, there is a design mode button. You will need to click on it to Exit Design mode, and now you can use your SWF.

Dashboard Design and Deployment Best Practices with CX: Part 3- Finalize and Connect your Dashboard

by Ryan Goodman

Follow Excel best practices
Now that you are transitioning from your mockup toward your final production dashboard, you will want to start incorporating some Excel best practices designed specifically for use with Xcelsius. These best practices will help you couple your excel based model with live data. Excel best practices will allow you to scale your dashboard as you add and remove metrics. Click here to view the Excel best practices whitepaper.

Utilize summarized data
Though it has not been stressed through the other best practices, connectivity is just as important as the visual dashboard itself. I many cases, the data will originate from a database or warehouse. When building a connected dashboard with Crystal Xcelsius, it is extremely important that the data streamed to the Xcelsius dashboard is summarized. While Xcelsius can do some calculating and summarization during runtime within the SWF, it is best to utilize the web services or reporting tools to do the heavy lifting (calculations and summarization). While the volume of data, complexity of calculations, and refresh frequency can dictate which connectivity method is used, it is important to understand that you want the final range of values streamed to the dashboard to be summarized as close as possible to the information you will visualize.
To ensure you can visualize all of the needed information, there are several ways to summarize the data:

• Use parameterized queries to stream data to the dashboard based on the end users’ selections
• Use reporting tools like Crystal Reports or MS Reporting Services to do the heavy calculations and summarization. Xcelsius supports both of these solutions as data sources.