Scorecard is not responsive..any workaround?

I have developed scorecard and embedded in one of dashboard with black theme. Both dashboards and Scorecards has black theme.
As scorecard is not responsive, it showing white spaces at both end in browser,hence dashboard is not looking good. Any way to fix it?

Since no one else is going to answer, I’ll give you my politically incorrect answer.

In short, I don’t like Dundas’ responsive implementation.

I therefore use scale resizing for all desktops and large tablets, and otherwise I switch to a separate, mobile version of a dashboard for phones and small tablets.

In truth, when it comes to BI and mobile devices vs desktop, I think responsive interfaces are a bit of a myth.

For example, consider the following trend analysis set of dashboards:

In a proper responsive mode, these would be re-positioned one above the other, but research proves that the human eye is terrible in comparing two sets of values when they are not visible at the same time (i.e. when you have to scroll up and down between them).

What I do instead is detect when the screen size falls below x by y, and switch instead to Version B of this dashboard, which uses a fade-out mechanism to show how the rolling period chart differs from the calendar year chart, i.e the user can simply click an icon which switches between the calendar vs rolling periods using a fade in/out mechanism.

No way you can achieve that in responsive mode.



Hi Prashant,

You’re right, scorecards don’t have a responsive or resize mode right now although I’m not sure yet if that’s what you wanted. When I try what you describe and embed a scorecard with a black background in a dashboard with a black background, I don’t see any white spaces on any edge even when the scorecard is given extra space. Maybe a picture will help?

Hi Wayne,

I think the original question was more about embedding a Scorecard view and not so much about the particular ways responsive dashboards lay out their contents, but I agree with you that a dashboard full of visualizations meant to be directly compared with each other or where the layout was otherwise carefully thought out may not be compatible with a responsive layout. If you do have a responsive dashboard and just want to keep two charts like yours sharing the same Y axis side-by-side, you can put them in one template cell and they won’t ever be separated into different rows, although many visualizations are not so closely related to each other. Otherwise, Responsive is just one option, and yes you may want to use it only for a phone-friendly version of a dashboard or where there isn’t a strong need to lay out the visualizations in a specific way.

Another option I think you should consider besides Scale and the default Scroll is the regular “Resize” mode, which will resize the contents proportionally but without breaking up any rows or any other major layout changes. It still may not be compatible with just any dashboard since the sizes of the visualizations are going to change.