How do i plot the straight line of best fit and the product-moment correlation coefficient on a Scatter diagram using JavaFX library? I've tried to Google a few examples but none were precise or even similar to what i'm trying to do. I'm new to JavaFX so any help is appreciated. There were a few examples on the internet but all were for completely different libraries which is of no help to me.
I have the following code which displays a Scatter diagram (just an example):
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
public class Scatter extends Application {
#Override
public void start(Stage stage) {
final NumberAxis xAxis = new NumberAxis(0, 100, 20);
final NumberAxis yAxis = new NumberAxis(0, 100, 20);
final ScatterChart<Number,Number> sc = new
ScatterChart<Number,Number>(xAxis,yAxis);
xAxis.setLabel("Average across all exams");
yAxis.setLabel("Spring Term test marks");
sc.setTitle("Students marks");
XYChart.Series plots = new XYChart.Series();
plots.getData().add(new XYChart.Data(10,15));
plots.getData().add(new XYChart.Data(15,20));
plots.getData().add(new XYChart.Data(77,77));
plots.getData().add(new XYChart.Data(55,13));
plots.getData().add(new XYChart.Data(44,22));
plots.getData().add(new XYChart.Data(45,43));
sc.getData().add(plots);
Scene scene = new Scene(sc, 600, 600);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The actual formulae computation of the line of best fit and the correlation coefficient can be easily found elsewhere (and sound a bit like a homework problem), so I will omit those; it sounds like you just want to know how to add nodes (e.g. the actual line) to the chart.
The basic idea is to subclass ScatterChart and override the layoutPlotChildren method. You can use CSS to color each best fit line the same color as the data in the corresponding series by referencing the looked-up-colors CHART_COLOR_N for N=1...8.
Here is an example (I just use dummy values for the formula for the line, you can replace with the real calculations):
import java.util.ArrayList;
import java.util.List;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.shape.Line;
public class ScatterPlotWithBestFitLine extends ScatterChart<Number, Number> {
private final NumberAxis xAxis ;
private final NumberAxis yAxis ;
private final List<Line> lines = new ArrayList<>();
public ScatterPlotWithBestFitLine(NumberAxis xAxis, NumberAxis yAxis) {
super(xAxis, yAxis);
this.xAxis = xAxis ;
this.yAxis = yAxis ;
getStylesheets().add("best-fit-line.css");
}
#Override
protected void layoutPlotChildren() {
getPlotChildren().removeAll(lines);
lines.clear();
super.layoutPlotChildren();
int index = 0 ;
for (Series<Number, Number> series : getData()) {
Line line = new Line();
line.setStartX(xAxis.getDisplayPosition(xAxis.getLowerBound()));
line.setEndX(xAxis.getDisplayPosition(xAxis.getUpperBound()));
int count = (index % 8) + 1 ;
line.getStyleClass().add("best-fit-line");
line.getStyleClass().add("best-fit-line-"+count);
// TODO compute actual line of best fit...
// can iterate through values with:
// for (Data<Number, Number> d : series.getData()) {
// double x = d.getXValue().doubleValue();
// double y = d.getYValue().doubleValue();
// }
// just dummy values:
double m = 0 ;
double b = (getData().size() - index) * yAxis.getLowerBound() + (index + 1) * yAxis.getUpperBound() / 2 ;
line.setStartY(yAxis.getDisplayPosition(m * xAxis.getLowerBound() + b));
line.setEndY(yAxis.getDisplayPosition(m * xAxis.getUpperBound() + b));
getPlotChildren().add(line);
lines.add(line);
index++ ;
}
}
}
with best-fit-line.css:
.best-fit-line {
-fx-stroke-width: 2 ;
}
.best-fit-line-1 {
-fx-stroke: CHART_COLOR_1 ;
}
.best-fit-line-2 {
-fx-stroke: CHART_COLOR_2 ;
}
.best-fit-line-3 {
-fx-stroke: CHART_COLOR_3 ;
}
.best-fit-line-4 {
-fx-stroke: CHART_COLOR_4 ;
}
.best-fit-line-5 {
-fx-stroke: CHART_COLOR_5 ;
}
.best-fit-line-6 {
-fx-stroke: CHART_COLOR_6 ;
}
.best-fit-line-7 {
-fx-stroke: CHART_COLOR_7 ;
}
.best-fit-line-8 {
-fx-stroke: CHART_COLOR_8 ;
}
and a demo:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;
public class ScatterPlotTest extends Application {
#Override
public void start(Stage primaryStage) {
ScatterPlotWithBestFitLine plot = new ScatterPlotWithBestFitLine(new NumberAxis(), new NumberAxis());
plot.getData().add(createSeries("Data", new double[] {
{10,15},
{15,20},
{77,77},
{55,13},
{44,22},
{45,43}
}));
Scene scene = new Scene(plot, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
private Series<Number, Number> createSeries(String name, double[][] values) {
Series<Number, Number> series = new Series<>();
series.setName("Data");
for (double[] point : values) {
series.getData().add(new Data<>(point[0],point[1]));
}
return series ;
}
public static void main(String[] args) {
launch(args);
}
}
You didn't really specify what you wanted to do in terms of displaying the correlation coefficient. You could create a label (or multiple labels in the case of multiple series in your plot) and add them to the chart (somewhere) in the same manner. Alternatively, you could include the correlation coefficient in the name of the series, so it appears in the legend. Using a binding between the nameProperty() and the data would make sure this stayed up to date if the data changes:
private Series<Number, Number> createSeries(String name, double[][] values) {
Series<Number, Number> series = new Series<>();
ObservableList<Data<Number, Number>> data = FXCollections.observableArrayList(
d -> new Observable[] {d.XValueProperty(), d.YValueProperty()});
for (double[] point : values) {
series.getData().add(new Data<>(point[0],point[1]));
}
series.nameProperty().bind(Bindings.createStringBinding(() ->
String.format("%s (r=%.3f)", name, computeCorrelation(data)),
data);
return series ;
}
private double computeCorrelation(List<Data<Number, Number>> data) {
//TODO compute correlation from data...
return 0 ;
}
Related
thanks for reading my question.
I'm currently working with JavaFX-8, SceneBuilder and Eclipse.
I want to do a scatter chart with four quadrants, that has two fixed number axis (the data position is not relevant, I only need to display the dots on each quadrant... only matters in which quadrant a dot is). Each quadrant must have a background with a specific color.
I found this question, so I tried to extend ScatterChart with the aim of overriding the method layoutPlotChildren(). I tried a minimum implementation to see if it will run with my FXML (I did import the new component to the FXML). This was my minimum implementation:
public class ScatterQuadrantChart<X,Y> extends ScatterChart<X,Y> {
public ScatterQuadrantChart(Axis<X> xAxis, Axis<Y> yAxis) {
super(xAxis, yAxis);
} }
And then, I get the NotSuchMethodError init error. I found a similar error but from someone extending LineChart here, but I'm not quite sure of what I need to do on my own class.
I tried adding a no-parameters constructor, but I need to call super and cant because I can't call the "getXAxis()" method either. What should I do here?
Plus, the other issue that remains is, once I solve this, what should the layoutPlotChildren() method do?
Thanks for reading.
The problem you are seeing is arising because the default mechanism for the FXMLLoader to instantiate a class is to call the no-argument constructor. Your ScatterQuadrantChart has no no-argument constructor, hence the NoSuchMethodError.
Prior to Java 8, the only way to fix this was to create a builder class for your class, as in the post you linked. JavaFX 8 introduced (but failed to document) a mechanism to specify values for constructor parameters that would be recognized by the FXMLLoader, using the #NamedArg annotation).
So, in Java 8, you can modify your ScatterQuadrantChart:
public class ScatterQuadrantChart<X,Y> extends ScatterChart<X,Y> {
public ScatterQuadrantChart(#NamedArg("xAxis")Axis<X> xAxis,
#NamedArg("yAxis)Axis<Y> yAxis) {
super(xAxis, yAxis);
}
}
and then your FXML will look like
<ScatterQuadrantChart>
<xAxis>
<NumberAxis ... />
</xAxis>
<yAxis>
<NumberAxis ... />
</yAxis>
</ScatterQuadrantChart>
I have no idea if or how SceneBuilder will interact with this, but the FXML will work.
As for the implementation, you will need to add some nodes to the plot to represent your quadrants. I would probably just use plain regions for these. Create them in the constructor and call getPlotChildren().add(...) to add them. Then in the layoutPlotChildren() method, first call the superclass method (which will lay out the scatter chart nodes), and then resize and reposition the quadrants. You can use getXAxis().getDisplayPosition(...) to figure out the location from the actual divider value.
In real life, you should add style classes to the quadrants so you can style them externally with css, etc, but a very basic implementation might look like
import javafx.beans.NamedArg;
import javafx.beans.property.Property;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.scene.chart.Axis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.layout.Region;
public class ScatterQuadrantChart<X,Y> extends ScatterChart<X,Y> {
private final Property<X> xQuadrantDivider = new SimpleObjectProperty<>();
private final Property<Y> yQuadrantDivider = new SimpleObjectProperty<>();
private final Region nwQuad ;
private final Region neQuad ;
private final Region swQuad ;
private final Region seQuad ;
public ScatterQuadrantChart(#NamedArg("xAxis") Axis<X> xAxis,
#NamedArg("yAxis") Axis<Y> yAxis) {
super(xAxis, yAxis);
nwQuad = new Region();
neQuad = new Region();
swQuad = new Region();
seQuad = new Region();
nwQuad.setStyle("-fx-background-color: lightsalmon ;");
neQuad.setStyle("-fx-background-color: antiquewhite ;");
swQuad.setStyle("-fx-background-color: aqua ;");
seQuad.setStyle("-fx-background-color: lightskyblue ;");
getPlotChildren().addAll(nwQuad, neQuad, swQuad, seQuad);
ChangeListener<Object> quadListener = (obs, oldValue, newValue) -> layoutPlotChildren();
xQuadrantDivider.addListener(quadListener);
yQuadrantDivider.addListener(quadListener);
}
#Override
public void layoutPlotChildren() {
super.layoutPlotChildren();
X x = xQuadrantDivider.getValue();
Y y = yQuadrantDivider.getValue();
if (x != null && y != null) {
Axis<X> xAxis = getXAxis();
Axis<Y> yAxis = getYAxis();
double xPixels = xAxis.getDisplayPosition(x);
double yPixels = yAxis.getDisplayPosition(y);
double totalWidth = xAxis.getWidth();
double totalHeight = yAxis.getHeight();
nwQuad.resizeRelocate(0, 0, xPixels, yPixels);
swQuad.resizeRelocate(0, yPixels, xPixels, totalHeight - yPixels);
neQuad.resizeRelocate(xPixels, 0, totalWidth - xPixels, yPixels);
seQuad.resizeRelocate(xPixels, yPixels, totalWidth - xPixels, totalHeight - yPixels);
}
}
public final Property<X> xQuadrantDividerProperty() {
return this.xQuadrantDivider;
}
public final X getXQuadrantDivider() {
return this.xQuadrantDividerProperty().getValue();
}
public final void setXQuadrantDivider(final X xQuadrantDivider) {
this.xQuadrantDividerProperty().setValue(xQuadrantDivider);
}
public final Property<Y> yQuadrantDividerProperty() {
return this.yQuadrantDivider;
}
public final Y getYQuadrantDivider() {
return this.yQuadrantDividerProperty().getValue();
}
public final void setYQuadrantDivider(final Y yQuadrantDivider) {
this.yQuadrantDividerProperty().setValue(yQuadrantDivider);
}
}
Test code:
import java.util.Random;
import java.util.stream.Stream;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class ScatterQuadrantChartTest extends Application {
#Override
public void start(Stage primaryStage) {
final Random rng = new Random();
ScatterQuadrantChart<Number, Number> chart = new ScatterQuadrantChart<>(new NumberAxis(), new NumberAxis());
Series<Number, Number> series = new Series<>();
for (int i=0; i<20; i++) {
series.getData().add(new Data<>(rng.nextDouble() * 100, rng.nextDouble() * 100));
}
chart.getData().add(series);
chart.setXQuadrantDivider(50);
chart.setYQuadrantDivider(50);
BorderPane root = new BorderPane(chart);
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I took the sample code from here How to implement freeze column in GXT 3.x? and I came up with the code below. I've managed to make the columns dynamically move from locked grid to unlocked grid and vice versa. My problem is with the sizing of the grids. The original code used a fixed width. I can't have that. I need the grids (locked and unlocked) to fill as much space as the children columns need. The columns have a fixed width (let's say 50px;).
The part that interests me is here
HorizontalLayoutContainer gridWrapper = new HorizontalLayoutContainer();
root.setWidget(gridWrapper);
// add locked column, only 300px wide (in this example, use layouts
// to change how this works
HorizontalLayoutData lockedColumnLayoutData = new HorizontalLayoutData(300, 1.0);
// this is optional - without this, you get a little offset issue at
// the very bottom of the non-locked grid
lockedColumnLayoutData.setMargins(new Margins(0, 0, XDOM.getScrollBarWidth(), 0));
gridWrapper.add(lockedGrid, lockedColumnLayoutData);
// add non-locked section, taking up all remaining width
gridWrapper.add(mainGrid, new HorizontalLayoutData(1.0, 1.0));
and maybe here
final Grid<Stock> lockedGrid = new Grid<Stock>(store, lockedCm) {
#Override
protected Size adjustSize(Size size) {
// this is a tricky part - convince the grid to draw just
// slightly too wide
// and so push the scrollbar out of sight
Window.alert("" + (size.getWidth() + XDOM.getScrollBarWidth() - 1));
return new Size(size.getWidth() + XDOM.getScrollBarWidth() - 1, size.getHeight());
}
};
I am a newbie in GXT and in GWT in general so I used the same components as the original
answer. If what I need to accomplish can be solved easier with something other than HorizontalLayoutContainer, then feel free to change it.
package com.test.client;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.List;
import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.Style.ScrollDirection;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.dom.XDOM;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.core.client.util.Size;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.Resizable;
import com.sencha.gxt.widget.core.client.Resizable.Dir;
import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData;
import com.sencha.gxt.widget.core.client.event.BodyScrollEvent;
import com.sencha.gxt.widget.core.client.event.BodyScrollEvent.BodyScrollHandler;
import com.sencha.gxt.widget.core.client.event.CollapseEvent;
import com.sencha.gxt.widget.core.client.event.CollapseEvent.CollapseHandler;
import com.sencha.gxt.widget.core.client.event.ExpandEvent;
import com.sencha.gxt.widget.core.client.event.ExpandEvent.ExpandHandler;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.GridViewConfig;
import com.sencha.gxt.widget.core.client.grid.GroupSummaryView;
import com.sencha.gxt.widget.core.client.grid.SummaryColumnConfig;
import com.sencha.gxt.widget.core.client.grid.filters.GridFilters;
import com.sencha.gxt.widget.core.client.grid.filters.StringFilter;
import com.sencha.gxt.widget.core.client.menu.Item;
import com.sencha.gxt.widget.core.client.menu.Menu;
import com.sencha.gxt.widget.core.client.menu.MenuItem;
public class GridExample implements IsWidget, EntryPoint {
private static final StockProperties props = GWT.create(StockProperties.class);
private ContentPanel root;
private void rootInit() {
root = new ContentPanel();
root.setHeadingText("Locked Grid Sample");
root.setPixelSize(600, 300);
final Resizable resizable = new Resizable(root, Dir.E, Dir.SE, Dir.S);
root.addExpandHandler(new ExpandHandler() {
#Override
public void onExpand(ExpandEvent event) {
resizable.setEnabled(true);
}
});
root.addCollapseHandler(new CollapseHandler() {
#Override
public void onCollapse(CollapseEvent event) {
resizable.setEnabled(false);
}
});
}
#Override
public Widget asWidget() {
if (root == null) {
rootInit();
ColumnConfig<Stock, String> nameCol = new SummaryColumnConfig<Stock, String>(props.name(), 50, SafeHtmlUtils.fromTrustedString("<b>Company</b>"));
ColumnConfig<Stock, String> symbolCol = new SummaryColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
ColumnConfig<Stock, Double> lastCol = new SummaryColumnConfig<Stock, Double>(props.last(), 75, "Last");
ColumnConfig<Stock, Double> changeCol = new SummaryColumnConfig<Stock, Double>(props.change(), 100, "Change");
ColumnConfig<Stock, Date> lastTransCol = new SummaryColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");
lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));
List<ColumnConfig<Stock, ?>> l = new ArrayList<ColumnConfig<Stock, ?>>();
//l.add(nameCol);
l.add(symbolCol);
l.add(lastCol);
l.add(changeCol);
l.add(lastTransCol);
// create two column models, one for the locked section
ColumnModel<Stock> lockedCm = new ColumnModel<Stock>(Collections.<ColumnConfig<Stock, ?>> singletonList(nameCol));
ColumnModel<Stock> cm = new ColumnModel<Stock>(l);
ListStore<Stock> store = new ListStore<Stock>(props.key());
for (int i = 0; i < 30; i++)
store.add(new Stock("Stackoverflow" + i, "StackoverflowPosts"+i, 0, 2, new Date()));
// locked grid
final Grid<Stock> mainGrid = new Grid<Stock>(store, cm);
final Grid<Stock> lockedGrid = new Grid<Stock>(store, lockedCm) {
#Override
protected Size adjustSize(Size size) {
// this is a tricky part - convince the grid to draw just
// slightly too wide
// and so push the scrollbar out of sight
return new Size(size.getWidth() + XDOM.getScrollBarWidth() - 1, size.getHeight());
}
};
GridFilters<Stock> filters = new GridFilters<Stock>();
filters.setLocal(true);
filters.initPlugin(mainGrid);
filters.initPlugin(lockedGrid);
StringFilter<Stock> nameFilter = new StringFilter<Stock>(props.name());
filters.addFilter(nameFilter);
lockedGrid.setView(createGridView(mainGrid, "Unfreeze", true));
mainGrid.setView(createGridView(lockedGrid, "Freeze", false));
// link scrolling
lockedGrid.addBodyScrollHandler(new BodyScrollHandler() {
#Override
public void onBodyScroll(BodyScrollEvent event) {
mainGrid.getView()
.getScroller()
.scrollTo(ScrollDirection.TOP, event.getScrollTop());
}
});
mainGrid.addBodyScrollHandler(new BodyScrollHandler() {
#Override
public void onBodyScroll(BodyScrollEvent event) {
lockedGrid
.getView()
.getScroller()
.scrollTo(ScrollDirection.TOP, event.getScrollTop());
}
});
HorizontalLayoutContainer gridWrapper = new HorizontalLayoutContainer();
root.setWidget(gridWrapper);
// add locked column, only 300px wide (in this example, use layouts
// to change how this works
HorizontalLayoutData lockedColumnLayoutData = new HorizontalLayoutData();
// this is optional - without this, you get a little offset issue at
// the very bottom of the non-locked grid
lockedColumnLayoutData.setMargins(new Margins(0, 0, XDOM.getScrollBarWidth(), 0));
gridWrapper.add(lockedGrid, lockedColumnLayoutData);
// add non-locked section, taking up all remaining width
gridWrapper.add(mainGrid, new HorizontalLayoutData(1.0, 1.0));
}
return root;
}
#Override
public void onModuleLoad() {
RootPanel.get().add(asWidget());
}
private GridView<Stock> createGridView(final Grid<Stock> targetGrid, final String menuText, final boolean isLocked)
{
final GroupSummaryView<Stock> view = new GroupSummaryView<Stock>()
{
{
if(isLocked)
scrollOffset = 0;
}
protected Menu createContextMenu(final int colIndex)
{
final Menu createContextMenu = super.createContextMenu(colIndex);
MenuItem lockItem = new MenuItem();
lockItem.setText(menuText);
lockItem.addSelectionHandler(new SelectionHandler<Item>()
{
#Override
public void onSelection(SelectionEvent<Item> event) {
//I'm making new column models since getColumns() can't be modified
ColumnConfig<Stock, ?> column = grid.getColumnModel().getColumn(colIndex);
List<ColumnConfig<Stock, ?>> newCm = new ArrayList<>(cm.getColumns());
newCm.remove(colIndex);
grid.reconfigure(grid.getStore(), new ColumnModel<>(newCm));
List<ColumnConfig<Stock, ?>> newTargetCm = new ArrayList<>(targetGrid.getColumnModel().getColumns());
newTargetCm.add(column);
targetGrid.reconfigure(targetGrid.getStore(), new ColumnModel<>(newTargetCm));
grid.getView().refresh(true);
targetGrid.getView().refresh(true);
}
});
createContextMenu.add(lockItem);
return createContextMenu;
}
};
view.setShowGroupedColumn(false);
view.setForceFit(false);
view.setStripeRows(true);
view.setColumnLines(true);
view.setViewConfig(new GridViewConfig<Stock>()
{
#Override
public String getRowStyle(Stock model, int rowIndex)
{
return "";
}
#Override
public String getColStyle(Stock model, ValueProvider<? super Stock, ?> valueProvider, int rowIndex, int colIndex)
{
return "";
}
});
return view;
}
}
I think you should do something along these lines:
Calculate the width of the locked table according the columns, then set it to lockedColumnLayoutData
and force gridWrapper to layout.
#Override
public void onSelection(SelectionEvent<Item> event)
{
....
double lockedTableWidth = 0;//calculate
lockedColumnLayoutData.setWidth(lockedTableWidth);
gridWrapper.forceLayout();
}
I'm struggeling with the Java FX BarChart.. My own implementation of the chart is a class that extends the Java FX GridPane and holds a BarChart as a member variable.
If I initialize the whole thing everything works perfect, but if I change the data dynamically (add one or remove one data) the layout will be destroyed.
Speaking in pictures this means: (sorry i can't upload picture at the moment)
pic1 - initialization
after adding one element
So the 1st pictures shows the chart after initalization, the 2nd after one element has been added and after deleting one element the categories aren't shown anymore. (I Ccan't upload a picture of this)
So here's my code:
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import someCompanyThings.IMyBarChart;
import someCompanyThings.LocaleService;
import someCompanyThings.INlsKey;
/**
* A Chart with vertical or horizontal bars. It is assumed that the Bars represent positive integer numbers.
* Data may be added or removed dynamically but on the first intent it should display static.
*/
public class MyBarChart extends GridPane implements IMyBarChart {
/*
* Due to data binding problems with a generic bar chart, we hold the two possible bar charts as member variables.
* Also each of them get's a list of Series<?, ?>
*/
private BarChart<String, Number> _barChartVertical;
private BarChart<Number, String> _barChartHorizontal;
private final ObservableList<Series<String, Number>> _dataVertical = FXCollections.observableArrayList();
private final ObservableList<Series<Number, String>> _dataHorizontal = FXCollections.observableArrayList();
private long _maxValue = 0;
private boolean _numberAxisInPercent = false;
private boolean _horizontal = false;
public MyBarChart(INlsKey pTitle, INlsKey pXLabel, INlsKey pYLabel, boolean pNumberAxisInPercent, boolean pHorizontal) {
super();
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.setId("bar-chart-category-axis");
NumberAxis numberAxis = new NumberAxis(0.0, 1.0, 1.0);
numberAxis.setId("bar-chart-number-axis");
// create bar chart
// horizontal means that the x-axis is a number axis and the y-axis is a category axis
if (pHorizontal) {
categoryAxis.setLabel(LocaleService.getMessage(pYLabel));
numberAxis.setLabel(LocaleService.getMessage(pXLabel));
_barChartHorizontal = new BarChart<Number, String>(numberAxis, categoryAxis);
_barChartHorizontal.setData(_dataHorizontal);
_barChartHorizontal.setTitle(LocaleService.getMessage(pTitle));
getChildren().add(_barChartHorizontal);
}
else {
categoryAxis.setLabel(LocaleService.getMessage(pXLabel));
numberAxis.setLabel(LocaleService.getMessage(pYLabel));
_barChartVertical = new BarChart<String, Number>(categoryAxis, numberAxis);
_barChartVertical.setData(_dataVertical);
_barChartVertical.setTitle(LocaleService.getMessage(pTitle));
getChildren().add(_barChartVertical);
}
_numberAxisInPercent = pNumberAxisInPercent;
_horizontal = pHorizontal;
/*
* layout
*/
setHgrow(getChildren().get(0), Priority.ALWAYS);
setVgrow(getChildren().get(0), Priority.ALWAYS);
}
#Override
public IMyBarChart addSeries(INlsKey pSeriesName, ObservableList<Data<String, Number>> pDataSet) {
final Series<String, Number> series = new Series<String, Number>(LocaleService.getMessage(pSeriesName), pDataSet);
_dataVertical.add(series);
// iterate over the whole data segment and add it to the series
for (final Data<String, Number> data : pDataSet) {
Tooltip tooltip = new Tooltip();
tooltip.setText(data.getXValue());
Tooltip.install(data.getNode(), tooltip);
if (data.getYValue().longValue() > _maxValue) {
_maxValue = data.getYValue().longValue();
}
}
setNumberAxisScale();
return this;
}
#Override
public IMyBarChart addSeriesHorizontal(INlsKey pSeriesName, ObservableList<Data<Number, String>> pDataSet) {
final Series<Number, String> series = new Series<Number, String>(LocaleService.getMessage(pSeriesName), pDataSet);
_dataHorizontal.add(series);
// iterate over the whole data segment and add it to the series
for (final Data<Number, String> data : pDataSet) {
Tooltip tooltip = new Tooltip();
tooltip.setText(data.getYValue());
Tooltip.install(data.getNode(), tooltip);
if (data.getXValue().longValue() > _maxValue) {
_maxValue = data.getXValue().longValue();
}
}
setNumberAxisScale();
return this;
}
private void setNumberAxisScale() {
NumberAxis numberAxis = getNumberAxis();
// set the number axis as a percent axis
if (_numberAxisInPercent) {
numberAxis.setUpperBound(100);
numberAxis.setTickUnit(10);
}
else {
numberAxis.setUpperBound(_maxValue + 1);
numberAxis.setTickUnit(1);
}
}
#Override
public void setLegendVisible(boolean pVisible) {
if (_barChartHorizontal != null) {
_barChartHorizontal.setLegendVisible(pVisible);
}
else {
_barChartVertical.setLegendVisible(pVisible);
}
}
#Override
public void setCategories(ObservableList<String> pCategories) {
getCategoryAxis().getCategories().setAll(pCategories);
}
/**
*
* #return the category axis of the used bar chart
*/
private CategoryAxis getCategoryAxis() {
if (_horizontal) {
return (CategoryAxis)_barChartHorizontal.getYAxis();
}
else {
return (CategoryAxis)_barChartVertical.getXAxis();
}
}
/**
*
* #return the number axis of the used bar chart
*/
private NumberAxis getNumberAxis() {
if (_horizontal) {
return (NumberAxis)_barChartHorizontal.getXAxis();
}
else {
return (NumberAxis)_barChartVertical.getYAxis();
}
}
}
The initialization process:
final IMyBarChart tablespacesChart = MyFactory.createBarChart(NlsKeys.tablespacesTitle, NlsKeys.tablespacesXAxis,
NlsKeys.tablespacesYAxis, true, true);
// first bool -> numberAxisInPercent, second bool -> horizontal ortientation
tablespacesChart.setLegendVisible(false);
tablespacesChart.setCategories(model.getListCategories());
tablespacesChart.addSeriesHorizontal(NlsKeys.tablespacesLegendYAxis, model.getListDataUsedMax());
The data changes are realised by another class that just uses
model.getCategories().setAll(MyNewCatList); // or
model.getListDataUsedMax().setAll(MyNewList);
Well, i also tried to implement the chart with just one member variable (like BarChart _barChart) but this didn't work.
Now i have those layout issues and i dunno where they come from. So i hope you can give me a hint :-)
Here's my solution:
First, create a subclass of bar chart to access the private method updateAxisRange:
class MyBarChart<X, Y> extends BarChart<X, Y> {
public MyBarChart(Axis xAxis, Axis yAxis) {
super(xAxis, yAxis);
}
public void relayout() {
updateAxisRange();
}
}
Next, instantiate your bar chart as MyBarChart:
MyBarChart<String, Number> barChart = new MyBarChart<String, Number>(xAxis, yAxis);
And Lastly, you need to listen to resize events on the parent containing the chart, and when they occur, invoke the relayout of the chart.
For example:
BorderPane pane = new BorderPane(barChart);
pane.widthProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
barChart.relayout();
}
});
I have a JavaFX PieChart, and I want to have a color associated with specific regions. However, it seems like I can only have colors associated with the order that the Data is added to the chart. For example, if I want to plot the colors of cars in a parking lot, I could do this:
.default-color0.chart-pie { -fx-pie-color: #FF0000; }
.default-color1.chart-pie { -fx-pie-color: #00FF00; }
.default-color2.chart-pie { -fx-pie-color: #0000FF; }
.default-color3.chart-pie { -fx-pie-color: #FFFF00; }
.default-color4.chart-pie { -fx-pie-color: #00FFFF; }
As long as I add my "red car" data first, and then the "green car" data, etc, everything is fine. But If there are no red cars, and I don't add that Data, then the green cars become red, as they are the first data point. I could add a Data("Red", 0), but then that shows up in my PieChart as a slice with zero area, but it still has a label, and it could be confusing. Is there any way to avoid this? Either to mark Data objects with zero data as invisible, or assign constant colors to categories?
Okay, here's what I ended up doing (and it works):
Platform.runLater(new Runnable() {
#Override
public void run() {
for (int i = 0; i < usedColors.size(); i++) {
for (Node node : chart.lookupAll(String.format(".default-color%d.chart-pie", i))) {
node.setStyle(String.format("-fx-pie-color: #%06x;", usedColors.get(i)));
}
}
}
});
Where usedColors is a List containing the correct colors in order. This will affect the legend as well. Using runLater is necessary.
And thanks to everyone in the comments for your help.
Your solution still just has you adding the items in order of the colors. It's not hard to get a reference to the legend. There's no way to add a color to the PieChart.Data but you could make your own class.
import com.sun.javafx.charts.Legend;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class CustomPie extends Application {
public static void main(String[] args) {launch(args);}
#Override
public void start(Stage primaryStage) {
PieData pieData = new PieData();
pieData.add(new PieChart.Data("Grapefruit", 13d), Color.AQUA);
pieData.add(new PieChart.Data("Oranges", 25d), Color.ALICEBLUE);
pieData.add(new PieChart.Data("Plums", 10d), Color.AQUAMARINE);
pieData.add(new PieChart.Data("Pears", 22d), Color.BLUE);
pieData.add(new PieChart.Data("Apples", 30d), Color.BLUEVIOLET);
final MyPie pieChart = new MyPie(pieData.pieChartData);
Scene scene = new Scene(new VBox(pieChart));
primaryStage.setScene(scene);
primaryStage.show();
for (PieChart.Data data : pieData.pieChartData) {
int idx = pieData.pieChartData.indexOf(data);
Color color = pieData.pieChartColors.get(idx);
data.getNode().setStyle("-fx-pie-color: " + color.toString().replace("0x", "#") + ";");
pieChart.legend.getItems().get(idx).setSymbol(new Rectangle(8, 8, color));
}
}
}
class MyPie extends PieChart {
public Legend legend;
public MyPie(ObservableList<PieChart.Data> pieChartData) {
super(pieChartData);
legend = (Legend) getLegend();
}
}
class PieData {
ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList();
ObservableList<Color> pieChartColors = FXCollections.observableArrayList();
public void add(PieChart.Data data, Color color){
pieChartData.add(data);
pieChartColors.add(color);
}
}
I haven't checked if adding/removing data confuses it but the data structure could be improved.
I'm trying to have two axes on the same data.
The data is a couple of DefaultTableXYDatasets. The plot is a XYPlot, and I have two XYLineAndShapeRenderers and one StackedXYAreaRenderer2.
All data is in meters for the y-values, and I want to have one axis displaying it in meters and one axis displaying it in feet. Now this feels like a common thing to do, but I can't decide on the most obvious way to do it. One way that works would be to duplicate the data and have the y-values in feet, then add another NumberAxis and be done with it.
But I thought it would be wiser to subclass NumberAxis, or inject some functionality into NumberAxis to scale the values. Or should I go with the first approach?
What do you think?
To avoid duplicating data, you can use the XYPlot method mapDatasetToRangeAxes() to map a dataset index to a list of axis indices. In the example below, meters is the principle axis, and the range of the corresponding feet axis is scaled accordingly, as shown here. Note that invokeLater() is required to ensure that the feet axis is scaled after any change in the meters axis.
import java.awt.EventQueue;
import java.util.Arrays;
import java.util.List;
import javax.swing.JFrame;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.AxisLocation;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.axis.ValueAxis;
import org.jfree.chart.event.AxisChangeEvent;
import org.jfree.chart.plot.XYPlot;
import org.jfree.chart.renderer.xy.XYItemRenderer;
import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer;
import org.jfree.data.xy.XYDataset;
import org.jfree.data.xy.XYSeries;
import org.jfree.data.xy.XYSeriesCollection;
/**
* #see https://stackoverflow.com/q/13358758/230513
*/
public class AxisTest {
private static final int N = 5;
private static final double FEET_PER_METER = 3.28084;
private static XYDataset createDataset() {
XYSeriesCollection data = new XYSeriesCollection();
final XYSeries series = new XYSeries("Data");
for (int i = -N; i < N * N; i++) {
series.add(i, i);
}
data.addSeries(series);
return data;
}
private JFreeChart createChart(XYDataset dataset) {
NumberAxis meters = new NumberAxis("Meters");
NumberAxis feet = new NumberAxis("Feet");
ValueAxis domain = new NumberAxis();
XYItemRenderer renderer = new XYLineAndShapeRenderer();
XYPlot plot = new XYPlot(dataset, domain, meters, renderer);
plot.setRangeAxis(1, feet);
plot.setRangeAxisLocation(1, AxisLocation.BOTTOM_OR_LEFT);
List<Integer> axes = Arrays.asList(0, 1);
plot.mapDatasetToRangeAxes(0, axes);
scaleRange(feet, meters);
meters.addChangeListener((AxisChangeEvent event) -> {
EventQueue.invokeLater(() -> {
scaleRange(feet, meters);
});
});
JFreeChart chart = new JFreeChart("Axis Test",
JFreeChart.DEFAULT_TITLE_FONT, plot, true);
return chart;
}
private void scaleRange(NumberAxis feet, NumberAxis meters) {
feet.setRange(meters.getLowerBound() * FEET_PER_METER,
meters.getUpperBound() * FEET_PER_METER);
}
private void display() {
JFrame f = new JFrame("AxisTest");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(new ChartPanel(createChart(createDataset())));
f.pack();
f.setLocationRelativeTo(null);
f.setVisible(true);
}
public static void main(String[] args) {
EventQueue.invokeLater(() -> {
new AxisTest().display();
});
}
}
Alternatively, you can use a JCheckBox to flip between the two series, meters & feet, as shown in this related example. Using the methods available to XYLineAndShapeRenderer, you can hide a second series' lines, shapes and legend. The series itself must be visible to establish the axis range.
Eventually i settled on this solution, it might not be the most elegant but it worked. I have a second axis feetAxis, and added a AxisChangeListener on the first axis called meterAxis. When the meterAxis changes set the range on feetAxis.
I used SwingUtilities.invokeLater, otherwise the range would be incorrect when zooming out of the chart, then the feetAxis would only go from 0 to 1. Didn't check why though.
feetAxis = new NumberAxis("Height [ft]");
metersAxis = new NumberAxis("Height [m]");
pathPlot.setRangeAxis(0, metersAxis);
pathPlot.setRangeAxis(1, feetAxis);
metersAxis.addChangeListener(new AxisChangeListener() {
#Override
public void axisChanged(AxisChangeEvent event) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
feetAxis.setRange(metersAxis.getLowerBound() * MetersToFeet, metersAxis.getUpperBound() * MetersToFeet);
}
});
}
});