Examples
Line Chart
<div id="nvd3-example1" style="height: 380px;"></div>
var chart;
var data;
var legendPosition = "top";
var randomizeFillOpacity = function() {
var rand = Math.random(0, 1);
for (var i = 0; i < 100; i++) { // modify sine amplitude
data[4].values[i].y = Math.sin(i / (5 + rand)) * .4 * rand - .25;
}
data[4].fillOpacity = rand;
chart.update();
};
var toggleLegend = function() {
if (legendPosition == "top") {
legendPosition = "bottom";
} else {
legendPosition = "top";
}
chart.legendPosition(legendPosition);
chart.update();
};
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
duration: 300,
useInteractiveGuideline: true
});
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'))
.staggerLabels(true);
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(function(d) {
if (d == null) {
return 'N/A';
}
return d3.format(',.2f')(d);
});
data = sinAndCos();
d3.select('#nvd3-example1').append('svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() {
var sin2 = [],
cos = [],
rand = [];
for (var i = 0; i < 100; i++) {
sin2.push({
x: i,
y: Math.sin(i / 5) * 0.4 - 0.25
});
cos.push({
x: i,
y: .5 * Math.cos(i / 10)
});
rand.push({
x: i,
y: Math.random() / 10
});
}
return [{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
}, {
values: rand,
key: "Random Points",
color: "#2222ff"
}, {
area: true,
values: sin2,
key: "Fill opacity",
color: "#EF9CFB",
fillOpacity: .1
}];
}
Bar Chart
<div id="nvd3-example2" style="height: 450px;"></div>
/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
if (arguments.length < 3) o = 0;
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return d3.range(n).map(function() {
var a = [],
i;
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
for (i = 0; i < 5; i++) bump(a);
return a.map(stream_index);
});
}
/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
return d3.range(n).map(function(i) {
return d3.range(m).map(function(j) {
var x = 20 * j / m - i / 3;
return 2 * x * Math.exp(-.5 * x);
}).map(stream_index);
});
}
function stream_index(d, i) {
return {
x: i,
y: Math.max(0, d)
};
}
var test_data = stream_layers(3, 10 + Math.random() * 100, .1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
console.log('td', test_data);
var negative_test_data = new d3.range(0, 3).map(function(d, i) {
return {
key: 'Stream' + i,
values: new d3.range(0, 11).map(function(f, j) {
return {
y: 10 + Math.random() * 100 * (Math.floor(Math.random() * 100) % 2 ? 1 : -1),
x: j
}
})
};
});
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.barColor(d3.scale.category20().range())
.duration(300)
.margin({
bottom: 100,
left: 70
})
.rotateLabels(45)
.groupSpacing(0.1);
chart.reduceXTicks(false).staggerLabels(true);
chart.xAxis
.axisLabel("ID of Furry Cat Households")
.axisLabelDistance(35)
.showMaxMin(false)
.tickFormat(d3.format(',.6f'));
chart.yAxis
.axisLabel("Change in Furry Cat Population")
.axisLabelDistance(-5)
.tickFormat(d3.format(',.01f'));
chart.dispatch.on('renderEnd', function() {
nv.log('Render Complete');
});
d3.select('#nvd3-example2').append('svg')
.datum(negative_test_data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
chart.state.dispatch.on('change', function(state) {
nv.log('state', JSON.stringify(state));
});
return chart;
});
Pie & DonutChart
<div id="nvd3-example3" style="height: 340px;"></div>
<div id="nvd3-example4" style="height: 340px;"></div>
var testdata = [{
key: "One",
y: 5
}, {
key: "Two",
y: 2
}, {
key: "Three",
y: 9
}, {
key: "Four",
y: 7
}, {
key: "Five",
y: 4
}, {
key: "Six",
y: 3
}, {
key: "Seven",
y: 0.5
}];
var width = 320;
var height = 320;
nv.addGraph(function() {
var chart = nv.models.pie()
.x(function(d) {
return d.key;
})
.y(function(d) {
return d.y;
})
.width(width)
.height(height)
.labelType(function(d, i, values) {
return values.key + ':' + values.value;
});
d3.select('#nvd3-example3').append('svg')
.datum([testdata])
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
});
nv.addGraph(function() {
var chart = nv.models.pie()
.x(function(d) {
return d.key;
})
.y(function(d) {
return d.y;
})
.width(width)
.height(height)
.labelType('percent')
.valueFormat(d3.format('%'))
.donut(true);
d3.select('#nvd3-example4').append('svg')
.datum([testdata])
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
});
Find more example from here.