svg documentation - microstrategy

SVG DOCUMENTATION

Description of svg metrics with known limitations

Tomasz Pawiłojć

Copyright ©2020. All Rights Reserved. 2

TABLE OF CONTENTS

LIST OF SVG METRICS AND AUTHORS 3

DESCRIPTION (WITH EXAMPLES) OF EXISTING METRICS 4

Bar Chart 4

Bullet Chart (Lipstick Chart) 5

Bullet Chart Banding (Threshold Chart) 6

Gauge Chart 7

Half-Doughnut Chart 8

Horizontal Bar 9

Horizontal bar with metric and dynamic opacity 10

Horizontal Forecast (2 versions) 11

MicroChart – Bar Chart 13

Horizontal-Group Chart 14

Pie Chart 15

Radial Bar Chart 16

Ring Chart 17

Sparkline and Spark Bar Chart 18

CREATING SVG METRIC WITH EXCEL FILE 20

Creating Bullet Chart – example 20

Creating Ring Chart – example 22

KNOWN ISSUES AND LIMITATIONS 24

SVG metric is not working on IPad/IPhone 24


Some changes are possible only in code 25

It is just a workaround… 25

LIST OF SVG METRICS AND AUTHORS

• Bar Chart – Chris McGovern

• Bullet Chart (Lipstick Chart) – Tomasz Pawiłojć

• Bullet Chart Banding (Threshold Chart) – Bert Utrecht, Michał Janowski

• Gauge Chart – Piotr Janeczek

• Half-Doughnut Chart – Piotr Janeczek

• Horizontal Bar – Bartłomiej Obolewicz, Piotr Barszcz, Piotr Janeczek

• Horizontal bar with metric and dynamic opacity – Tomasz Pawiłojć

• Horizontal Forecast – Piotr Janeczek

• MicroChart – Bar Chart – Michał Janowski

• Pie Chart – Piotr Janeczek

• Horizontal-Group Chart – Piotr Janeczek


• Radial Bar Chart – Piotr Janeczek

• Ring Chart – Xavier Rauch

• Sparkline and Spark Bar Chart – Piotr Janeczek & Vincent Vikor

All the above metrics can be found in the Excel file, alongside definitions, requirements and code

generator.

DESCRIPTION (WITH EXAMPLES) OF EXISTING METRICS

Below, there is a description of numerous svg metrics, that can be used to create

visualizations. If it is not stated otherwise, all of them should be used inside grid.

Bar Chart

This is the easiest metric presented in the document. The bar is created by writing ASCII

character █ (ASCII code 219) chosen number of times, next to each other. It is possible to format

the color and alignment within the dossier by selecting format of the grid, and then values.

Pros:

• Extremely easy to use, very short code

Cons:

• Space between ASCII characters can be visible – especially when the dossier is exported to

PDF


Bullet Chart (Lipstick Chart)

This visualization works best if we have 3 metrics, for example: Actual Value, Last Year’s

Value and Target Value. They are represented, in order, by dark thin bar, light thick bar and small

black line. Colors as well as number format, can be customized.

Pros:

• In MicroStrategy 2020, we do not have Bullet Chart Visualizations and it is often required

by a customer

• It is really flexible in terms of colors, number format, thickness of bars

• It can be used even on IPad and IPhone

Cons:

• Understanding the code is necessary if you want to change anything besides metric

names and colors


Bullet Chart Banding (Threshold Chart)

The above visualizations is similar to the previous one in many ways (both are Bullet Charts).

The main difference is the background – here it is not one (Last Year’s Value) but 3 metrics, defining

thresholds for Low, Medium and High Value. Everything can be customized by the user in excel file.

Pros:

• Again, in MicroStrategy 2020, we do not have Bullet Chart Visualizations and it is often

required by a customer

• It is really flexible in terms of colors, number format, thickness of bars

Cons:


names and colors


Gauge Chart

Gauge charts are often a required visualization by a customer. They present the fulfillment

of a target or another metric, that is between 0% and 100%, and can have bands applied (like Very

Bad, Bad, Good, Very Good).

Pros:

• In MicroStrategy 2020, we do not have Gauge Chart Visualizations and it is often required

by a customer

• It is working on iOS

Cons:


names and colors

• It is a really simple looking visualization – maybe be way to little for a customer


Half-Doughnut Chart

Half-Doughnut, like a gauge, presents a percentage metric (i.e. fulfillment of the target)

