Error Uncaught ReferenceError: Morris is not defined

I'm trying to imply morris.js but I get the following error:

I tried to implement seeing some tutorials, it really is very easy but so far I get the following

new Morris.Line({
  element: 'myfirstchart',
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  xkey: 'year',
  ykeys: ['value'],
  labels: ['Value']
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <link rel="stylesheet" href="~/js/morris.css">
    <script src="~/js/sweetalert.min.js" charset="utf-8"></script>
</head>
<body>
    <div class="container">
        <h2>Costos por proyecto</h2>
        <hr>
        <div class="col-lg-6">
            <h2>Costos</h2>
            <hr>
            <div id="myfirstchart"></div>
        </div>
        <div class="col-lg-6">
        </div>
    </div>
    <script src="~/js/graficas.js" charset="utf-8"></script>
</body>
</html>

I get the following error:

Uncaught ReferenceError: Morris is not defined

Solution

you forgot to add one script line:

<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

see getting started: https://morrisjs.github.io/morris.js/