Creating Bar Graph Using Morris.js

Step 1: Include required script and css files

<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css”&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script&gt;
<script src=”http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js”></script&gt;
<script src=”http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js”></script&gt;

Step 2: Create div for drawing graph

<div id=”myfirstchart” style=”height: 250px;width:auto”></div>

Step 3: Create a draw function

function draw(data)
{
new Morris.Bar({
// 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, value1: 10 },
{ year: ‘2009’, value: 10, value1: 10 },
{ year: ‘2010’, value: 5, value1: 10 },
{ year: ‘2011’, value: 5, value1: 10 },
{ year: ‘2012’, value: 20, value1: 10 }
],
// 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’,’value1′],
// Labels for the ykeys — will be displayed when you hover over the
// chart.
labels: [‘Actual Work’, ‘Total Work’],
barColors: [‘green’,’blue’],
stacked: false,
hideHover:true,
axes:true,
grid:true,
gridTextColor:’red’,
gridTextSize:16,
gridTextFamily:’Arial’
});
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s