on a curved bar, with an exact number below. This visualization can be created in two versions –

with rounded curve, or not. The colors of the bars are showing how good the performance was,

and are possible to be changed.

Pros:

• Another great way of showing fulfilment of the target or percentage metric

• Has a value instead of big arrow so this visualization is a lot more useful than gauge

Cons:


names and colors


Horizontal Bar

Similar to the Bar Chart. The main difference is that here we are not using ASCII character

to draw a bar, but svg code. The code is simple, and visualization is working on every device.

Pros:

• Easy to use

• No more spaces between rectangles (like in Bar Chart)

Cons:

• It is just a rectangle, no possibility to add values/names here


Horizontal bar with metric and dynamic opacity

This metric is based on the previous one. What is added here, are metric values in the middle

and opacity (the bar is darker for greater values). Last feature may be problematic on IOS – we need

to make sure that color-opacity is between 0% and 100%. So it should be used here if there is no

leader with a huge advantage.

Pros:

• This feature is very often required by a customer

• Adding metric value in the middle may be better than at the end or next to

Cons:

• Having a leader with a huge advantage may result in huge differences between bar

lengths and colors


Horizontal Forecast (2 versions)

This visualization (both versions of it) may be really useful for presenting completion of the

forecasted target. However, it doesn’t look good when percentage of completion is extremely low

or high. What is more, even though visualization is working on iOS, formatting may be problematic

– the whole bar is often small, despite looking well in chrome. It also requires changes within the

code of the metric.


Pros:

• Very nice looking visualizations, showing fulfillment of the target

Cons:

• A lot of changes have to be hard coded, so without understanding the code of the metric

it may be hard

• Second version is not working on iOS


MicroChart – Bar Chart

MicroCharts are visualizations that MicroStrategy has in Document, but not in Dossier.

Customers often ask for them, so the visualization seen above is some workaround, that gives

possibility to imitate MicroCharts. This metric should be used on compound grid (rather than

standard one). It requires only one metric and a time attribute (year, quarter, month).

Pros:

• MicroCharts are often required to show time trend on short space

• A lot of information in one place

Cons:

• Complex code, so making any changes may be problematic (for example space between

bars)


Horizontal-Group Chart

The above visualization is a great way to show data, in case you have both, negative and

positive values of some metric (for example some YoY Growth). Like it was said regarding

previous visualization, MicroCharts are often required (or just really useful) and we don’t have

them in the Dossier.

Pros:

• MicroCharts are often required to show time trend on short space

• Really nice way to show difference in values

Cons:

• Complex code, so making any changes may be problematic (for example space between

bars)


Pie Chart

The original Pie Chart is a standard MicroStrategy visualization, but sometimes it may be

useful to put it inside the grid, as a MicroChart. It is another way of showing fulfillment of the

target or a metric that can be put on a scale from 0% to 100% (like happiness on the screen

above).

Pros:

• Rather simple visualization (code is not complicated)

• Useful way of using the pie chart

• Helpful in reading the grid

Cons:

• Gives only general idea about fulfillment or value


Radial Bar Chart

A Radial/Circular Bar Chart is simply a Bar Chart plotted on a polar coordinate system,

rather than on a Cartesian one. This visualization looks really cool, however it may be misleading.

Longer bars not always mean greater value, because here the angle is the most important

indicator.

Pros:

• Great, aesthetic visualization

Cons:

• May be misleading

• Small changes in code are essential to be able to increase/decrease number of bars


Ring Chart

Ring charts, like Horizontal Forecast before, may be used to present fulfillment of the

target. Here, the percentage of meeting the target is presented. Unfortunately, problems on iOS

with formatting may occur in that case (i.e. very small ring).

Pros:

• Good way to present meeting of the target

• More flexible than Pie Charts (with ring option) in terms of thickness of the ring.

Cons:

• Complex code and some formatting (text and ring) must be done there


Sparkline and Spark Bar Chart

Sparkline is a very small line chart, presenting the general shape of the variation (typically

over time) of some measurement. It gives a general overview of the trend. We have that

visualization in a Document, but not in a Dossier and customers often requires it. That’s why

adding sparkline here was extremely important. Spark Bar is a bar chart version of a Sparkline.

Pros:

• Visualization often required by customers

• Gives overview of a trend right on spot

• Has tooltips


Cons:

• Provides only general information about values

• Very, very, very complicated code


