https://github.com/jasrodis/javafx-dataviewer-wrapper
📊 Exposing charts from Java to JavaFX and the Web!
https://github.com/jasrodis/javafx-dataviewer-wrapper
charts java javafx javascript jetty web websocket
Last synced: 20 days ago
JSON representation
📊 Exposing charts from Java to JavaFX and the Web!
- Host: GitHub
- URL: https://github.com/jasrodis/javafx-dataviewer-wrapper
- Owner: jasrodis
- License: mit
- Created: 2018-04-25T12:12:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-23T16:51:43.000Z (over 6 years ago)
- Last Synced: 2024-02-12T17:02:50.945Z (over 1 year ago)
- Topics: charts, java, javafx, javascript, jetty, web, websocket
- Language: Java
- Homepage:
- Size: 843 KB
- Stars: 59
- Watchers: 8
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- AwesomeJavaFX - JavaFX DataViewer - JavaFX Charts library. Create Charts in JavaFX using the plotly.js library. (Libraries, Tools and Projects)
README
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](https://plot.ly/javascript/), [JavaFx](http://docs.oracle.com/javase/8/javase-clienttechnologies.htm), [Jetty](http://www.eclipse.org/jetty/) and Websockets.
## Examples
Extensive usage of the JavaFxDataViewer with examples can be found : [http://github.com/jasrodis/javafx-dataviewer-example](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 :
```xml
com.github.jasrodis
javafx-dataviewer-wrapper
-SNAPSHOT
```
#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 :
1. Update your Plot Configuration
2. Update your Plot Data
3. Reset your Plot Data
4. Get the exposed URL
##### DataViewer
```java
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
```java
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:
```java
// 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());
// Plot all traces in the container.
dataviewer.updatePlot(plotData);
```
Resetting the dataviewer example:
```java
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`
* `LineTrace`
* `ScatterTrace`
* `BarTrace`
* `TimeSeriesTrace`
* `HistogramTrace`
* `ContourTrace`
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:
```java
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! )
```java
GenericTrace 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:
```java
LineTrace 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:
```java
LineTrace 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:
```java
BarTrace 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:
```java
BarTrace 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:
```java
Scatter 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:
```java
ScatterTrace 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:
```java
TimeSeries 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:
```java
TimeSeriesTrace 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:
```java
ContourTrace 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:
```java
ContourTrace 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:
```java
HistogramTrace 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:
```java
HistogramTrace 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/](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
