Skip to content

Instantly share code, notes, and snippets.

@kuldipem

kuldipem/index.html

Created August 29, 2018 17:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kuldipem/fe3033f222e07171df0b4660ff542af2 to your computer and use it in GitHub Desktop.
Save kuldipem/fe3033f222e07171df0b4660ff542af2 to your computer and use it in GitHub Desktop.
Download ZIP
Morris.js Line Chart Example// source http://jsbin.com/yohegob
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
</head>
<body>
<div id="smooth-area-chart"></div>
<script id="jsbin-javascript">
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
Morris.Area({
element: 'smooth-area-chart',
data: [{
month: '2018-01',
completedjobs: 0,
upcomingjobs: 0,
pendingjobs:0
}, {
month: '2018-02',
completedjobs: 150,
upcomingjobs: 90,
pendingjobs:60
}, {
month: '2018-03',
completedjobs: 140,
upcomingjobs: 120,
pendingjobs:100
}, {
month: '2018-04',
completedjobs: 105,
upcomingjobs: 240,
pendingjobs:290
}, {
month: '2018-05',
completedjobs: 190,
upcomingjobs: 140,
pendingjobs:90
}, {
month: '2018-06',
completedjobs: 230,
upcomingjobs: 250,
pendingjobs:270
}],
xkey: 'month',
ykeys: ['completedjobs', 'upcomingjobs', 'pendingjobs'],
labels: ['Completed Jobs', 'Upcoming Jobs', 'Pending Jobs'],
behaveLikeLine: true,
ymax: 300,
resize: true,
pointSize: 0,
pointStrokeColors: ['#66BB6A', '#FFA726', '#EF5350'],
smooth: true,
gridLineColor: '#e3e3e3',
numLines: 6,
gridtextSize: 14,
lineWidth: 0,
fillOpacity: 0.8,
hideHover: 'auto',
lineColors: ['#66BB6A', '#FFA726', '#EF5350'],
xLabelFormat: function (x) { return months[x.getMonth()]; }
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"><\/script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"><\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"><\/script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
</head>
<body>
<div id="smooth-area-chart"></div>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
Morris.Area({
element: 'smooth-area-chart',
data: [{
month: '2018-01',
completedjobs: 0,
upcomingjobs: 0,
pendingjobs:0
}, {
month: '2018-02',
completedjobs: 150,
upcomingjobs: 90,
pendingjobs:60
}, {
month: '2018-03',
completedjobs: 140,
upcomingjobs: 120,
pendingjobs:100
}, {
month: '2018-04',
completedjobs: 105,
upcomingjobs: 240,
pendingjobs:290
}, {
month: '2018-05',
completedjobs: 190,
upcomingjobs: 140,
pendingjobs:90
}, {
month: '2018-06',
completedjobs: 230,
upcomingjobs: 250,
pendingjobs:270
}],
xkey: 'month',
ykeys: ['completedjobs', 'upcomingjobs', 'pendingjobs'],
labels: ['Completed Jobs', 'Upcoming Jobs', 'Pending Jobs'],
behaveLikeLine: true,
ymax: 300,
resize: true,
pointSize: 0,
pointStrokeColors: ['#66BB6A', '#FFA726', '#EF5350'],
smooth: true,
gridLineColor: '#e3e3e3',
numLines: 6,
gridtextSize: 14,
lineWidth: 0,
fillOpacity: 0.8,
hideHover: 'auto',
lineColors: ['#66BB6A', '#FFA726', '#EF5350'],
xLabelFormat: function (x) { return months[x.getMonth()]; }
});</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment