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.