Skip to content

Instantly share code, notes, and snippets.

@mpenkov
Last active August 29, 2015 14:05
Show Gist options
  • Save mpenkov/d7c47a3582a6c3cfbbd5 to your computer and use it in GitHub Desktop.
Save mpenkov/d7c47a3582a6c3cfbbd5 to your computer and use it in GitHub Desktop.
<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