<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg id="chart"></svg>
</body>
</html>
#chart{
height:500px;
}
// Declare dataset
var data = [{
key: "Group A",
values: [{
'label': "01-Oct-2014",
'x': 0,
'y': 4661.9995
}, {
'label': "02-Oct-2014",
'x': 1,
'y': 4537.8468
}, {
'label': "03-Oct-2014",
'x': 2,
'y': 4434.6459
}, {
'label': "04-Oct-2014",
'x': 3,
'y': 2549.9547
}, {
'label': "05-Oct-2014",
'x': 4,
'y': 2285.1853
}, {
'label': "06-Oct-2014",
'x': 5,
'y': 2481.8900
}, {
'label': "07-Oct-2014",
'x': 6,
'y': 4616.2260
}, {
'label': "08-Oct-2014",
'x': 7,
'y': 4527.4563
}, {
'label': "09-Oct-2014",
'x': 8,
'y': 4584.6188
}, {
'label': "10-Oct-2014",
'x': 9,
'y': 4605.3971
}, {
'label': "11-Oct-2014",
'x': 10,
'y': 2612.1516
}, {
'label': "12-Oct-2014",
'x': 11,
'y': 2363.6817
}, {
'label': "13-Oct-2014",
'x': 12,
'y': 3124.4298
}, {
'label': "14-Oct-2014",
'x': 13,
'y': 4616.2260
}, {
'label': "15-Oct-2014",
'x': 14,
'y': 4527.4563
}, {
'label': "16-Oct-2014",
'x': 15,
'y': 4584.6188
}, {
'label': "17-Oct-2014",
'x': 16,
'y': 4605.3971
}, {
'label': "18-Oct-2014",
'x': 17,
'y': 2612.1516
}, {
'label': "19-Oct-2014",
'x': 18,
'y': 2363.6817
}, {
'label': "20-Oct-2014",
'x': 19,
'y': 3124.4298
}, {
'label': "21-Oct-2014",
'x': 20,
'y': 4616.2260
}, {
'label': "22-Oct-2014",
'x': 21,
'y': 4527.4563
}, {
'label': "23-Oct-2014",
'x': 22,
'y': 4584.6188
}, {
'label': "24-Oct-2014",
'x': 23,
'y': 4605.3971
}, {
'label': "25-Oct-2014",
'x': 24,
'y': 2612.1516
}, {
'label': "26-Oct-2014",
'x': 25,
'y': 2363.6817
}, {
'label': "27-Oct-2014",
'x': 26,
'y': 3124.4298
}, {
'label': "28-Oct-2014",
'x': 27,
'y': 4616.2260
}, {
'label': "29-Oct-2014",
'x': 28,
'y': 1371.0258
}]
}, {
key: "Group B",
values: [{
'label': "01-Oct-2014",
'x': 0,
'y': 11347.8000
}, {
'label': "02-Oct-2014",
'x': 1,
'y': 11214.6000
}, {
'label': "03-Oct-2014",
'x': 2,
'y': 11124.0000
}, {
'label': "04-Oct-2014",
'x': 3,
'y': 7821.6000
}, {
'label': "05-Oct-2014",
'x': 4,
'y': 4815.6000
}, {
'label': "06-Oct-2014",
'x': 5,
'y': 11544.6000
}, {
'label': "07-Oct-2014",
'x': 6,
'y': 11315.1000
}, {
'label': "08-Oct-2014",
'x': 7,
'y': 11347.8000
}, {
'label': "09-Oct-2014",
'x': 8,
'y': 11214.6000
}, {
'label': "10-Oct-2014",
'x': 9,
'y': 11124.0000
}, {
'label': "11-Oct-2014",
'x': 10,
'y': 7821.6000
}, {
'label': "12-Oct-2014",
'x': 11,
'y': 4815.6000
}, {
'label': "13-Oct-2014",
'x': 12,
'y': 11544.6000
}, {
'label': "14-Oct-2014",
'x': 13,
'y': 11315.1000
}, {
'label': "15-Oct-2014",
'x': 14,
'y': 11347.8000
}, {
'label': "16-Oct-2014",
'x': 15,
'y': 11214.6000
}, {
'label': "17-Oct-2014",
'x': 16,
'y': 11124.0000
}, {
'label': "18-Oct-2014",
'x': 17,
'y': 7821.6000
}, {
'label': "19-Oct-2014",
'x': 18,
'y': 4815.6000
}, {
'label': "20-Oct-2014",
'x': 19,
'y': 11544.6000
}, {
'label': "21-Oct-2014",
'x': 20,
'y': 11315.1000
}, {
'label': "22-Oct-2014",
'x': 21,
'y': 11347.8000
}, {
'label': "23-Oct-2014",
'x': 22,
'y': 11214.6000
}, {
'label': "24-Oct-2014",
'x': 23,
'y': 11124.0000
}, {
'label': "25-Oct-2014",
'x': 24,
'y': 7821.6000
}, {
'label': "26-Oct-2014",
'x': 25,
'y': 4815.6000
}, {
'label': "27-Oct-2014",
'x': 26,
'y': 11544.6000
}, {
'label': "28-Oct-2014",
'x': 27,
'y': 11315.1000
}, {
'label': "29-Oct-2014",
'x': 28,
'y': 3512.7000
}]
}, {
key: "Group C",
values: [{
'label': "01-Oct-2014",
'x': 0,
'y': 6685.8005
}, {
'label': "02-Oct-2014",
'x': 1,
'y': 6676.7532
}, {
'label': "03-Oct-2014",
'x': 2,
'y': 6689.3541
}, {
'label': "04-Oct-2014",
'x': 3,
'y': 5271.6453
}, {
'label': "05-Oct-2014",
'x': 4,
'y': 2530.4147
}, {
'label': "06-Oct-2014",
'x': 5,
'y': 9062.7100
}, {
'label': "07-Oct-2014",
'x': 6,
'y': 6698.8740
}, {
'label': "08-Oct-2014",
'x': 7,
'y': 6820.3437
}, {
'label': "09-Oct-2014",
'x': 8,
'y': 6629.9812
}, {
'label': "10-Oct-2014",
'x': 9,
'y': 6518.6029
}, {
'label': "11-Oct-2014",
'x': 10,
'y': 5209.4485
}, {
'label': "12-Oct-2014",
'x': 11,
'y': 2451.9183
}, {
'label': "13-Oct-2014",
'x': 12,
'y': 8420.1702
}, {
'label': "14-Oct-2014",
'x': 13,
'y': 6698.8740
}, {
'label': "15-Oct-2014",
'x': 14,
'y': 6820.3437
}, {
'label': "16-Oct-2014",
'x': 15,
'y': 6629.9812
}, {
'label': "17-Oct-2014",
'x': 16,
'y': 6518.6029
}, {
'label': "18-Oct-2014",
'x': 17,
'y': 5209.4485
}, {
'label': "19-Oct-2014",
'x': 18,
'y': 2451.9183
}, {
'label': "20-Oct-2014",
'x': 19,
'y': 8420.1702
}, {
'label': "21-Oct-2014",
'x': 20,
'y': 6698.8740
}, {
'label': "22-Oct-2014",
'x': 21,
'y': 6820.3437
}, {
'label': "23-Oct-2014",
'x': 22,
'y': 6629.9812
}, {
'label': "24-Oct-2014",
'x': 23,
'y': 6518.6029
}, {
'label': "25-Oct-2014",
'x': 24,
'y': 5209.4485
}, {
'label': "26-Oct-2014",
'x': 25,
'y': 2451.9183
}, {
'label': "27-Oct-2014",
'x': 26,
'y': 8420.1702
}, {
'label': "28-Oct-2014",
'x': 27,
'y': 6698.8740
}, {
'label': "29-Oct-2014",
'x': 28,
'y': 2141.6742
}]
}];
nv.addGraph(function () {
var chart = nv.models.lineChart() .useInteractiveGuideline(true)
.margin({
left: 80,
top: 20,
bottom: 120,
right: 20
});
chart.color(["#336699", "#FF6314", "#339933", "#CC0000"]);
// Workaround to allow string as XAxis labels
var tickvalues = new Array(data[0].values.length);
var tickformat = new Array(data[0].values.length);
for (var a = 0; a < data[0].values.length; a++) {
tickvalues[a] = data[0].values[a].x;
tickformat[a] = data[0].values[a].label;
}
chart.xAxis.axisLabel("XAxisLabel")
.tickValues(tickvalues)
.tickFormat(function (d) {
return tickformat[d];
})
;
chart.yAxis.axisLabel("Measurement")
.tickFormat(d3.format(".2f"));
// handle overlapping labels
if (data[0].values.length > 8) chart.xAxis.rotateLabels(-45);
d3.select("#chart")
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
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. |