Create eye-catching BarChart by JavaFx with Slider to view due to Category data so long

Question

I'm trying to make bar chart by Javafx. However It quite small to see it.

I want to make it more attractive like

Here is code's program

 public class Main extends Application {

 public static void main(String[] args) {
  launch(args);
 }

  @Override
  public void start(Stage stage) throws Exception {
  stage.setTitle("JavaFX Chart Demo");
  StackPane pane = new StackPane();
  pane.getChildren().add(createBarChart());
  stage.setScene(new Scene(pane, 400, 200));
  stage.show();
 }

 public ObservableList<XYChart.Series<String, Double>>
     getDummyChartData() {
  ObservableList<XYChart.Series<String, Double>> data =
     FXCollections.observableArrayList();
  Series<String, Double> as = new Series<>();
  Series<String, Double> bs = new Series<>();
  Series<String, Double> cs = new Series<>();
  Series<String, Double> ds = new Series<>();
  Series<String, Double> es = new Series<>();
  Series<String, Double> fs = new Series<>();
  as.setName("A-Series");
  bs.setName("B-Series");
  cs.setName("C-Series");
  ds.setName("D-Series");
  es.setName("E-Series");
  fs.setName("F-Series");

  Random r = new Random();

  for (int i = 1900; i < 2017; i += 10) {

     as.getData().add(new XYChart.Data<>
     (Integer.toString(i), r.nextDouble()));
     bs.getData().add(new XYChart.Data<>
     (Integer.toString(i), r.nextDouble()));
     cs.getData().add(new XYChart.Data<>
     (Integer.toString(i), r.nextDouble()));
     ds.getData().add(new XYChart.Data<>
     (Integer.toString(i), r.nextDouble()));
     es.getData().add(new XYChart.Data<>
     (Integer.toString(i), r.nextDouble()));
     fs.getData().add(new XYChart.Data<>
     (Integer.toString(i), r.nextDouble()));
  }
  data.addAll(as, bs, cs, ds, es, fs);
  return data;
 }

 public XYChart<CategoryAxis, NumberAxis>
     createBarChart() {
  CategoryAxis xAxis = new CategoryAxis();
  NumberAxis yAxis = new NumberAxis();
  BarChart bc = new BarChart<>(xAxis, yAxis);
  bc.setData(getDummyChartData());
  bc.setTitle("Bar Chart on Random Number");
  return bc;
 }
 }

Please help me how to get it by Javafx. I found it can be solve by JFree Chart However.I don't know how to make it by BarChart javafX. It's really challenge to me these day. Thank you

If the JFreeChart library can solve your problem, why not use it? Note that the JavaFX related classes were moved into a separate project: [JFreeChart-FX](https://github.com/jfree/jfreechart-fx). — Slaw, Sep 28 '19 at 06:15
@Slaw thank you for your source code. I bet you had idea to make it by javafX . Can you help me to make it or edit my code to build that program on Javafx ? — ELIP, Sep 28 '19 at 10:23

score 0 · Answer 1 · answered Sep 28 '19 at 13:04

0

Just make the chart in a scroll pane.

public void start(Stage stage) throws Exception {
    stage.setTitle("JavaFX Chart Demo");
    StackPane stackPane = new StackPane();
    stackPane.setPrefSize(1000, 200);
    stackPane.getChildren().add(createBarChart());
    ScrollPane scrollPane = new ScrollPane();
    scrollPane.setPrefSize(400, 220);
    scrollPane.setContent(stackPane);
    stage.setScene(new Scene(scrollPane));
    stage.show();
}

answered Sep 28 '19 at 13:04

brian

10,619
4
21
79

I don't believe that quite captures the behavior the OP is after. The image in the question makes it look like the y-axis should be scrollable but the x-axis always remains visible. A `BarChart` wrapped in a `ScrollPane` doesn't do that, instead it just makes the entire chart (axes, content, legend, etc.) "scrollable" as if you zoomed in on an image. – Slaw Sep 28 '19 at 13:53
There are 2 different charts in the question and they are fundamentally different. To make the second one, just switch the axes and use a border pane or something for titles and legend. – brian Sep 28 '19 at 15:45
You still run into the problem that the x-axis will move as you scroll. Look at the scroll bar in the second image, its position indicates only the _content_ of the chart will be scrolled (likely along with the y-axis). Wrapping the `BarChart` in a `ScrollPane` will cause the _entire chart_, not just the _content_, to move while scrolling. – Slaw Sep 28 '19 at 15:51
it's really hard to us . BTW I found this post (https://stackoverflow.com/questions/10754747/add-scrollbar-to-jfreechart-3dbarchart/10756404#10756404 ) but this source code didn't work for me. If so Can you make it availability here by answer with code? – ELIP Sep 30 '19 at 04:19
@ELIP That is your code, I just changed a few lines in your start method. – brian Sep 30 '19 at 12:05
@brian tks ur answer However it did not meet my expection. Do you have any another idea? Because my category data is so long fully screen is not enough to show entired chart :( Thats why I wish to have scroll bar to view all data while scrolling – ELIP Sep 30 '19 at 12:45

Create eye-catching BarChart by JavaFx with Slider to view due to Category data so long

1 Answers1