SVG DOCUMENTATION

Description of svg metrics with known limitations

Tomasz Pawiłojć
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

Copyright ©2020. All Rights Reserved. 2

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

Copyright ©2020. All Rights Reserved. 3

 • 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

Copyright ©2020. All Rights Reserved. 4

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

Copyright ©2020. All Rights Reserved. 5

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:

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

names and colors

Copyright ©2020. All Rights Reserved. 6

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:

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

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

Copyright ©2020. All Rights Reserved. 7

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:

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

Copyright ©2020. All Rights Reserved. 8

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

Copyright ©2020. All Rights Reserved. 9

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

Copyright ©2020. All Rights Reserved. 10

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.

Copyright ©2020. All Rights Reserved. 11

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

Copyright ©2020. All Rights Reserved. 12

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)

Copyright ©2020. All Rights Reserved. 13

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)

Copyright ©2020. All Rights Reserved. 14

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

Copyright ©2020. All Rights Reserved. 15

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

Copyright ©2020. All Rights Reserved. 16

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

Copyright ©2020. All Rights Reserved. 17

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

Copyright ©2020. All Rights Reserved. 18

Cons:

• Provides only general information about values

• Very, very, very complicated code

Copyright ©2020. All Rights Reserved. 19

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:

Copyright ©2020. All Rights Reserved. 20

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.

Copyright ©2020. All Rights Reserved. 21

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.

Copyright ©2020. All Rights Reserved. 22

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.

Copyright ©2020. All Rights Reserved. 23

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.

Copyright ©2020. All Rights Reserved. 24

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!

Copyright ©2020. All Rights Reserved. 25

1850 Towers Crescent Plaza | Tysons Corner, VA 22182 | Copyright ©2020. All Rights Reserved. microstrategy.com