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...

Difference Between ext.js & ext-all.js

When we start the development of a new Ext JS project, the first thing we have to do is to add the imports of Ext JS files on the HTML page. If we choose a version of the ext-all file, the browser will load the entire Ext JS framework. If we choose a version of the ext.js file, the browser will load the minimum code required to execute the application, and we can make use of the new dynamic loading feature.

For development and testing, we can use ext.js, because it will use only the required Ext JS code to run the application; but, we cannot forget to add the src folder to the application extjs directory. For production, we can use the ext-all.js file, because it already contains the entire Ext JS framework and has good performance.

There is also a file named bootstrap.js; instead of importing ext-all.js into your HTML page, you can import bootstrap.js. The only thing that this file does is import ext-all.js or ext-all-debug.js, depending on the environment you are using. It will load ext-all-debug.js in the following cases:

1. Current hostname is localhost.
2. Current hostname is an IP(v4) address.
3. Current protocol is a file.
4. Otherwise, bootstrap will load the ext-all.js file.

Continue Reading...

Extjs 4 HBox Layout

The HBox layout organizes its children horizontally across the container. You can set two optional configurations to organize the child's width and height across the parent's body.

The flex configuration will tell the parent Component how to organize the child Components horizontally, based on the relative flex configuration. The align configuration will tell the child Components how to use the height across the parent. Let's consider that we have two panels and we want to display these panels inside a Window:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 HBox Layout Example</title>

<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />

<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

 var panel1 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 1',
  html: 'Panel 1',
  flex: 1
 });

 var panel2 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 2',
  html: 'Panel 2',
  flex: 3
 });

 var hbox = Ext.create('Ext.window.Window', {
  title: 'HBox Layout -  Tutorial Jinni',
  width: 300,
  height:100,
  layout: {
         type: 'hbox',
         align: 'stretch'
     },
  defaults: {
   bodyStyle: 'padding:10px'
     },
  items: [panel1, panel2]
 });
 hbox.show();
});

</script>
</head>
<body>
</body>
</html>

In the preceding code, we have two panels. Each panel has its title and HTML content. Each one also has a flex configuration. The first panel configured flex as 1 and the second panel configured the flex config as 3. The Window will sum these flex configs (in this example, the total will be 4) and will distribute the horizontal space relative to each child. The first panel will get one-fourth (25%) of the window's horizontal space and the second panel will get three-fourths (75%) of the window's horizontal space.

In the Window declaration, we have the layout config. It tells the Window that we are going to use the hbox layout and align of the child Components will be stretch, meaning that we can use the full height of the window's vertical space.

When we execute the code, the following will be the output:

If we try to resize the Window, children will be resized as well, according to their configuration.

Continue Reading...

Extjs 4 Absolute Layout

The Absolute Layout class is a subclass of Anchor Layout, and that is why it inherits the anchoring feature from its mother class. Like the Anchor Layout, the Absolute Layout also allows you to set an x and y configuration, which means the location of the Component will be located in its parent's body.

Let's try to add a Panel in a Window using the Absolute Layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 Absolute Layout Example</title>

<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />

<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

 var panel1 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 1',
  html: 'x: 10; y: 10 - anchor: 80% 80%',
  anchor:'80% 80%',
  x: 10,
        y: 10
 });

 var absolute = Ext.create('Ext.window.Window', {
  title: 'Absolute Layout Example - Tutorial Jinni',
  width: 300,
  height: 200,
  layout:'absolute',
  defaults: {
         bodyStyle: 'padding:10px'
     },
  items: [panel1]
 });
 absolute.show();
});

</script>
</head>

<body>
</body>
</html>

In the preceding code, we have a Window with a title, width(300 pixels), height (200 pixels), using the Absolute Layout. This Window contains only one Panel as the child item. The panel we declared as the Window item is panel1. This panel has a title and HTML content. We set the anchor as 80%of the parent's width and 80%of the parent's height. We also set the position of panel1 in its parent's body, which is x=10 and y =10.

The upper-left corner of the Window will be x=0 and y=0.

The code output will be as follows:

If you re-size the outer container (Window), its child is going to be re-sized according to its anchor rule. The position of the child items will not change with the re-sizing.

Continue Reading...

Extjs 4 Anchor Layout

The Anchor Layout allows anchoring the container's children according to its dimension. If you re-size the outer container, all its children will be automatically re-sized according to the children's anchor rules. Just like the Auto Layout, the Anchor Layout also stacks its children according to the order they were added or declared in, in the items config.

For example, we have four panels and we want to add them in a Window using the Anchor Layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 Anchor Layout Example</title>

<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />

<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

 var panel1 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 1',
  html: '100% 30%',
  anchor:'100% 30%'
 });

 var panel2 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 2',
  html: '80% 25%',
  anchor:'80% 25%'
 });

 var panel3 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 3',
  html: '-70 20%',
  anchor:'-70 20%'
 });

 var panel4 = Ext.create('Ext.panel.Panel', {
  title: 'Panel 4',
  html: '-30 25%',
  anchor:'-30 25%'
 });

 var anchor = Ext.create('Ext.window.Window', {
  title: 'Anchor Layout Example - Tutorial Jinni',
  width: 250,
  height:300,
  layout:'anchor',
  defaults: {
         bodyStyle: 'padding:10px'
        },
  items: [panel1, panel2, panel3, panel4]
 });
 anchor.show();
});
</script>
</head>

<body>
</body>
</html>

Let's explain the code starting from the last element declared, which is the Window named anchor. This window has a title, width(250 pixels), height(300 pixels) and is using the Anchor Layout. It also has four children declared in the items config.

Going back to the beginning of the code, we declared four panels. Each one has a title and HTML content. We also set an anchor rule for each one:

• The first panel (panel1) has an anchor specified as 100% of the parent's width(250 pixels, originally) and 30% of the parent's height(30% of the parent's height = 30% of 300 = 90 pixels). 
• The second panel (panel2) has an anchor specified as 80% of the parent's width(80% of 300 = 200 pixels) and 25% of the parent's height(25% of 300 = 75 pixels).
• The third panel (panel3) has an anchor specified as -70 pixels of offset which means this panel will leave 70 pixels of space on the right side of the parent's body and 20% of the parent's height (20% of 300 = 60 pixels). 
• The fourth panel (panel4) has an anchor specified as -30 of offset which means this panel will leave 30 pixels of space on the right side of the parent's body and 25% of the parent's height(25% of 300 = 75 pixels).

When we execute the code, the output will be as follows:

If we try to re-size the Window, all its children will be re-sized according to their anchor rules. Let's try to re-size the window to a bigger size to see what happens:

When we compare the two previous screenshots, we see that when we re-sized the window, it maintained the child panels proportional to their original size.

Continue Reading...