Now can they be implemented in content that switches between display: block; and display: none; like bootstrap's tabs?
I’ve been working on a prototype for one of my clients who has the need to display data to their users in graphical form. It is easier to digest data in graphical form, easier to spot anomalies etc etc…
One setback with using graphical elements is that they tend to take up a lot of space. Which makes other content less visible, and in data heavy user interfaces, screen real estate is worth a lot in many senses. Thus, developers struggle with the traditional issue of letting users have the cake and eat it at the same time.
Solution -> Tabs. Great stuff, the space issue is resolved, but through implementing tabs we’ve spawned another problem:
Problem -> The tabbed content has the selector attribute display: none;
Now there is a solution to this, we can use the function redraw() that comes with morris, and we’ll jack it up to the bootstrap event that determines the tab is active, shown.bs.tab. So when the bootstrap tab is shown, we draw some graphs.
The complete working solution can be found here:
So there you have it, pretty pretty morris graphs in bootstrap tabs. I’ll include all the code snippets at the end here if you’d rather read it here than on jsFiddle.
Additional resources needed:
- bootstrap 3 css & js
Full source code can be found here:
<a href="http://blog.b3rgstrom.se/post/68081765878/morris-js-charts-in-bootstrap-tabs">Responsive Morris.js graphs in Bootstrap 3 tabs</a>