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>
<div id="monitor" class="panel panel-default tab-box">
    <div class="panel-heading">
         <h3 class="panel-title">
            <i class="fa fa-signal"></i>
            Monitoring report
        </h3>

        <ul class="nav nav-tabs">
            <li class="active"> <a href="#fuel-tab" data-toggle="tab" data-identifier="line, donut">Fuel data</a>

            </li>
            <li> <a href="#co2-tab" data-toggle="tab" data-identifier="bar1">Co2 data</a>

            </li>
        </ul>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div id="fuel-tab" class="tab-pane active">
                <div class="row">
                    <div class="col-sm-12 col-md-7 chart">
                        <div class="caption">Fuel consumption last 12 months <span class="label label-default">Liter/100km</span>

                        </div>
                        <div id="fuel-consumption"></div>
                        <div class="legend"> <span id="city" class="label">City</span>
 <span id="highway" class="label">Highway</span>
 <span id="idle" class="label">Idle</span>

                        </div>
                    </div>
                    <div class="col-sm-12 col-md-5 chart">
                        <div class="caption">Fuel projection this month</div>
                        <div id="fuel-projection"></div>
                        <div class="legend"> <span id="projection" class="label">Projection</span>
 <span id="today" class="label">Until today</span>

                        </div>
...

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;
}

JavaScript

$('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": "2013-12",
        "city": 62,
        "highway": 32,
        "idle": 8
    }];
    // Line chart parameters for fuel consumption
    var fuel_consumption = {
        element: 'fuel-consumption',
        hideHover: 'auto',
        data: fuel_data,
        xkey: 'period',
        xLabels: 'month',
        ykeys: ['city', 'highway', 'idle'],
        postUnits: ' l/100km',
        labels: ['City', 'Highway', 'Idle'],
        resize: true,
        lineColors:...