📊 Exposing charts from Java to JavaFX and the Web!

Last update: Oct 26, 2022

Overview

Exposing charts from Java to JavaFX and to the Web!

JavaFX · Charts · Websockets · Jetty · Web

JavaFxDataviewer is an open-source data visualization tool for JavaFX.

It is a JavaFX wrapper of the Dataviewer project : https://github.com/jasrodis/dataviewer. It is based on Plotly.js, JavaFx, Jetty and Websockets.

Examples

Extensive usage of the JavaFxDataViewer with examples can be found : http://github.com/jasrodis/javafx-dataviewer-example

Requirements

Recent version of Java installed supporting JavaFX.

To install the library to your project

Maven JitPack installation :

<dependency> <groupId>com.github.jasrodis</groupId> <artifactId>javafx-dataviewer-wrapper</artifactId> <version>-SNAPSHOT</version> </dependency>

#Documentation

API

JavaFxDataViewer (extends DataViewer, JavaFX Wrapper)

DataViewerConfiguration

Trace

TraceConfiguration

PlotData

DataViewer & DataViewerConfiguration

DataViewer is the main plotting window. It is configured by the DataViewerConfiguration.

With DataViewer you can :

Update your Plot Configuration

Update your Plot Data

Reset your Plot Data

Get the exposed URL

DataViewer

updatePlot(PlotData data); // Updates the plot updatePlotConfiguration(DataViewerConfiguration config); // Updates the dataviewer (window) configuration. getUniqueID(); // Get the unique ID of the dataviewer - // navigate http://localhost:8090/view/UNIQUE_ID/

DataViewerConfiguration

setPlotTitle(String title); // plot title setxAxisTitle(String title); // x axis title setyAxisTitle(String title); // x axis title setMarginTop(int margin); // margin top setMarginBottom(int margin); // margin bottom setMarginRight(int margin); // margin right setMarginLeft(int margin); // margin left setPadding(int padding); // padding setxRange(double min, double max); // Set the range of the x axis of the dataviewer setyRange(double min, double max); // Set the range of the x axis of the dataviewer setxAxisType(AxisType type); // Set the axis type of x axis (log or linear) setyAxisType(AxisType type); // Set the axis type of y axis (log or linear) showLegend(boolean set); // Show/hide Legend setLegendInsidePlot(boolean inside); // Show legend inside plot

See usage example below:

// Create dataviewer DataViewer dataviewer = new DataViewer(); // Create dataviewer configuration DataViewerConfiguration config = new DataViewerConfiguration(); // Plot title config.setPlotTitle("Line Trace Example"); // X axis title config.setxAxisTitle("X Example 1"); // Y axis title config.setyAxisTitle("Y Example 1"); // Update the configuration dataviewer.sendConfiguration(config); // Container of traces PlotData plotData = new PlotData(new LineTrace<Float>()); // Plot all traces in the container. dataviewer.updatePlot(plotData);

Resetting the dataviewer example:

JavaFxDataViewer dataviewer = new JavaFxDataViewer(); DataViewerConfiguration config = new DataViewerConfiguration(); dataviewer.sendConfiguration(config); PlotData plotData = new PlotData(); dataviewer.updatePlot(plotData); // Reset your Plot (removes all trace from the dataviewer) dataviewer.resetPlot();

Traces

Traces are the different kind of plots that are going to be drawed in the DataViewer. Provided Traces:

GenericTrace<T>

LineTrace<T>

ScatterTrace<T>

BarTrace<T>

TimeSeriesTrace<T>

HistogramTrace<T>

ContourTrace<T>

More to be provided..

GenericTrace

GenericTrace is an abstract class that all traces inherit from.

It can be used as a container when the type of the trace is not known.

See usage example below:

Methods: // Config setTraceName(String traceName); // Updates the plot setConfiguration(TraceConfiguration traceConfig) // Set the trace configuration setTraceColour(TraceColour colour); // Set trace Colour setTraceMode(TraceMode mode); // Set the trace mode (LINES, MARKERS, MARKERS_AND_LINES) setTraceType(TraceType traceType); // Set the trace Type (BAR, LINE, SCATTER, CONTOUR ...) setTraceVisibility(TraceVisibility visibility); // Visibility of the trace(TRUE, FALSE, LEGENDONLY) // Data setxAxis(T[] xAxis); setyAxis(T[] xAxis); setzAxis(T[] zAxis);

GenericTrace Example - abstract class ( should not be used like this! )

GenericTrace<Double> genericTrace = new LineTrace<>(); genericTrace.setxArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); genericTrace.setyArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); genericTrace.setTraceColour(TraceColour.PURPLE); genericTrace.setTraceName("Line Trace"); genericTrace.setTraceType(TraceType.LINE); genericTrace.setTraceMode(TraceMode.LINES); genericTrace.setTraceVisibility(TraceVisibility.TRUE);

LineTrace

Example:

LineTrace<Double> lineTrace = new LineTrace<>(); lineTrace.setTraceName("MyLineTrace"); lineTrace.setxArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); lineTrace.setyArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); lineTrace.setTraceColour(TraceColour.PURPLE);

Example with configuration object:

