Skip to content

Instantly share code, notes, and snippets.

@nuernber
Last active December 20, 2015 03:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nuernber/6064535 to your computer and use it in GitHub Desktop.
NVD3 Sparkline doesn't work...
<!DOCTYPE html>
<meta charset="utf-8">
<link href="http://nvd3.org/src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
#chart1 {
width: 350px;
height: 50px;
font-size: 14px;
margin-top: -6px;
}
h2, p {
float: left;
}
</style>
<body>
<h2>SparklinePlus:</h2>
<p><svg id="chart1" class="sparkline"></svg></p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<script>
d3.text("monthly.csv", function(data) {
var data1 = d3.csv.parse(data);
var parseDate = d3.time.format("%Y-%m").parse;
data1.forEach(function(d) {
d.Month = parseDate(d.Month);
});
nv.addGraph(function() {
var data = formatMonthlyData(data1);
var chart = nv.models.sparklinePlus()
chart
.margin({left:70})
.x(function(d,i) { return i })
.xTickFormat(function(d) {
return d3.time.format('%x')(new Date(data[d].x))
})
d3.select("#chart1")
.datum(data)
.transition().duration(250)
.call(chart);
return chart;
});
});
function formatMonthlyData(data) {
var monthlyData = [];
for (var i = 0; i < data.length; i++) {
monthlyData.push({x: data[i].Month, y: +data[i].Data});
}
return monthlyData;
}
</script>
Month Data
2013-01 92
2013-02 77
2013-03 107
2013-04 55
2013-05 101
2013-06 97
2013-07 56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment