Morris graphs in bootstrap tabs

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://dl.dropboxusercontent.com/u/22337876/morris.js"></script>
     
  <script>
    $('ul.nav a').on('shown.bs.tab', function (e) {
    var types = $(this).attr("data-identifier");
    var typesArray = types.split(",");
    $.each(typesArray, function (key, value) {
        eval(value + ".redraw()");
    })
});
// Morris graphs ---------------------------------------------------------- //
// on doc ready
$(function () {
    // Fuel consumption //
    // Data set for fuel consumption
    var fuel_data = [{
        "period": "2013-01",
        "city": 66,
        "highway": 34,
        "idle": 9
    }, {
        "period": "2013-02",
        "city": 62,
        "highway": 33,
        "idle": 8
    }, {
        "period": "2013-03",
        "city": 61,
        "highway": 32,
        "idle": 7
    }, {
        "period": "2013-04",
        "city": 66,
        "highway": 32,
        "idle": 6
    }, {
        "period": "2013-05",
        "city": 67,
        "highway": 31,
        "idle": 5
    }, {
        "period": "2013-06",
        "city": 68,
        "highway": 43,
        "idle": 7
    }, {
        "period": "2013-07",
        "city": 62,
        "highway": 32,
        "idle": 5
    }, {
        "period": "2013-08",
        "city": 61,
        "highway": 32,
        "idle": 5
    }, {
        "period": "2013-09",
        "city": 58,
        "highway": 32,
        "idle": 7
    }, {
        "period": "2013-10",
        "city": 60,
        "highway": 32,
        "idle": 7
    }, {
        "period": "2013-11",
        "city": 60,
        "highway": 32,
        "idle": 6
    }, {
        "period":...

CSS

.tab-box .panel-heading > .nav-tabs {
        float: right;
        margin-top: -2px;
        display: inline-block;
        border-bottom: 0;
    }
    .tab-box .panel-heading > .nav-tabs > li > a {
        border: 0;
        padding: 6px 7px;
    }
    @media (min-width: 444px) {
        .tab-box .panel-heading > .nav-tabs > li > a {
            padding: 6px 15px;
        }
    }
    .tab-box .panel-heading > .nav-tabs > li.active > a {
        border-left: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        border-bottom: 0;
        border-top: 1px solid #7c1c1d;
        background: #fff;
    }
    .panel.panel-default > .panel-heading h3 {
        display: inline-block;
    }
    svg {
        width: 100% !important;
    }