<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<title>Morris.js Bar Chart Example</title>
</head>
<body>
<div id="myfirstchart" style="height: 250px;"></div>
<hr/>
<div id="donut-example"></div>
<hr/>
<div id="bar-example"></div>
<hr/>
<div id="bar-example2"></div>
<script src="script.js"></script>
</body>
</html>
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']
});
Morris.Donut({
element: 'donut-example',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});
Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100 },
{ y: '2007', a: 75 },
{ y: '2008', a: 50 },
{ y: '2009', a: 75 },
{ y: '2010', a: 50 },
{ y: '2011', a: 75 },
{ y: '2012', a: 100 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Backlog Items']
});
Morris.Bar({
element: 'bar-example2',
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']
});
/* Put your css in here */
h1 {
color: red;
}