One of the most common questions regarding Dashboard Design concerns the ability to change an object’s position dynamically.  This opens up a new realm of possibilities with dynamic labels in charts, dials and sliders which move, dragging & dropping objects, and so on.

Instead of answering these questions over and over, I’ve decided to put my answer into a neat little package.  Now I can just link you here whenever you ask!

These steps look a lot more complicated than they really are, because we’ll be manually editing the raw XML files in Notepad.  Be brave, and I’ll try to guide you closely.

1. Add the object you want to move dynamically

First, we add 3 objects to the dashboard:

1. Icon Component: this is the object we’ll be moving.  This could be anything you want, but I’ll use the Icon because it’s a clear and big green dot.  Set the following properties:
   1. Dynamic Visibility Status: B1
   2. Dynamic Visibility Key: B2

     These bindings are just done for future convenience.  In the next step, we’ll manually edit the text file and bind the ‘x-position’ to B1 and the ‘y-position’ to B2.

   2. Two Value Components: these will control the ‘x’ and ‘y’ position of the object.  Give them the following properties:

1. Minimum value: 0
2. Maximum value: 1000
3. 1st Value component: Data = B1
4. 2nd Value component: Data = B2

2. Edit the raw Xcelsius file (This is where the magic happens)

Now follow these steps closely:

1. Save and exit your dashboard.  Save it as ‘dashboard.xlf’ on your desktop.
2. Rename the .xlf file into .zip (e.g., dashboard.xlf –> dashboard.zip)
3. Open the .zip file; you’ll find a file called “document.xml”.

     4. Copy ‘document.xml’ onto your desktop, then right-click and go to Edit.  It will open with Notepad.

Yes, this file looks like a complicated mess, so bear with me.  The file is just a big list of properties for all the objects on my spreadsheet.  There are 3 main blocks of text: one for the Icon component and 2 for the Value components.  If you’re curious, read through it for a few minutes and it will begin to make sense.  If you’re not curious, just follow these steps blindly to continue:

     5. Search for the word “displayStatus” and replace it with “x”

     6. Search for the word “displayKey” and replace it with “y”

     7. Now save and exit ‘document.xml’, and copy it back into the dashboard.zip file. 

     8. Close the zip folder, and rename ‘dashboard.zip’ to ‘dashboard.xlf’

     9. Open ‘dashboard.xlf’ with Xcelsius.

You’re done!

Just put values in your two Value boxes and see the Icon button move around.

So what did we just do?

This all went a bit quickly, so here’s what happened:

     1. In Step 1, we bound the dynamic visibility of the Icon component to cells B1 and B2.  By doing this, Xcelsius added a few lines of code to document.xml that we’ll use in Step 2.

     2. When we edited document.xml, we changed this binding: now, instead of binding the dynamic visibility to B1 and B2, we bound the position of the object to B1 and B2.

     3. Since the two Value box components are bound to B1 and B2, you can use them to move the Icon component around at your leisure.

What else can we use this for?

This general principle can be used to move any component dynamically.  Over the next few months, I’ll write a few additional blog posts and technical documents describing some of the more exciting possibilities, such as Bubble Charts with dynamically moving labels, the ability to drag & drop components in the dashboard, or expanding / shrinking menus.