jQuery Hello World Plugin

In this tutorial we are going to make a very simple jQuery plugin. Sometimes its important just to see the simple first step, instead of getting caught in the complexities of detail. So lets start writing the our Hello World Plugin sayHello.

(function ( $ ){
 $.fn.sayHello=function(){
  this.html("Hello World from jQuery Plugin");
 };
})(jQuery); 

First we need to wrap our code into an self executing function, so that when the page load it executes. Then we pass a jQuery object $ as a parameter to avoid variable conflict. Next we need to extend the jQuery Prototype $.fn. and add a new function sayHello, this function will change the HTML of the target div with the content as shown above. You can use it as shown below,

<div id="helloWorldDiv"></div>
<script>
$(document).ready(function () {
  $('#helloWorldDiv').sayHello();
});
</script>

That's it for this tutorial, in coming tutorials we will look deep in jQuery Plugin development.

Continue Reading...

Morris JQuery Charts by Example

In this tutorial we will look in to a light weight jquery charting library namely morris.js which uses Raphael which is used to simplify work of making vector graphics.

There are two ways of getting morris.js to life first is by hosting the entire library on your own service by downloading the Zip bundle, other is by using the morris.js CDN, we will use the later approach for our tutorial. To get started you need to add follwing line of code in your HTML page. First we need to add its dependencies jquery and Raphael.

<link rel="stylesheet" href="//cdn.oesmith.co.uk/morris-0.4.1.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="//cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

Now add a <div> to your page that will contain your chart. Make sure it has an ID so you can refer to it in your Javascript later.

<div id="myfirstchart" style="height: 250px;"></div>

Next add a <script> block to the end of your page, containing the following javascript code:

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});

if everything work as per plan you will see a graph below...

a morris donut chart config

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

a morris bar chart config

Morris.Bar({
  element: 'bar-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

it will render like the following

a morris area chart config...

Morris.Area({
  element: 'area-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

it will render like this...

Continue Reading...