JavaFX 2.2 - Adding a mouse event to a Bar in a BarChart or StockedBarChart

Question

I am creating a StocckedBarChart dynamically in JavaFX 2.2 (see code fragment below) I want to make each bar act as a Hyperlink so that when hovering over it it will glow and when clicking it it will open a details screen whit more information about the source data used to plot the relevant bar in the chart.

      final CategoryAxis xAxis = new CategoryAxis();
      final NumberAxis yAxis = new NumberAxis();

        List<String> itemTypes = new ArrayList<String>();
        vipTypes.add("Type A");
        vipTypes.add("Type B");
        vipTypes.add("Type C");


        xAxis.setCategories(FXCollections.<String>observableArrayList(itemTypes));

        m_barChart = new StackedBarChart<String,Number>(xAxis,yAxis);
        m_barChart.setTitle("Item Status");

        XYChart.Series upSer = new XYChart.Series();
        upSer.setName("UP"); 
        XYChart.Series downSer = new XYChart.Series();
        downSer.setName("Down");
        XYChart.Series unknownSer = new XYChart.Series();
        unknownSer.setName("Unknown");

     for(Item item: ItemsList)
        {
            upSer.getData().add(new XYChart.Data<String, Number>(item.getName(),        item.getCountOfUpItems());
            downSer.getData().add(new XYChart.Data<String, Number>(item.getName(),        item.getCountOfDownItems());
            unknownSer.getData().add(new XYChart.Data<String, Number>(item.getName(),      item.getCountOfUnknownItems());
        }

m_barChart.getData().addAll(upSer, downSer, unknownSer);

I want to do somthing like:

   //get a specific bar.

   Node n = m_barChart.lookup("what should I look for??");

            if (n != null && n instanceof Path) 
            {
                final Path path = (Path) n;
                final Glow glow = new Glow(.8);
                path.setEffect(null);
                path.setOnMouseEntered(new EventHandler<MouseEvent>() 
                        {
                    @Override public void handle(MouseEvent e) 
                    {
                        path.setEffect(glow);
                    }
                        });
                path.setOnMouseExited(new EventHandler<MouseEvent>() {
                    @Override public void handle(MouseEvent e) {
                        path.setEffect(null);
                    }
                });
                        path.setOnMouseCLicked(new EventHandler<MouseEvent>() {
                    @Override public void handle(MouseEvent e) {
                        openDetailsScreen(<selected Bar>);
                    }
                });
            }

Answer 1

You can access to the Node by XYChart.Data#getNode(). Here an example of modifications applied to yours:

private final Glow glow = new Glow(.8);

private void setupHover(XYChart.Series<String, Number> series) {
    for (final XYChart.Data<String, Number> dt : series.getData()) {
        final Node n = dt.getNode();

        n.setEffect(null);
        n.setOnMouseEntered(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent e) {
                n.setEffect(glow);
            }
        });
        n.setOnMouseExited(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent e) {
                n.setEffect(null);
            }
        });
        n.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent e) {
                System.out.println("openDetailsScreen(<selected Bar>)");
                System.out.println(dt.getXValue() + " : " + dt.getYValue());
            }
        });
    }
}

Call this method after m_barChart.getData().addAll(upSer, downSer, unknownSer) :

m_barChart.getData().addAll(upSer, downSer, unknownSer);
setupHover(upSer);
setupHover(downSer);
setupHover(unknownSer);

Get the current bar values through dt.getXValue() and dt.getYValue().