<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;
}
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': 'https://raw.githubusercontent.com/miguelpaz/jlab/master/data/example5_us_time.json',
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})
();
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: ['true'],
data: json
});
Output
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. |