How-To | Create a Basic Dashboard

Create a Basic Dashboard

VERSION 11.11

Step 1 | Design your dashboard layout

Create an image of the dashboard you want.You can use PowerPoint, Visio, or Photoshop. However you like to make these, the goal is to produce a jpeg or gif file that looks something like this:

Step 2 | Create the building blocks for the dashboard

In a new space, create objects for each component of your dashboard. You should also create one for your backdrop too.

Step 3 | Position backdrop & chart blocks

Import and add your dashboard background image (Object>Images) as the image on the backdrop object.  

Resize the background object (shape, larger). Then ctrl shift drag to manually position your background behind the circle. You should now see the other objects in front of it.   Finally, position each chart component to its position in front of the background.

You’ll want to turn off the default position circle (Space>Layout) and the labels above (hit L on the keyboard). Get your point of view orientation straight on (Space>View>Z) then turn on Parallel (2D) View and enable anti-aliasing.  Your main space should now look like this:

Step 4 | Create each sub-graph

Next, create a single sub-space inside each chart element. We’re going to put each of the charts we want inside these. To do this, right click each object and select New>Space.   

Once you have your sub-spaces, drag and drop the object you’ll want to be viewing into the dashboard. Then configure your lens using the preconfigured lenses or one you or a colleague created previously.

We recommend that you design very clean charts – each of these will look a bit naked alone – but when you’ve got four or more open it’s best to be clean.

Step 5 | Open sub-spaces

Once you have created your four views, go back up to the main space and right click each object to open sub-space: 

Your main space should now look something like this:

Step 6 | Resize, position and polish to final product

Resize the parent objects to get the sub-spaces to fit each of the boxes you made for your dashboard. Repeat for each until they fit nicely. You may want to go inside each space and stretch the Y axis using the Space>Properties panel>Coordinate Scale.  

Step 7 | Dashboard Live

Now, you should be able to simply paste new entities into the lens to make comparisons. Note – here we’ve changed the view of open and close to show % change since a certain date on the top charts.  We’ve also applied Color>override blue (Intel) /orange(Google). Using color in this way is a good way to connect the entities for the user’s eye across dashboard modules.

ADDITIONAL NOTES

Here are some additional notes for getting the view to clean up nicely. If you have problems, be sure to contact us and well help you with a detail or two that might make a difference.

Positioning the sub-charts

You may need to manually position the parent object to get it to fit nicely (if you can’t grab it, close it, move it and then reopen to see if you have it centered).If you can’t grab the labels of the opened objects, you’ll need to close the objects

Fitting the graph to the square

To get the graph to fill the square, you should adjust the Space>Coordinate Scale.  In this space we raised the Y value to 2.5 and pressed Z down to 0.1 to make it square and flat.

Sizing the sub-charts

Changing the size of the main objects will increase/decrease the size of the chart in the sub-space. 

Labels

Labels are controlled at the space level, so you’ll need to go inside each sub-space to turn off the axis and/or object labels.