LineTrace<Double> lineTrace = new LineTrace<>(); lineTrace.setTraceName("MyLineTrace"); lineTrace.setxArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); lineTrace.setyArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); TraceConfiguration lineConfig = new TraceConfiguration(); lineConfig.setTraceColour(TraceColour.RED); lineTrace.setConfiguration(lineConfig);

BarTrace

Example:

BarTrace<Object> barTrace = new BarTrace<>(); barTrace.setTraceName("MyBarTrace"); barTrace.setxArray(new String[] { "one", "two", "three", "four", "five", "six" }); barTrace.setyArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); barTrace.setTraceColour(TraceColour.PURPLE);

Example with configuration object:

BarTrace<Object> barTrace = new BarTrace<>(); barTrace.setTraceName("MyBarTrace"); barTrace.setxArray(new String[] { "one", "two", "three", "four", "five", "six" }); barTrace.setyArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); TraceConfiguration barConfig = new TraceConfiguration(); barConfig.setTraceColour(TraceColour.RED); barTrace.setConfiguration(barConfig);

ScatterTrace

Example:

Scatter<Float> scatterTrace = new ScatterTrace<>(); scatterTrace.setTraceName("MyScatterTrace"); scatterTrace.setxArray(new Float[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); scatterTrace.setyArray(new Float[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); scatterTrace.setTraceColour(TraceColour.PURPLE);

Example with configuration object:

ScatterTrace<Double> scatterTrace = new ScatterTrace<>(); scatterTrace.setTraceName("MyScatterTrace"); scatterTrace.setxArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); scatterTrace.setyArray(new Double[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); TraceConfiguration scatterConfig = new TraceConfiguration(); scatterConfig.setTraceColour(TraceColour.RED); scatterTrace.setConfiguration(scatterConfig);

TimeSeriesTrace

Example:

TimeSeries<Object> timeSeriesTrace = new TimeSeriesTrace<>(); timeSeriesTrace.setTraceName("MyTimeSeriesTrace"); timeSeriesTrace.setxArray(new String[] { "2013-10-04 22:23:00", "2013-10-05 22:23:01", "2013-10-06 22:23:02", "2013-10-07 22:23:03", "2013-10-08 22:23:04", "2013-10-09 22:23:05", "2013-10-10 22:23:06" }); timeSeriesTrace.setyArray(new Float[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); timeSeriesTrace.setTraceColour(TraceColour.PURPLE);

Example with configuration object:

TimeSeriesTrace<Double> timeSeriesTrace = new TimeSeriesTrace<>(); timeSeriesTrace.setTraceName("MyTimeSeriesTrace"); timeSeriesTrace.setxArray(new String[] { "2013-10-04 22:23:00", "2013-10-05 22:23:01", "2013-10-06 22:23:02", "2013-10-07 22:23:03", "2013-10-08 22:23:04", "2013-10-09 22:23:05", "2013-10-10 22:23:06" }); timeSeriesTrace.setyArray(new Float[] { 0.0, 1.0, 2.0, 3.0, 4.0, 5.0 }); TraceConfiguration timeSeriesConfig = new TraceConfiguration(); timeSeriesTrace.setTraceColour(TraceColour.RED); timeSeriesTrace.setConfiguration(timeSeriesConfig);

CountourTrace

Example:

ContourTrace<Double> contourTrace = new ContourTrace<>(); contourTrace.setxArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); contourTrace.setyArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); contourTrace.setzArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); contourTrace.setTraceName("ContourTrace");

Example with configuration object:

ContourTrace<Double> contourTrace = new ContourTrace<>(); contourTrace.setxArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); contourTrace.setyArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); contourTrace.setzArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); TraceConfiguration contourConfig = new TraceConfiguration(); contourConfig.setTraceName("ContourTrace"); contourTrace.setConfiguration(contourConfig);

Histogram

Example:

HistogramTrace<Double> histogramTrace = new HistogramTrace<>(); histogramTrace.setxArray(new Double[] { -0.2, 0.0, 0.1, 0.1, 0.3, 0.4, 0.5, 0.5, 0.6, 1.6 }); histogramTrace.setTraceName("MyHistogramTrace"); histogramTrace.setTraceColour(TraceColour.BLUE);

Example with configuration object:

HistogramTrace<Double> histogramTrace = new HistogramTrace<>(); histogramTrace.setxArray(new Double[] { 0.0, 1.0, 200.0, 3.0, 4000.0, 5.0 }); TraceConfiguration histogramConfig = new TraceConfiguration(); histogramConfig.setTraceName("HistogramTrace"); histogramConfig.setTraceColour(TraceColour.RED); histogramTrace.setConfiguration(histogramConfig);

Features

plotly.js features

You can find plotly features here: http://help.plot.ly/getting-to-know-the-plotly-modebar/

JavaFxDataViewer features

Additional Features have been added so far :

Change in logarithmic scales.

Data visualization in table.

Show/Move legend.

Export data to CSV.

Change trace type.

Date & time of the latest plot udpate

Architecture Overview

