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.
