Trying this again

This is the massive refactor of the tooltips. This all started due to us needing to keep track of the tooltip dom element, but all the charts were still using a single function which made it hard to track, so I converted them all to using the tooltip object that the interactive guideline uses.

A few things to note:

1. This might break anyone using a customized tooltip, because I changed the data format to be more generic in many cases (needed extra info that it wasn't giving and then tried to make that consistent).
2. best I can tell, stackedArea tooltips were already broken, so I fixed those.
3. The tooltip object is put onto the chart object, so you can easily modify your tooltips like you do the axis or legend.
4. I deprecated the "tooltips" and "tooltipContent" options on the charts themselves.

I'm sorry I didn't add tests around this, but I burnt myself out a little bit so I'm kind of sick of tooltips :/

I know it's a lot of changes, so feel free to just try it out and test it yourself along with the code review... get the "fix_tooltips" branch from my personal repo and build it.

On the development branch, when I open the file examples/multiBarChart.html, I mouse over the chart and I see the following:

When I inspect the DOM, there are lots of divs with 'nvtooltip-pending-removal' classed to them.

@robinfhu @portante @joshjordan

Before we start merging in any more features/etc, I think this may be a good time to cut 1.8.x out, which has several fixes and the new tooltip code. Thoughts?

It seems to me that d3.time.scale cannot be used with nvd3.

For example, this seems like it should work to me, but it doesn't:

chart.xAxis.scale(d3.time.scale());

It seems to ignore the tickFormat (add possibly the tickValues) completely.

The reason I want to use d3.time.scale is because it seems to have good handling of automatic time ticks (https://github.com/mbostock/d3/wiki/Time-Scales#wiki-ticks). Specifically, it looks like it automatically aligns tick marks to human friendly intervals:

1-, 5-, 15- and 30-second.
1-, 5-, 15- and 30-minute.
1-, 3-, 6- and 12-hour.
1- and 2-day.
1-week.
1- and 3-month.
1-year.

Is there any way to get nvd3 working with d3 time scales? Is there something I'm missing? I'm happy to help out if someone can point me in the right direction.

I did a "meteor update" and got v1.8.1 of the nvd3:nvd3 package. My application broke, and it turns out the global nv variable is === undefined. I reverted to 1.7.1 and everything works again.

@liquidpele after your tooltip pull request, the line, cumulativeLine and stackedArea charts started to work perfectly under Shadow DOM (at least with the tooltips).

The problem is, with all other charts, the tooltips just stopped to appear. The code of my project that adds ShadowDOM to nvd3 is here: https://github.com/RenatoUtsch/polynvd3/tree/development

Two links for examples of the bug: StackedArea (working perfectly): http://renatoutsch.com.br/bower_components/polynvd3/nvd3-stacked-area-chart/demo.html Scatter (broken): http://renatoutsch.com.br/bower_components/polynvd3/nvd3-scatter-chart/demo.html

Other examples can be found here (currently only the bullet chart should be broken): http://renatoutsch.com.br/bower_components/polynvd3/

What did you do differently with the other charts that with those three that are working you didn't? All I know is that they have interactive guideline while the others don't.

@liquidpele

So, today I went and started to test the tooltips again, but a change yesterday must have broken something, because now if I create multiple charts only the tooltip of the first chart gets positioned right. All the other tooltips appear at wrong positions or at the bottom of the screen.

Also, I noticed another problem: The tooltips stopped showing the information of some charts that are built correctly and used to have correct values on the tooltips. Now only NaN appears.

For example, in my repo in nvd3-scatter-chart/demo.json, the 2nd chart that does NOT set the size of the circles shows only NAN in the tooltips. The first pie chart example also shows NAN but I don't know why, but it used to work correctly. The 2nd discrete bar chart example also.

Maybe the tooltips are getting the wrong data?

I'm new with nvd3 and I'm seeing that there are several pull requests from long time ago and still have not been merged (some bugs or leaks) and project owners don't have all the desired time to maintain the master branch, merging the PR and so on. We could help them with the maintainability and create a "nvd3-community" project/branch integrating all the fixes and interesting features that are already submitted as a PR. What do you think?

Is there an IRC or Gitter room for this project? Having a venue for bouncing ideas around would be helpful that is less formal/obtrusive than the issue tracker would be nice.

An example low-impact issue: would it be good to store availableHeight in the height var if height goes unset in discreteBarChart.js? I am writing a transition to reorder and resize the bars of that chart, and I am having to calculate rect height as availableHeight - y(d.value); having the height the plot field would be helpful here. Alternatively, if there is a better way to do this, a chatroom might be a better way of discovering it.

Just one small in my local example, need to call chart.update() in callback after chart is rendered to make context area visible. Though this is not reproducible in the examples in the code.

An issue must have been introduced when all the tooltip code was changed in: https://github.com/novus/nvd3/commit/5cba3b425c5c

See my screenshot video:

If you move the mouse kind of fast, it introduces a 'ghost' tooltip that briefly shows up and goes away. This is happening in the latest Chrome and using nvd3 development.

@liquidpele I'd like to assign this to Drew Peterson, does he have a github account?

Prior to version 1.8 in the scatter schart, custom colors per point was wokring, by defining color property of a point. In release 1.8.6 this feature isn't working any more. Here is to illustrate what I'm looking for (works with v. 1.6): https://jsfiddle.net/zh1x34tc/ - one serie and different color for each point.

I need to add a scroll to chart legend area. is there a way to do this. ? when the legend count is high it will reduce the size of the chart. i need to avoid it.

const tickValues = val.series[0].values.map((o,i)=>o.x/1000);  // something like["0.10","0.20"] etc.
            nv.addGraph(() => {
                var height = 300;
                var chart = nv.models.multiChart().legendRightAxisHint("").useInteractiveGuideline(true).showLegend(false).height(height);
                chart.options({
                    hideY2:true
                });
                chart.xAxis.axisLabel('Date').tickValues(tickValues).tickFormat(function(d) {
                    return d3.time.format('%x')(new Date(d))
                });
                chart.yAxis1.axisLabel('Orders').tickFormat(d3.format('.02f'));
                chart.yAxis2.tickFormat(d3.format('.02f'));
                //              chart.yAxis2.tickFormat(d3.format('.02f'));
                this.redraw(chart)
                this.chartRef = chart
            });

When zooming the position of the points is wrong. I found the useInteractiveGuideline set to true, if is set to false everything is working fine.

Also, the official example doesn't work properly (https://github.com/novus/nvd3/blob/master/examples/lineChart.html)

I found this commit, by changing back these changes everything works fine https://github.com/novus/nvd3/pull/2054

Hello There, I have created a graph using nvd3 but now I want to add zoom feature but zoom feature not work perfectly details given below:

jsfiddle link for zoom feature http://jsfiddle.net/guerler/cqNkB/

currently I am using addZoom function from jsfiddle but in my chart parameter are xAxis(date) and yAxis (number). When I try with number and date, its zoomed only with number

// add zoom handler
function addZoom(options) {
 // scaleExtent
    var scaleExtent = 10;
    
    // parameters
    var yAxis       = options.yAxis;
    var xAxis       = options.xAxis;
    var xDomain     = options.xDomain || xAxis.scale().domain;
    var yDomain     = options.yDomain || yAxis.scale().domain;
    var redraw      = options.redraw;
    var svg         = options.svg;
    var discrete    = options.discrete;
    
    // scales
    var xScale = xAxis.scale();
    var yScale = yAxis.scale();
    
    // min/max boundaries
    var x_boundary = xScale.domain().slice();
    var y_boundary = yScale.domain().slice();
    
    // create d3 zoom handler
    var d3zoom = d3.behavior.zoom();
    
    // ensure nice axis
    xScale.nice();
    yScale.nice();
       
    // fix domain
    function fixDomain(domain, boundary) {
        if (discrete) {
            domain[0] = parseInt(domain[0]);
            domain[1] = parseInt(domain[1]);
        }
        domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1]/scaleExtent);
        domain[1] = Math.max(boundary[0] + boundary[1]/scaleExtent, Math.min(domain[1], boundary[1]));
        return domain;
    };
    
    // zoom event handler
    function zoomed() {
        yDomain(fixDomain(yScale.domain(), y_boundary));
        xDomain(fixDomain(xScale.domain(), x_boundary));
        redraw();
    };

    // zoom event handler
    function unzoomed() {
        xDomain(x_boundary);
        yDomain(y_boundary);
        redraw();
        d3zoom.scale(1);
        d3zoom.translate([0,0]);
    };
    
    // initialize wrapper
    d3zoom.x(xScale)
          .y(yScale)
          .scaleExtent([1, scaleExtent])
          .on('zoom', zoomed);
          
    // add handler
    d3.select('#chart').call(d3zoom).on('dblclick.zoom', unzoomed);
};
        
        // add zoom
        addZoom({
            xAxis  : chart.xAxis,
            yAxis  : chart.yAxis,
            yDomain: chart.yDomain,
            xDomain: chart.xDomain,
            redraw : function() { chart.update() },
            svg    : svg
        }); 

here in my chart image