DataViewer uses the embedded Jetty Server in order to create Websocket Endpoints and Serve Static Html & Javascript pages. These pages will be loaded in the JavaFX WebView that the library is using.

Overview of the architecture:

Sequence diagram

Comments

Other than maven build systems

it will nice to add link too jitpack of project for saving some user time . i spend 30 minutes while i found where was library published. jitpack It will save huge amount user time, and also will increase interest for this library.

opened by alex5250 0
Plot "Not Initialized"

Hi,

I downloaded the exmaple project, and running it with Maven on Java8.

In the browser the plots are shown properly, but in the application itself I see blank plots where the name of the plot and the axes are "Not initialized".

Did you see this behaviour previously?

Thanks for the help in advance, David

opened by davidvarga 0
jetty-server vulnerability

CVE-2017-7658 More information high severity Vulnerable versions: > 9.2.0, < 9.2.25.v20180606 Patched version: 9.2.25.v20180606 In Eclipse Jetty Server, versions 9.2.x and older, 9.3.x (all non HTTP/1.x configurations), and 9.4.x (all HTTP/1.x configurations), when presented with two content-lengths headers, Jetty ignored the second. When presented with a content-length and a chunked encoding header, the content-length was ignored (as per RFC 2616). If an intermediary decided on the shorter length, but still passed on the longer body, then body content could be interpreted by Jetty as a pipelined request. If the intermediary was imposing authorization, the fake pipelined request would bypass that authorization.

CVE-2017-7656 More information moderate severity Vulnerable versions: < 9.3.24.v20180605 Patched version: 9.3.24.v20180605 In Eclipse Jetty, versions 9.2.x and older, 9.3.x (all configurations), and 9.4.x (non-default configuration with RFC2616 compliance enabled), HTTP/0.9 is handled poorly. An HTTP/1 style request line (i.e. method space URI space version) that declares a version of HTTP/0.9 was accepted and treated as a 0.9 request. If deployed behind an intermediary that also accepted and passed through the 0.9 version (but did not act on it), then the response sent could be interpreted by the intermediary as HTTP/1 headers. This could be used to poison the cache if the server allowed the origin client to generate arbitrary content in the response.

CVE-2017-9735 More information moderate severity Vulnerable versions: >= 9.2.0, < 9.2.22.v20170606 Patched version: 9.2.22.v20170606 Jetty through 9.4.x is prone to a timing channel in util/security/Password.java, which makes it easier for remote attackers to obtain access by observing elapsed times before rejection of incorrect passwords.

CVE-2017-7657 More information critical severity Vulnerable versions: < 9.2.25.v20180606 Patched version: 9.2.25.v20180606 In Eclipse Jetty, versions 9.2.x and older, 9.3.x, transfer-encoding chunks are handled poorly. The chunk length parsing was vulnerable to an integer overflow. Thus a large chunk size could be interpreted as a smaller chunk size and content sent as chunk body could be interpreted as a pipelined request. If Jetty was deployed behind an intermediary that imposed some authorization and that intermediary allowed arbitrarily large chunks to be passed on unchanged, then this flaw could be used to bypass the authorization imposed by the intermediary as the fake pipelined request would not be interpreted by the intermediary as a request.

opened by jasrodis 0

Bar Trace Config Not Applying/First Bar is Never Drawn

I am attempting to use the barTrace in my project and no matter what I try, the first bar never gets drawn on the screen. The screenshot examples seem to have this issue as well. The first bar is not drawn on the examples either. All other bars are drawn fine. I also noticed when debugging, the configuration is not getting saved to the barTrace either. Still getting orange bars when color is set to purple. Below is the code I am using. Viewing the trace in plotly on the web displays the bar chart perfectly.

    JavaFxDataViewer dataviewer = new JavaFxDataViewer();

    DataViewerConfiguration config = new DataViewerConfiguration();

    BarTrace<Object> barTrace = new BarTrace<>();

    TraceConfiguration barConfig = new TraceConfiguration();

    PlotData plotData = new PlotData();

    String xAxis[] = {" "," "," "," "," "," "," "," "," "," "};
    Integer yAxis[] = {1,1,1,1,1,1,1,1,1,1};

    for(String s: topTen.keySet()){
        xAxis[i] = s;
        i++;
    }

    for(int p: topTen.values()){
        yAxis[j] = p;
        j++;
    }

    barTrace.setxArray(xAxis);
    barTrace.setyArray(yAxis);
    barTrace.setTraceColour(TraceColour.PURPLE);
    barTrace.setConfiguration(barConfig);

    config.setPlotTitle("Top 10 Words Used");
    config.setxAxisTitle("Word");
    config.setyAxisTitle("Times Used");
    config.showLegend(true);
    config.setLegendInsidePlot(false);

    dataviewer.updateConfiguration(config);

    plotData.addTrace(barTrace);

    dataviewer.updatePlot(plotData);

opened by Jeffus66 1

Server is not closing when widget destroyed.

I'm using the JavaFxDataViewer in my TornadoFX (kotlin project).

It seems that when I close the window, the server is still running.

I added:

override fun onUndock() { ChartServiceServer.getInstance().server.stop() }

to my view, and now it closes properly.

Is that a bug?

opened by bjonnh 1