This discussion is archived
2 Replies Latest reply: Nov 17, 2011 12:10 AM by luppy RSS

CategoryAxis Tooltips

luppy Newbie
Currently Being Moderated
Hello I'm hoping someone can help me with this question

Given the following example from oracles JavaFX samples how can I adapt this to have tooltips on the CategoryAxis
I am wanting to display something different in the tooltip to the values against the ticks on the X Category Axis
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class BarChartExample extends Application
{
    final static String austria = "Austria";
    final static String brazil = "Brazil";
    final static String france = "France";
    final static String italy = "Italy";
    final static String usa = "USA";

    @Override
    public void start(Stage stage)
    {
        stage.setTitle("Bar Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
        bc.setTitle("Country Summary");
        xAxis.setLabel("Country");
        yAxis.setLabel("Value");

        XYChart.Series series1 = new XYChart.Series();
        series1.setName("2003");
        series1.getData().add(new XYChart.Data(austria, 25601.34));
        series1.getData().add(new XYChart.Data(brazil, 20148.82));
        series1.getData().add(new XYChart.Data(france, 10000));
        series1.getData().add(new XYChart.Data(italy, 35407.15));
        series1.getData().add(new XYChart.Data(usa, 12000));

        Scene scene = new Scene(bc, 800, 600);
        bc.getData().addAll(series1);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args)
    {
        launch(args);
    }
}
Thanks
  • 1. Re: CategoryAxis Tooltips
    jsmith Guru
    Currently Being Moderated
    Hello luppy,

    You can use css selectors to grab the nodes you want and then install tooltips on to those nodes.

    Something like the following:
    int tip = 1;
    for (Node mark: bc.lookupAll("CategoryAxis Text.tick-mark")) {
      Tooltip.install(mark, new Tooltip("Country " + tip + " tip"));
      tip++;
    }          
    The css styles for the charts aren't yet defined publicly (I think they will be documented in the next release). But you can determine the styles use in your chart by recursively printing the nodes in the chart by calling dump(bc, 0) to invoke the following method.
            
    private void dump(Node n, int depth) {
      for (int i = 0; i < depth; i++) System.out.print("  ");
      System.out.println(n);
      if (n instanceof Parent) for (Node c: ((Parent) n).getChildrenUnmodifiable()) dump(c, depth + 1);
    }
    You can use the above technique to install tooltips on any node you want in a chart (note that due to bugs already filed in the JavaFX jira, at the moment I don't think the install would work for non-rectangular shapes like pie chart slices).

    Installing a graphic in the tooltip is a simple as adding a second parameter to the tooltip constructor.

    Rather than using css you could also recursively walk the node tree for the chart and use instanceof operators to narrow down the items you are looking for, but I prefer the css style lookup.

    Dump output for your example chart, which shows all Java classes and css style classes used is:
    BarChart@1a2a89a[styleClass=root chart bar-chart]
      Label[id=null, styleClass=label chart-title]
        LabelSkin[id=null, styleClass=label chart-title]
          Text@185ada3
      Chart$1@925e67[styleClass=chart-content]
        Region@1f43093[styleClass=chart-plot-background]
        XYChart$1@a1320e
          Path@573206[styleClass=chart-alternative-column-fill]
          Path@954bfe[styleClass=chart-alternative-row-fill]
          Path@1b01412[styleClass=chart-vertical-grid-lines]
          Path@f5c440[styleClass=chart-horizontal-grid-lines]
          Line@1277da2[styleClass=chart-vertical-zero-line]
          Line@1a955d8[styleClass=chart-horizontal-zero-line]
          Group@4307f2[styleClass=plot-content]
            StackPane@1c8e35a[styleClass=chart-bar series0 data0 default-color0]
            StackPane@120f29d[styleClass=chart-bar series0 data1 default-color0]
            StackPane@13fb256[styleClass=chart-bar series0 data2 default-color0]
            StackPane@34ab7a[styleClass=chart-bar series0 data3 default-color0]
            StackPane@1a83987[styleClass=chart-bar series0 data4 default-color0]
        CategoryAxis@dd750e[styleClass=axis]
          Label[id=null, styleClass=label axis-label]
            LabelSkin[id=null, styleClass=label axis-label]
              Text@89f191
          Path@c9b2bc[styleClass=axis-tick-mark]
          Text@1757c6f[styleClass=tick-mark]
          Text@12936fa[styleClass=tick-mark]
          Text@13b1f1b[styleClass=tick-mark]
          Text@1e85adf[styleClass=tick-mark]
          Text@d5bd16[styleClass=tick-mark]
        NumberAxis@1300853[styleClass=axis]
          Label[id=null, styleClass=label axis-label]
            LabelSkin[id=null, styleClass=label axis-label]
              Text@6cdb70
          Path@f6925f[styleClass=axis-tick-mark]
          Path@1049576[styleClass=axis-minor-tick-mark]
          Text@e99cbb[styleClass=tick-mark]
          Text@1b64611[styleClass=tick-mark]
          Text@ccff1e[styleClass=tick-mark]
          Text@c12bfd[styleClass=tick-mark]
          Text@1c74445[styleClass=tick-mark]
          Text@3c2261[styleClass=tick-mark]
          Text@691263[styleClass=tick-mark]
          Text@41e2a3[styleClass=tick-mark]
          Text@165ce20[styleClass=tick-mark]
          Text@bcb5a9[styleClass=tick-mark]
          Text@8c40ee[styleClass=tick-mark]
          Text@8ebcab[styleClass=tick-mark]
          Text@301ea4[styleClass=tick-mark]
          Text@847fcf[styleClass=tick-mark]
          Text@60bb22[styleClass=tick-mark]
          Text@d36a6d[styleClass=tick-mark]
          Text@1f1c748[styleClass=tick-mark]
      Legend@f37f80[styleClass=chart-legend]
        Label[id=null, styleClass=label chart-legend-item]
          LabelSkin[id=null, styleClass=label chart-legend-item]
            Region@3fb088[styleClass=chart-legend-item-symbol chart-bar series0 bar-legend-symbol default-color0]
            Text@15ec870
    Edited by: jsmith on Nov 16, 2011 11:11 AM

    Original solution noted that it was not possible to select just the CategoryAxis text marks, but that is not true. The category axis tick marks can be selected by adding CategoryAxis followed by a space to the front of the css selector to select the CategoryAxis by it's Java class, even though no specific css style is defined for it. The solution was updated to reflect this simplification.
  • 2. Re: CategoryAxis Tooltips
    luppy Newbie
    Currently Being Moderated
    Thank you very much for your detailed answer I have got the tooltips working using your css example!

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points