Simple chart-viewing JavaFX example on Nashorn

Question

I'm hacking together some first examples on JavaScript (Nashorn) for viewing a simple chart. Since my background is "Java programmer" I'm sure there are ways where I can have more benefit from JavaScript syntax than I'm using.

I'm open to criticism to get it more shorter, more elegant, more idiomatic than a Java coder writes it down in his first attempts.

load("fx:base.js");
load("fx:controls.js");
var Button = javafx.scene.control.Button;
var StackPane = javafx.scene.layout.StackPane;
var Scene = javafx.scene.Scene;
function start(primaryStage) {
 primaryStage.title = "Hello World!";
 var xAxis = new NumberAxis();
 xAxis.setLabel("Number of Month");
 var yAxis = new NumberAxis();
 var lineChart = new LineChart(xAxis, yAxis);
 lineChart.setTitle("Stock Monitoring 2010");
 var series1 = new XYChart.Series();
 series1.setName("Reference portfolio");
 [new XYChart.Data(1,2),
 new XYChart.Data(2,1),
 new XYChart.Data(3,9),
 new XYChart.Data(4,5),
 new XYChart.Data(5,7),
 new XYChart.Data(6,6)
 ].forEach(function(item){
 series1.data.add(item);
 });
 lineChart.data.add(series1);
 var series2 = new XYChart.Series();
 series2.setName("My portfolio");
 [new XYChart.Data(1,12),
 new XYChart.Data(2,11),
 new XYChart.Data(3,19),
 new XYChart.Data(4,15),
 new XYChart.Data(5,17),
 new XYChart.Data(6,16)].forEach(function(item){
 series2.data.add(item);
 })
 lineChart.data.add(series2);
 var scene = new Scene (lineChart, 800, 600);
 primaryStage.scene = scene;
 primaryStage.show();
}

Answer 1

Interesting question,

from a high level, I think it will be hard to write idiomatic JavaScript using libraries that are straight ports out of Java..

In my mind (meaning, this is not canonical), JS tends to do more during initialization so that this

 var data1 = [
 new XYChart.Data(1,2),
 new XYChart.Data(2,1),
 new XYChart.Data(3,9),
 new XYChart.Data(4,5),
 new XYChart.Data(5,7),
 new XYChart.Data(6,6)
];
 var series1 = new XYChart.Series( "Reference portfolio" , data1 );

seems more natural than this

var series1 = new XYChart.Series();
series1.setName("Reference portfolio");
[new XYChart.Data(1,2),
 new XYChart.Data(2,1),
 new XYChart.Data(3,9),
 new XYChart.Data(4,5),
 new XYChart.Data(5,7),
 new XYChart.Data(6,6)
].forEach(function(item){
 series1.data.add(item);
});

Also, from a var declaration perspective, you either group all your var statements on top or you declare them to where you are going to use them. You have a mixture of both approaches. Especially the declaration of lineChart looks needlessly odd, I would simply deal with lineChart at the very end.

var lineChart = new LineChart(xAxis, yAxis); //Could have been on top
lineChart.setTitle("Stock Monitoring 2010");
lineChart.data.add(series1);
lineChart.data.add(series2);

The same goes for primaryStage, I would have set title in the same space as primaryStage.scene = scene which most JS people would have written as primaryStage.scene = new Scene (lineChart, 800, 600); if you are going to use the variable only once, and you are not in danger of stretching too much horizontally, just do a direct assignment.

This very much looks like sample code, I think your Java'isms will show more once you get into the nitty gritty. So I am looking forward to you posting some of your real JS code.