Develop Reference

how to add brush in nvd3 like d3

I am creating graph in nvd3 FIDDLE
I am done with graph and its working nicely but now I want to add brush in it like d3 see this example: http://bl.ocks.org/mbostock/1667367. but i searched every where, i found one solution i.e crossfilter but is it possible to use brush like d3 and nvd3 has any brush function ? please help me.
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(true); // don't show controls
d3.select('#chart svg')
.datum(test_data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});

I wonder how can you add brush using crossfilter?
Any way here is the solution
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(true); // don't show controls
d3.select('#chart svg')
.datum(test_data)
.transition().duration(500).call(chart);
var brushC = d3.select('#chart svg g');
brushC.empty() ? brushC.append('g'): brushC.select('g')
.attr("class", "brush")
.call(d3.svg.brush()
.x(chart.xAxis.scale())
.on('brushend', onBrush)
.extent([0,0])
)
.selectAll('rect')
.attr('height',320 )//change according to you chart height
//i have hard coded it since it was a 'quick and dirty' fix
//you may try to get it from chart, if you can please update me.
;
}
nv.utils.windowResize(chart.update);
return chart;
});
onBrush Function
function onBrush() {
brushExtent = d3.event.target.extent();
console.log(brushExtent);
}
add CSS
rect.extent{
color:grey;
opacity:0.4;
}

formatting nvd3.js colors and interactiveGuideLine

I've gotten lost amongst the d3.js weeds. I'm putting together a chart using nvd3.js (http://i.stack.imgur.com/ghueS.png).
But, while the colors appear correct in the legend, they do not in the chart. Additionally, there is significant white space in the hovering tooltip.
Looking into the object structure, I get what looks like one layer of keys too many, which makes me think the color issue and white space have to do with my actual keys being too far buried in the object (http://i.stack.imgur.com/k46CO.png).
I've looked into nest() and rollup(), but can't comprehend how they might help.
My javascript is as follows:
d3.csv("http://fwllc.wpstagecoach.com/wp-content/themes/frameworkcr/markers.csv",function(err,data){
var noDates = d3.keys(data[0]).filter(function(k){return k!="date"});
var dataToPlot = noDates.map(function(k){
return {"key":k,
"values":data.map(function(d){
return {
"x":d3.time.format("%m/%d/%y").parse(d.date),
"y":+d[k]
}
})}
})
console.log(d3.entries(dataToPlot));
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
// .transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); });
chart.yAxis //Chart y-axis settings
.axisLabel('Total Return Percent')
.tickFormat(d3.format('%'));
d3.select('#chart').append("svg")
.datum(dataToPlot)
.call(chart);
nv.utils.windowResize(function() { chart.update() });
return chart;
});
})
And a portion of my .csv file:
date,ESG,global100,outperformance
12/22/08,0,0,0
3/23/09,-0.059812891,-0.094081914,0.034269023
6/22/09,0.137426291,0.033160892,0.104265399
9/21/09,0.418041893,0.249191458,0.168850435
12/21/09,0.460914373,0.294278644,0.166635729
3/22/10,0.504442354,0.306489826,0.197952528

I copied you code to a plnkr, it seems correct...
<div id="chart" style="width:300px; height:300px"></div>
plnkr

What's the best way to draw multiple charts using NVD3.js from an array of chart data

I am trying to render an array of charts using NVD3. Let's assume that data is an array of charts (object with an array of key values)
Since I am using a selector to insert the chart data at a specific svg element, how can I create multiple charts (data.length) and append them in my html?
my HTML is simple:
<div class="span12">
<div id="chart" class="col-md-12">
<svg></svg>
</div>
</div>
JavaScript is the standard NVD3 example, with a click event registered on each bar:
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart; };
}, function () {
d3.selectAll(".nv-bar").on('click',
function () {
$('#modalMonthlySubcategory').modal('show')
});
});
);
I need to render all charts at once, without knowing how many there are in the array. IDs need to be unique and the clock events need to work on each bar, it shows a bootstrap modal.

NVD3.js line graphs fail to scale y axis to max and min values

Building a page with multiple graphs, I've decided to use NVD3.
The problem is that NVD3 fails to find the maximum value, rendering some useless graphs.
http://jsfiddle.net/pxU8c/
function renderGraph(parent, data) {
function getGraph(svgElement, data) {
var height = 500;
var chart = nv.models.lineChart()
chart.options({
noData: "Not enough data to graph",
transitionDuration: 500,
showLegend: true,
showXAxis: true,
showYAxis: true,
rightAlignYAxis: false
});
chart.xAxis //Chart x-axis settings
.axisLabel(data['x-label'])
.tickFormat(function(d) {
return d3.time.format('%d.%m.%Y')(new Date(+d))
});
chart.yAxis //Chart y-axis settings
.axisLabel(data['y-label'])
.tickFormat(d3.format('.02f'))
;
svgElement //Select the <svg> element you want to render the chart in.
.datum(data['data']) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
}
var svgELement = d3.select('svg#chart_'+data['code']);
nv.addGraph(getGraph(svgELement, data));
}
I'm also using twitter bootstrap for layout, if it helps.
EDIT
following fiddle should be more useful since it contains less garbage
http://jsfiddle.net/Bh578/
the first and the seconds graphs are displaying the problem while the third is rendered accordingly to my expectations (i.e. you can see the whole line)
I have also added the useInteractiveGuideline: true option so it's more obvious that there are values outside of the visible graph area that I'd like to see on the chart too.

Values should be integers, not JSON-decoded-as-strings integers, then it works like a charm.

NVD3 piechart missing low percentage labels

I'm using NVD3 ver 3.1.7 for generating pieChart.
Everything works perfect except the chart labels. If the label value is of very low
percentage, it does not appear. I want to make it visible irrespective of its value.
This is my code.
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
return chart;
});
Help would highly be appreciated.

I just managed to resolve this issue.
In nvd3 pieChart, there is a parameter
.labelThreshold(.05)
which sets percentage for chart labels to display or hide. By default this is set to
.02 => 2%.
I increased it to
.05 => 5%
which solved my problem.

You can use this option also.
.labelSunbeamLayout(true)