Last active
August 29, 2015 14:05
-
-
Save mpenkov/d7c47a3582a6c3cfbbd5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
#chart svg { | |
height: 400px; | |
} | |
/* http://stackoverflow.com/questions/18530459/nvd3-js-bigger-points-in-a-line-chart */ | |
.nvd3 .nv-groups .nv-point { | |
stroke-opacity: 0.2 !important; | |
stroke-width: 10px; | |
} | |
</style> | |
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css"> | |
<div id="chart"> | |
<svg></svg> | |
</div> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script> | |
<script> | |
// http://stackoverflow.com/questions/10638529/how-to-parse-a-date-in-format-yyyymmdd-in-javascript | |
function parse(str) { | |
if(!/^\d{4}\/\d{2}\/\d{2}$/.test(str)) return "invalid date"; | |
var y = str.substr(0,4), | |
m = str.substr(5,2), | |
d = str.substr(8,2); | |
return new Date(y,m,d).getTime(); | |
} | |
var mydata = [ | |
{ | |
key: "Benchpress", | |
values: [ | |
["2013/10/31", 90], | |
["2013/11/18", 100], | |
["2014/03/01", 110], | |
["2014/06/19", 120] | |
] | |
}, | |
{ | |
key: "Press", | |
values: [ | |
["2013/10/20", 55], | |
["2013/11/15", 62], | |
["2014/03/04", 70], | |
["2014/06/17", 77.5] | |
] | |
}, | |
{ | |
key: "Deadlift", | |
values: [ | |
["2013/09/24", 110], | |
["2013/11/13", 130], | |
["2014/03/05", 150], | |
["2014/06/15", 165] | |
] | |
}, | |
{ | |
key: "Front squat", | |
values: [ | |
["2013/11/02", 85], | |
["2013/11/19", 90], | |
["2014/03/12", 100], | |
["2014/06/20", 110] | |
] | |
}, | |
{ | |
key: "Back squat", | |
values: [ | |
["2013/10/17", 85], | |
["2013/11/16", 100], | |
["2014/03/03", 125], | |
["2014/06/18", 135] | |
] | |
}, | |
// { | |
// key: "Pull ups", | |
// values: [ | |
// ["2013/09/17", 8], | |
// ["2013/11/12", 15], | |
// ["2013/12/16", 17], | |
// ["2013/12/23", 19], | |
// ["2013/12/27", 22], | |
// ["2014/01/17", 24], | |
// ["2014/07/30", 26], | |
// ["2014/07/31", 28], | |
// ] | |
// } | |
]; | |
nv.addGraph(function() { | |
var chart = nv.models.lineChart() | |
//.useInteractiveGuideline(true) | |
.x(function (d) { | |
return parse(d[0]); | |
}) | |
.y(function (d) { | |
return d[1]; | |
}) | |
.showYAxis(true) | |
.margin({left: 100, right: 100}) | |
; | |
var dateFormatter = function(d) { return d3.time.format('%x')(new Date(d)) }; | |
chart.xAxis | |
.axisLabel('Date') | |
.tickFormat(dateFormatter); | |
; | |
chart.yAxis | |
.axisLabel('Weight (kg)') | |
.tickFormat(d3.format(",r")) | |
; | |
d3.select('#chart svg') | |
.datum(mydata) | |
.transition().duration(500) | |
.call(chart) | |
; | |
nv.utils.windowResize(chart.update); | |
return chart; | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment