Moris.js is a simple basic JavaScript library for creating good looking charts. Moris.js uses jQuery and Raphael. The following video clip shows how to create a simple chart using this library.

The following code sample is the one the video clip overviews. You can find more code samples at moris.js website.

<!DOCTYPE html>
<html>
<head>
    <title>Moris Demo</title>
    <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
</head>
<body>
    <div id="mychart" style="height: 280px;"></div>
    <script type="text/javascript">
        new Morris.Line({
            element: 'mychart',
            data: [
                { year: '2003', value: 304 },
                { year: '2004', value: 508 },
                { year: '2005', value: 724 },
                { year: '2006', value: 823 },
                { year: '2007', value: 655 },
                { year: '2008', value: 423 },
                { year: '2009', value: 845 },
                { year: '2010', value: 1024 },
                { year: '2011', value: 1223 },
                { year: '2012', value: 808 }
            ],
            xkey: 'year',
            ykeys: ['value'],
            labels: ['Sales']
        });
    </script>
</body>
</html>

You can find more slides and video clips for learning how to use the moris.js library in my new Moris.js Basics free course at http://abelski.lifemichael.com.

Leave a Reply

Your email address will not be published. Required fields are marked *