Center Align Microstrategy Dashboard using HTML page and iFrame

If you want to center align your dashboard in microstrategy and you are using express mode, than simple jQuery trick won't work inside an HTML container. Now, you would need some thing more. This can be done using a simple HTML page which will point to your MSTR dashboard using iFrame.

Steps:

1. Create a html file and paste the following code


<style type="text/css">
body {
overflow:hidden;
margin:0px;
}
</style>

<iframe id='db1' src="https://yourservername.com/MicroStrategy/servlet/mstrWeb;jsessionid=6EA16051877A9FDDFD626CEEB093DF20?Server=yourMSTRServerName&Project=yourProjectName&Port=0&evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=1&documentID=0OP2376F412239HJ12AB8D9616930CE8"

style='height:102%;border:none;' width="100%" height="102%"></iframe>
<script>

document.addEventListener("DOMContentLoaded",init);


function init() {
var dbWidth=Number(1200);
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],
x=w.innerWidth||e.clientWidth||g.clientWidth,
y=w.innerHeight||e.clientHeight||g.clientHeight;
elem = document.getElementById("db1");
var leftMargin=(x-dbWidth)/2;
elem.style.marginLeft = leftMargin+'px';
elem.style.width=dbWidth+"px";

}


</script>


2. Now change the iFrame src with your mstr dashboard URL
3. Change the dbWidth parameter with your dashboard width
4. Save the page and host it on a webserver

Now, browse the above published page and you should see your dashboard center aligned irrespective of MSTR view mode

Center Align Microstrategy Dashboard

There are many times when you want your MSTR dashboard to be center aligned, but its not. If your dashboard is viewed in Interactive mode then there is a simple trick to achieve same. This can be done by adding simple javascript code in a html container.  You may find same approach on other blogs, but they use jQuery. WHile you use jQuery, you need to load jQuery lbrary files which some times is a problem. Hence, I decided to write the same using only javascript.

Steps:


1. Add an HTML container in your dashboard and paste the below code into it.

<script>

document.addEventListener("DOMContentLoaded",init);

document.addEventListener("resize", init);

function init() {

var dbWidth= Number(1200);

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],

x=w.innerWidth||e.clientWidth||g.clientWidth,

y=w.innerHeight||e.clientHeight||g.clientHeight;

elem = document.getElementById("rwb_viewer");

var leftMargin=(x-dbWidth)/2;

elem.style.left = leftMargin+'px';

}

</script>

2. Replace the dbWidth value with your dashboard width (in this example its 1200)

3. Make the color of HTML container as your background color or place it behind some component to hide it.

4. Save the dashboard and run it in Interactive mode.

How to Fix non continuous/ step lines in line Graph in Microstrategy

How to Fix non continuous/ step lines in line Graph:

Using desktop edit graph properties and uncheck step line option from Series properties.