Bar Chart With View Finder d3.js

Question

How to provide viewfinder Functionality in d3.js for bar-chart. the chart with view finder is like this http://nvd3.org/ghpages/lineWithFocus.html and the bar chart i want to integrate view finder function is like this http://nvd3.org/ghpages/multiBar.html. can any one help me with this. i am searching for whole week and couldn't get any thing.

Answer 1

Actually you can, but you have to make it. And its pretty simple!

Download the files from nvd3.org Take the file "linePlusBarWithFocusChart.html". We have to edit that.

What am proposing is to remove the data for the line part,so that only the bar data exists.

Data input as via example:

var testdata = [{
        "key": "Quantity",
        "bar": true,
        "values": [
            [1136005200000, 1271000.0],
            [1138683600000, 1271000.0],
            [1141102800000, 1271000.0],
             etc. .]     
    }, {
        "key": "Price",        //Line chart data values are to be deleted.
        "values": [

        ]
    }]

And finally to remove the axis data of the line chart:

chart.y2Axis
.tickFormat(function(d) {
   // return '$' + d3.format(',.2f')(d) //what was present in the example
  return '';
 });

chart.y4Axis
 .tickFormat(function(d) {
// return '$' + d3.format(',.2f')(d) //what was present in the example
 return '';
 });

You can turn the legends off from the file nvd3.js - Line num: 6871 where the model:linePlusBarWithFocusChart is defined.

Put showLegend=false;

Under showTooltip function in nvd3.js under the same model.

 var showTooltip = function(e, offsetElement) {
    if (extent) {
        e.pointIndex += Math.ceil(extent[0]);
    }
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
        y = (e.series.bar ? y1Axis : y1Axis).tickFormat()(lines.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
  };

Right now ,run the file and you can find that only the bar chart exists. This may not be the proper method,but it helps out in dire situations. You may need to edit out some more unwanted elements as well.

Feel free to ask any doubts.

Answer 2

What your looking for isn't built into the library (yet). Your best bet is to take a look at: https://github.com/novus/nvd3/blob/master/src/models/lineWithFocusChart.js

Clone the repo and build your own model barWithFocusChart.js (I'm sure they'd love a pull request :] )

You can find a tutorial on how to build a bar char in d3.js: http://mbostock.github.io/d3/tutorial/bar-2.html

And you can read up on coordinated views: http://square.github.io/crossfilter/