How do I embed my JavaFX area chart in a JSP?

[Eddie Cross]

I am new to JavaFX and I'm currently working on a project where I have to embed a JavaFX area chart in a Web application using JSP. This is my java code for the area chart which runs perfectly when run as a Java application.

import java.util.concurrent.ConcurrentLinkedQueue;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.logging.Level;
import java.util.logging.Logger;

import javafx.animation.AnimationTimer;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;

/**
 * A chart that fills in the area between a line of data points and the axes.
 * Good for comparing accumulated totals over time.
 * 
 * @see javafx.scene.chart.Chart
 * @see javafx.scene.chart.Axis
 * @see javafx.scene.chart.NumberAxis
 * @related charts/line/LineChart
 * @related charts/scatter/ScatterChart
 */
public class AreaChartSample extends Application {
	private static final int MAX_DATA_POINTS = 50;

	@SuppressWarnings("rawtypes")
	private Series series;
	private int xSeriesData = 0;
	private ConcurrentLinkedQueue<Number> dataQ = new ConcurrentLinkedQueue<Number>();
	private ExecutorService executor;
	private AddToQueue addToQueue;
	@SuppressWarnings("unused")
	private Timeline timeline2;
	private NumberAxis xAxis;

	@SuppressWarnings("unchecked")
	private void init(Stage primaryStage) {
		xAxis = new NumberAxis(0, MAX_DATA_POINTS, MAX_DATA_POINTS / 10);
		xAxis.setForceZeroInRange(false);
		xAxis.setAutoRanging(false);

		NumberAxis yAxis = new NumberAxis();
		yAxis.setAutoRanging(true);

		// -- Chart
		final AreaChart<Number, Number> sc = new AreaChart<Number, Number>(xAxis, yAxis) {
			// Override to remove symbols on each data point
			@Override
			protected void dataItemAdded(Series<Number, Number> series, int itemIndex, Data<Number, Number> item) {
			}
		};
		sc.setAnimated(false);
		sc.setId("liveAreaChart");
		sc.setTitle("Animated Area Chart");

		// -- Chart Series
		series = new AreaChart.Series<Number, Number>();
		series.setName("Area Chart Series");
		sc.getData().add(series);

		primaryStage.setScene(new Scene(sc));
	}

	@Override
	public void start(Stage primaryStage) throws Exception {
		init(primaryStage);
		primaryStage.show();

		// -- Prepare Executor Services
		executor = Executors.newCachedThreadPool();
		addToQueue = new AddToQueue();
		executor.execute(addToQueue);
		// -- Prepare Timeline
		prepareTimeline();
	}

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

	private class AddToQueue implements Runnable {
		public void run() {
			try {
				// add a item of random data to queue
				dataQ.add(Math.random());
				Thread.sleep(1000);
				executor.execute(this);
			} catch (InterruptedException ex) {
				Logger.getLogger(AreaChartSample.class.getName()).log(Level.SEVERE, null, ex);
			}
		}
	}

	// -- Timeline gets called in the JavaFX Main thread
	private void prepareTimeline() {
		// Every frame to take any data from queue and add to chart
		new AnimationTimer() {
			@Override
			public void handle(long now) {
				addDataToSeries();
			}
		}.start();
	}

	@SuppressWarnings({ "unchecked", "rawtypes" })
	private void addDataToSeries() {
		for (int i = 0; i < 20; i++) { // -- add 20 numbers to the plot+
			if (dataQ.isEmpty())
				break;
			series.getData().add(new AreaChart.Data(xSeriesData++, dataQ.remove()));
		}
		// remove points to keep us at no more than MAX_DATA_POINTS
		if (series.getData().size() > MAX_DATA_POINTS) {
			series.getData().remove(0, series.getData().size() - MAX_DATA_POINTS);
		}
		// update
		xAxis.setLowerBound(xSeriesData - MAX_DATA_POINTS);
		xAxis.setUpperBound(xSeriesData - 1);
	}
}

I also packaged the application as a JAR applet which also runs perfectly but when I try to embed it in the JSP using the <applet > tag, it doesn't show up because it is unsigned. All I get is "Error. Click for details" in red.
This is my applet tag

<applet archive="chart.jar" code="randomGraph/AreaChartSample.class" width="400" height="600"> </applet>

Can someone please explain how I can display this chart on the JSP. Thanks in advance.

[Bear Bibeault]

Applets are obsolete and disabled by default in most browsers.

Most server-side charting options seem to focus on writing the chart to an image, and then statically displaying that image in an HTML page. This is obviously limiting as it precludes real-time interaction with the chart.

That is why the modern approach is to send the data to the page, where JavaScript can be used to create interactive charts. There are any number of packages that make this pretty easy such as Highcharts, or Flot charts, or a bunch of others that you can search for. If you are somewhat masochistic, you can look at D3.

Why did you choose a desktop technology such as JavaFX if your intent was to show the chart on the web?

[Eddie Cross]

Bear Bibeault wrote:Applets are obsolete and disabled by default in most browsers.

Most server-side charting options seem to focus on writing the chart to an image, and then statically displaying that image in an HTML page. This is obviously limiting as it precludes real-time interaction with the chart.

That is why the modern approach is to send the data to the page, where JavaScript can be used to create interactive charts. There are any number of packages that make this pretty easy such as Highcharts, or Flot charts, or a bunch of others that you can search for. If you are somewhat masochistic, you can look at D3.

Why did you choose a desktop technology such as JavaFX if your intent was to show the chart on the web?

Hello Bear, thanks for such a quick response. The thing is I've been told to use JavaFX for the chart. I understood what you said completely. I am now thinking about using Jfreecharts. The Javafx code posted earlier plots random number so what I did is I wrote a random number generator in Javascript. This is the script part.

<script type="text/javascript">
	var id = window.setInterval(function() {
		randomNumber();
	}, 2000);

	function randomNumber() {
		var rand = Math.floor(Math.random() * 6);
		var textbox = document.getElementById('textbx');
		textbox.value = rand;
	}
</script>
</head>
<body>
	<div id="container">
		<input type="text" name="textbx" id="textbx" readonly="readonly"
			value="">

	</div>
<body>

Now can I use this value as the input to my Jfreechart or Highcharts?

[Bear Bibeault]

Eddie Cross wrote:
Now can I use this value as the input to my Jfreechart or Highcharts?

JFreeChart is a server-side Java solution to create static charts. So, no. This approach is a decade or so so out of date, and not an approach I'd recommend.

JavaScript solutions take data from wherever you get it (very often a REST API) and create interactive charts on the fly using that data. This is the approach I recommend.

Highcharts requires a license for commercial use, but is very versatile and easy to use. There is a large community and tons of online examples.

Others, such as Flot charts are free, but with fewer features and smaller communities.

[Bear Bibeault]

And, at least with Highcharts (which is what I have the most experience with), it's easy to update the chart data without needing to refresh anything, or even redraw the entire chart. I assume that's what you intend to do with your 2-second intervals?

[Eddie Cross]

I just looked up a few examples on Highcharts. Found exactly what I needed. I also tried it out and it works perfectly!

Thank you Sir Bear Bibeault.

[Bear Bibeault]

Welcome to the Ranch!