Moris.js Jump Start PRO

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.

Share:

The Visitor Design Pattern

The Visitor Design Pattern

The visitor design pattern allows us to add operations to objects that already exist without modifying their classes and without extending them.

The Beauty of Code

Coding is Art! Developing Code That Works is Simple. Develop Code with Style is a Challenge!

Update cookies preferences