CREATING SVG METRIC WITH EXCEL FILE

The excel file gives possibility to make some changes to the metric without understanding

the code. Below there is an example of how to use it and create SVG metric by yourself.

Creating Bullet Chart – example

To use that visualization, we need 3 metrics. Bullet Chart is often used to show value

versus Last Year and Target. In our case, let’s suppose we want to present profit metric as Bullet

Chart. Then we need to go to excel file and see:

These are some basic information about metric, along with requirements. It may be good to look

at it to understand what we need to use it. Next column is a code:

You can skip it, if you want. However, it may be useful to understand the code to be able to make

more changes in the future. It is not required though to be able to use it, so we can go to the next

column set:


Above is the most important place when you want to use the metric. The yellow fields are

required to be fulfilled. In our case we have 3 metrics and 5 colors (which can be written as name

or hexagonal code). When you write all the names and choose colors, you need to just copy the

field under “generator” and paste it in dossier, in metric creator, like this:

The only thing that is left, is to drag and drop the created metric to the grid. You can also add

attributes – for example to show Profit by Call Center.


Creating Ring Chart – example

To use that metric we need only 2 metrics (which is rather 1 metric and 100% minus that

metric). However, it is more complicated than the previous one, because this time we will create 3

new derived metrics. As you can see, below Ring Chart picture there is a lot of space:

The reason is we need 2 help metrics, shown below:

The first step is easy – we need to copy the CSS code from generator column and paste it in

dossier, in metric creator. Remember to name that metric CSS. Then, we can concentrate on the

“donut” part.


Firstly, we need to fill two fields for the metrics. They have to be a number between 0 and 100, so

that’s why in our case it is 100*Profit/[Profit All]. The second metric is just a complement to 100.

Then we need to choose colors for inside circle and both parts of the ring. Lastly, we need a label

(here it is Profit Margin). Now we can again copy and paste created metric in generator column

and put it in the creator in dossier. Name that metric Donut. There is only one step left –

concatenating both metrics. You need to create a metric “Concat(CSS,Donut)” and that’s it. Ring

Chart is waiting to be dragged and dropped to the grid.


KNOWN ISSUES AND LIMITATIONS

SVG metrics are really useful in many cases. However, there are some limitations and

problems with them. Some of them were mentioned before, so below is a whole list with more

detailed explanation.

SVG metric is not working on IPad/IPhone

This is the most challenging and important problem. A lot of metrics magically disappear

when opened in a dossier on IPad. It is a well-known problem, without a simple solution. It lays in

a code and the fact that IOS is less tolerant with some small mistakes. For example, when you

define a color like ‘ #1fb2e5’, web browser won’t take into consideration the additional space in

the beginning. However, on IPad it won’t work, and you will the custom color applied (probably

black). There are other problems, enumerated below:

• When defining y value within the code, it cannot be a percentage – it has to be a number

value

• Several svg statements (<svg>…</svg><svg>…</svg>) are not allowed

• When defining the font, instead of writing “font: bold 10px sans-serif; fill: white;”, we need

to write a full version “font-size: 10px; font-weight: bold; font-family: sans-serif; fill: white;”

• Fill-opacity of the rectangle must be between 0% and 100%. In web browser, greater

values are treated as 100%, when on IOS 145% looks like 45%

• Scale on IPad is completely different. For example, while using Ring Chart, in web browser

everything looks fine. However, on IOS the visualization is extremely small. If we get rid of

“fit to container” option for rows, and use fixed instead, the size goes back to expected

one but it looks like zooming small picture – so the text looks terrible.


Some changes are possible only in code

The purpose of the whole project was to make svg metrics more known and use them

without understanding the code, just by using generator. It is possible right now, however like

always, not every change can be done in the code generator. There are to many variables and

including them would make the file unreadable. In standard cases, the generator should be

enough. However, we strongly encourage to read and understand what stands in code over time.

It will give you possibility to make more changes and customize it as you need/like.

It is just a workaround…

Like the title says, svg metrics are just workaround to get the visualizations we need or

customer asks for. They won’t work as standard Bar or Line Chart, so we would just have to drag

and drop attributes and metrics to get visualization, which can be further formatted. Here, most

of the work is done in code, which makes it more flexible, but a lot harder to understand and

read. Sometimes an unnecessary space or comma can make whole metric validated but not

working, and we will spend hours looking for that bug. C’est la vie!

svg documentation - microstrategy

Documents