CODEWITHSUNDEEP
javascripteventsdom-eventsnvd3.js
Luka Prelic
Luka Prelic

Reputation: 180

NVD3.js highlight graph points at mouseover event

How do I highlight points on a linechart when moving my mouse over another graph.

I need information from one chart when moving my mouse over it to send the selected data to another chart to highlight the points in the other chart.

e.g. chart 1 has a mouseover at x:3 y:5. It fires an event to highlight another charts line. Then at chart 2 you highlight the x:3 y:5 value.

Upvotes: 3

Views: 2626

Answers (2)

davidetrapani
davidetrapani

Reputation: 570

To whom involved in the same problem using Angularjs-nvd3-directives 

        $scope.$on('tooltipShow.directive', function(angularEvent, event){
          $scope.selectedChartData = [];
          angularEvent.targetScope.$parent.event = event;
          angularEvent.targetScope.$parent.$digest();
          index= xIndex; //see the above answer

          angularEvent.targetScope.chart.lines.clearHighlights();
          angularEvent.targetScope.chart.lines.highlightPoint(0,parseInt(index),true);

          recursivelyCheckPreviousSibling(angularEvent.targetScope, index);
          recursivelyCheckNextSibling(angularEvent.targetScope, index);
        });

function recursivelyCheckPreviousSibling(targetScope, index){
      //exit condition
      if( targetScope.$$prevSibling == null) {
        targetScope.chart.lines.clearHighlights();
        targetScope.chart.lines.highlightPoint(0,parseInt(index),true);
      }
      else{
        targetScope.$$prevSibling.chart.lines.clearHighlights();
        targetScope.$$prevSibling.chart.lines.highlightPoint(0,parseInt(index),true);
        recursivelyCheckPreviousSibling(targetScope.$$prevSibling, index);
      }
    };
    function recursivelyCheckNextSibling(targetScope, index){
      //exit condition
      if( targetScope.$$nextSibling == null) {
        targetScope.chart.lines.clearHighlights();
        targetScope.chart.lines.highlightPoint(0,parseInt(index),true);
      }
      else{
        targetScope.$$nextSibling.chart.lines.clearHighlights();
        targetScope.$$nextSibling.chart.lines.highlightPoint(0,parseInt(index),true);
        recursivelyCheckNextSibling(targetScope.$$nextSibling, index);
      }
    };

Upvotes: 1

Luka Prelic
Luka Prelic

Reputation: 180

I figured it out. You need to add a event dispatch to the original chart on the 'elementMousemove' event. In that event you need to highlight the values necessary on the other chart.

chart.interactiveLayer.dispatch.on('elementMousemove.name', function(e) {
      chart2.lines.clearHighlights();
      chart2.lines.highlightPoint(0,parseInt(xIndex),true); 
});
chart.interactiveLayer.dispatch.on('elementMouseout.name', function(e) {
            chart2.lines.clearHighlights();
});

The code with on any mosemove event in chart will clear the previous highlights and highlight the the point at line = '0' and at specified XIndex in chart2.

Upvotes: 5

Related Questions