Morris graphs in bootstrap

by sunil puvvada

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="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>
<div id="monitor" class="panel panel-default tab-box">
    <div class="panel-heading">
           <ul class="nav nav-pills">
            <li class="active"> <a href="#fuel-tab" data-toggle="pill" data-identifier="line, donut">Fuel data</a>

            </li>
            <li> <a href="#co2-tab" data-toggle="pill" 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>
                    </div>
                </div>
            </div>
            <div id="co2-tab"...

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()");
    })
});
// on doc ready
$(function () {
    // Fuel consumption //
    // Data set for fuel consumption
    var fuel_data = [{
        "period": "2013-01",
        "city": 66
    }, {
        "period": "2013-02",
        "city": 62
    }, {
        "period": "2013-03",
        "city": 61
    }, {
        "period": "2013-04",
        "city": 66
    }, {
        "period": "2013-05",
        "city": 67
    }, {
        "period": "2013-06",
        "city": 68
    }, {
        "period": "2013-07",
        "city": 62
    }, {
        "period": "2013-08",
        "city": 61
    }, {
        "period": "2013-09",
        "city": 58
    }, {
        "period": "2013-10",
        "city": 60
    }, {
        "period": "2013-11",
        "city": 60
    }, {
        "period": "2013-12",
        "city": 62
    }];
    // 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: ['#A52A2A', '#72A0C1', '#7BB661']
        //yLabelFormat: function(y) { return y.toString() + ' l/100km'; }
    }

    // Make a line chart from the parameters
    line = Morris.Line(fuel_consumption)
    // / Fuel consumption //

    // Fuel projection //
    // Data set for fuel projection
    var projection_data = [{
        label: 'Until today',
        value: 180
    }, {
        label: 'Projected',
        value: 400
    }, ]
    // Donut chart parameters for fuel projection
    var fuel_projection = {
        element: 'fuel-projection',
        hideHover: 'auto',
       ...