Home / Business Intelligence / Creating Infographics with Standard Xcelsius Components

Creating Infographics with Standard Xcelsius Components

There is constant evolution in technology, and how things look and feel is part of that evolution.  What looked new and exciting last year is now the norm, and something else is wowing people.

The first time I saw an Xcelsius model (now called SAP Dashboards) I was very impressed with how it looked.  The next time I saw a model I was impressed on what it could do.  Now it’s taking more than the standard components to leave any lasting impression.

SAP are adding further components and polish to the product with each new release, there are some great additions coming in Dashboards 4.1. There are also a number of 3rd party companies providing extra functionality to your dashboard like Centigon, Inovista, etc.

I have taken a step back and looked at the changing styles of data visualisation and in particular how Xcelsius components can be used to give a fresh new look to a dashboard.

The first topic I looked at was Infographics.  Infographics have been around for a number of years, however recently there has been a surge in the popularity of this visualization technique.

“Infographics are ways to visualize data and information in a graphical and easy to read format.  Infographics can be understood quickly and clearly, without the need to analyse or interpret the information they are trying to convey.”

Here is a snapshot of some of the Infographic mashups I have created using standard Xcelsius components.  Instructions on how some of these effects were created are included too.

xcelsius-infographics-rich-1-630x337

The first example:

This visualization presents data in a format other than the standard pie chart.  The blue and the orange segments are both of a similar size (24% and 23% respectively).  However, by using concentric circles, and different depths of segments it clearly highlights the order of the two series.

xcelsius-infographics-rich-2

How to create this visualization

  1. Create a Pie chart showing all 5 segments.
    a.  Turn off the background, the title, the legend, so you just get a pie chart on its own.
  2. Duplicate this pie chart, but make it a little smaller.
    a.  Place this pie on top of the first, and exactly in the middle.
    b.  This has created your first 2 concentric circles.
  3. Repeat step 2 until you have 5 concentric circles of equally diminishing size.
    xcelsius-infographics-rich-3
  4. Using the ellipse component, create a 6th concentric circle in the middle with a white border and white background. This creates the donut effect.
    xcelsius-infographics-rich-4
  5. Next edit the series colors in the individual pie components.
    a.  For the largest pie, turn series 2-5 to white.
    b.  For the next largest pie, turn series 3-5 to white.
    c.  Repeat this for all the pies leaving the smallest pie with all series colored in.
    xcelsius-infographics-rich-5

Using a similar technique I have also created the following visualization too.

xcelsius-infographics-rich-6

The second example:

This visualization shows a distribution of male vs female.  This could be shown as a pie chart, but using an infographic can be more engaging and by being intuitive it removes the need to label which segment is male and female.

xcelsius-infographics-rich-7

How to create this visualization

  1. Prepare an image of the male and female silhouette
    xcelsius-infographics-rich-8
  2. Using an image editing tool (such as Photoshop) turn the silhouette transparent.
  3. Add an image component onto your Dashboard canvas and import your edited silhouette image.
    a.  This creates a stencil on the canvas, which will show components placed below the image, through the male / female cut-out.
  4. Create a column chart on your dashboard showing your Male vs Female values.
    a.  Make both series the same color and the columns wide enough to fill the man and woman side of stencil respectively.
    xcelsius-infographics-rich-9
  5. Place the image stencil on top of the column chart.
  6. Add a label onto each side of the chart to show the percentages.
    xcelsius-infographics-rich-10

Using a similar technique I have created the following visualizationtoo:

xcelsius-infographics-rich-11

If you have your own infographic hack for Xcelsius share it in the comment section below, we are always looking for new ideas!

About Rich Harvey

Richard Harvey is a Business Intelligence Consultant for InfoSol Ltd in Europe. With more than a decade’s experience in IT, he has worked in a variety of report and data management roles. Richard has been developing with SAP Dashboards (formally Xcelsius) since 2006 and combined with his data management experience has produced a number of innovative online and offline dashboards. Richard joined InfoSol Ltd from a leading UK financial services organisation where he had been heading up their Business Intelligence project team.

Check Also

Business Intelligence to Inspire Us All

As I look back on 2018 and all the amazing BI solutions I saw created, ...

4 comments

  1. Fantastic loving the pie chart manipulation. Been using the male/female + chart for a while to really good effect

  2. Brilliant post, Rich. Thanks for this!

  3. Hi,
    Thank you for such an amazing share.I practiced example one and it really works. I somehow can’t implemet the example 2. i don’t know how to make the silhoute transparent. I made it transparent through the xcelcius tool but it somehow doesn’t reflect the background color. Can you please elaborate on that?

  4. Anum,

    Thanks for the comments.

    You have to convert the man/woman silhouette into a transparent image outside of Xcelsius using an image editing program such as PhotoShop etc. You can also use free online tools like Pixlr (http://pixlr.com/editor/). Take the image and cut out the silhouette so that the inside of the image is transparent, and the outside of the image is white. This will then allow the Xcelsius chart component to be visible within the silhouette.

    I am presenting about Infographics within Xcelsius at this years IBIS conference (http://limitlessbi.com/).

    Rich