<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a Morris.js chart!</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/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>
</head>
<body>
<h1>US unemployment rate</h1>
<p>Unemployment refers to the share of the labor force that is without work but available for and seeking employment. Measured in % of total labor force</p>
<div id="myfirstchart" style="height: 300px;">
</div>
<h5>Source: World Bank </h5>
</body>
</html>
body {
padding: 0px 20px 10px 30px;
font-family: 'Roboto', sans-serif;
}
p {
line-height: 1.4em;
}
h5 {
border-top: 1px solid #000;
display: inline;
font-weight: 400;
}
new Morris.Line({
element: 'myfirstchart',
xkey: 'dates',
ykeys: ['rate'],
labels: ['Unemployment rate'],
xLabels: ['year'],
lineColors: ['#C00'],
postUnits: ['%'],
goals: ['6.6'],
goalStrokeWidth: ['2px'],
goalLineColors: ['#000'],
pointSize: ['3px'],
gridTextSize: ['14px'],
gridTextColor: ['#777'],
gridTextFamily: ['Roboto'],
hideHover: ['auto'],
resize: ['auto'],
data: [
{
"index": "Unemployment rate",
"rate": 4.8,
"year": 2001,
"dates": "2001-1"
},
{
"index": "Unemployment rate",
"rate": 5.9,
"year": 2002,
"dates": "2002-1"
},
{
"index": "Unemployment rate",
"rate": 6.1,
"year": 2003,
"dates": "2003-1"
},
{
"index": "Unemployment rate",
"rate": 5.6,
"year": 2004,
"dates": "2004-1"
},
{
"index": "Unemployment rate",
"rate": 5.2,
"year": 2005,
"dates": "2005-1"
},
{
"index": "Unemployment rate",
"rate": 4.7,
"year": 2006,
"dates": "2006-1"
},
{
"index": "Unemployment rate",
"rate": 4.7,
"year": 2007,
"dates": "2007-1"
},
{
"index": "Unemployment rate",
"rate": 5.9,
"year": 2008,
"dates": "2008-1"
},
{
"index": "Unemployment rate",
"rate": 9.4,
"year": 2009,
"dates": "2009-1"
},
{
"index": "Unemployment rate",
"rate": 9.7,
"year": 2010,
"dates": "2010-1"
},
{
"index": "Unemployment rate",
"rate": 9,
"year": 2011,
"dates": "2011-1"
},
{
"index": "Unemployment rate",
"rate": 8.2,
"year": 2012,
"dates": "2012-1"
},
{
"index": "Unemployment rate",
"rate": 7.4,
"year": 2013,
"dates": "2013-1"
},
{
"index": "Unemployment rate",
"rate": 6.2,
"year": 2014,
"dates": "2014-1"
}
]
});
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |