Remove JavaFX 2 LineChart Legend Items - charts

I have a line chart with many series. These series are grouped into one or more super-series. Each super-series may have many "breaks" in the line in order to accurately depict when a monitor process is not actively collecting data. Each data break is actually starting a new series.
I have been able to successfully overcome several technical issues with this such as the chart assigning a new color to each new series, chart line symbol color not matching the series color, etc. All is working quite well right now, except that each time I add a new series to the chart, it adds an item to the legend.
Is there a way to remove items from the legend, or do I have to hide the default legend and add my own custom legend pane?

Don't show the legend:
chart.setLegendVisible(false);
You can then create your own custom pane to make your own legend and render it how you wish.

After several failed attempts at implementing various suggestions, I found that the best way to allow a user to show/hide a data series in a JavaFx Chart (or sub-classes thereof) is to extend the chart class you want to use and override its updateLegend() method.
It's quite simple actually. Here's an example using a basic HBox as the legend containing check boxes as the legend items. In this example I have decided to make my LineChart with fixed axes types (CategoryAxis and NumberAxis). You might choose to leave your sub-class with generics for axes.
public class AtopLineChart<X, Y> extends LineChart<String, Number>
{
/**
* #param xAxis
* #param yAxis
*/
public AtopLineChart(final CategoryAxis xAxis, final NumberAxis yAxis)
{
super(xAxis, yAxis);
}
/* (non-Javadoc)
* #see javafx.scene.chart.LineChart#updateLegend()
*/
#Override
protected void updateLegend()
{
final HBox legend = new HBox();
legend.setVisible(true);
for (final javafx.scene.chart.XYChart.Series<String, Number> series : getData())
{
final CheckBox cb = new CheckBox(series.getName());
cb.setUserData(series);
cb.setSelected(true);
cb.addEventHandler(ActionEvent.ACTION, e ->
{
final CheckBox box = (CheckBox) e.getSource();
#SuppressWarnings("unchecked")
final Series<String, Number> s = (Series<String, Number>) box.getUserData();
s.getNode().setVisible(box.isSelected());
});
legend.getChildren().add(cb);
}
setLegend(legend);
}
}
I'll leave it as an exercise for the reader to make the legend more readable, for example, borders around each checkbox and binding the color of the series to the something showing that color in the checkbox for the series.
One other thing, you might want to check the getLegendSide() method to decide which kind of layout container to use for the legend, i.e. HBox for TOP and BOTTOM but VBOX for LEFT and RIGHT. Your choice.

You can find a node based on it's type (and optionally style name) using this method:
private static Node findNode(final Parent aParent, final String aClassname, final String aStyleName) {
if (null != aParent) {
final ObservableList<Node> children = aParent.getChildrenUnmodifiable();
if (null != children) {
for (final Node child : children) {
String className = child.getClass().getName();
if (className.contains("$")) {
className = className.substring(0, className.indexOf("$"));
}
if (0 == aClassname.compareToIgnoreCase(className)) {
if ((null == aStyleName) || (0 == aStyleName.length())) {
// No aStyleName, just return this:
return child;
}
else {
final String styleName = child.getStyleClass().toString();
if (0 == aStyleName.compareToIgnoreCase(styleName)) {
return child;
}
}
}
if (child instanceof Parent) {
final Node node = findNode((Parent) child, aClassname, aStyleName);
if (null != node) {
return node;
}
}
}
}
}
return null;
}
Calling it with the chart in question to retrieve the Legend node:
Legend legend = (Legend) findNode(chart, Legend.class.getName(), "chart-legend");
Which you can then iterate through the children and remove the ones you don't want to be displayed:
for (final Node legendItem : legend.getChildren()) {
final Label legendLabel = (Label) legendItem;
if (0 == legendLabel.getText().compareToIgnoreCase("the name of the legend I want hidden (or replaced with some other test)")) {
legend.getChildren().remove(legendItem);
break;
}
}
JavaFX also has a lookup function which "Finds this Node, or the first sub-node, based on the given CSS selector." and acts similar to the findNode function from this answer.

From a similar case, https://stackoverflow.com/a/27819227/2341336
This solution takes advantage of streams in Java and directly modifies the Legend object.
However, this is deprecated so it is not recommended.
Since you are already dealing with Legend, you can work with its
items, removing those you don't need, so the legend shows only two
items.
Using streams, you can mark the first two items as "Valid"/"Invalid"
and the rest as "Remove", for instance, and finally you just remove
these last items.
private void updateStyleSheet() {
Legend legend = (Legend)lineChart.lookup(".chart-legend");
AtomicInteger count = new AtomicInteger();
legend.getItems().forEach(item->{
if(count.get()==0){
item.setText("Valid");
} else if(count.get()==1){
item.setText("Invalid");
} else {
item.setText("Remove");
}
count.getAndIncrement();
});
legend.getItems().removeIf(item->item.getText().equals("Remove"));
...
}

Related

Is there way to auto resize percentage columns when column group is collapsed/expaned in NatTable

I found ResizeColumnHideShowLayer class at nattable version 1.6.
(about https://bugs.eclipse.org/bugs/show_bug.cgi?id=521486)
That is work fine for normal column headers only.
But, if I collapse a column group, no adjust size to fit window. (no increasing column size)
How can I solve the problem?
Is there way to resize other columns to fit window automatically increase?
Thank you.
Currently not because the ColumnGroupExpandCollapseLayer is taking care of hiding collapsed columns.
I found solution by myself!
It works fine very well. :-)
I was run based on NatTable v1.6 version.(downloaded yesterday)
I think this is a basic feature, so I hope this feature will be included in the next NatTable version.
In narrow tables, behavior that collapsing column group means that may be someone want to view other column data more widely.
Overview (Problem screen and solved screen)
I explain using two application(before, after) screen shot.
Refer to bottom image if you want understand my issue easily at once.
Problem screen
enter image description here
Improved screen
enter image description here
Solution summary :
Add event listener to ColumnGroupExpandCollapseLayer.
      (HideColumnPositionsEvent, ShowColumnPositionsEvent)
Handle above events.
      Get column indices which is hidden by collapsed
      Execute MultiColumnHideCommand with the indices
Layer structure of my test code
↑ ViewportLayer (top layer)
| SelectionLayer
| ColumnGroupExpandCollapseLayer
| ResizeColumnHideShowLayer
| ColumnGroupReorderLayer
| ColumnReorderLayer
| DataLayer (base layer)
Implementation code is below:
void method() {
...
columnGroupExpandCollapseLayer.addLayerListener(new ILayerListener() {
#Override
public void handleLayerEvent(ILayerEvent event) {
boolean doRedraw = false;
//It works for HideColumnPositionsEvent and ShowColumnPositionsEvent
// triggered by ColumnGroupExpandCollapseCommandHandler
if (event instanceof HideColumnPositionsEvent) {
HideColumnPositionsEvent hideEvent = (HideColumnPositionsEvent)event;
Collection<Range> columnPositionRanges = hideEvent.getColumnPositionRanges();
Collection<Integer> convertIntegerCollection = convertIntegerCollection(columnPositionRanges);
int[] positions = convertIntPrimitiveArray(convertIntegerCollection);
//Execute command to hide columns that was hidden by collapsed column group.
MultiColumnHideCommand multiColumnHideCommand = new MultiColumnHideCommand(resizeColumnHideShowLayer, positions);
resizeColumnHideShowLayer.doCommand(multiColumnHideCommand);
doRedraw = true;
}else if (event instanceof ShowColumnPositionsEvent) {//called by ColumnGroupCollapsedCollapseCommandHandler
ShowColumnPositionsEvent showEvent = (ShowColumnPositionsEvent)event;
Collection<Range> columnPositionRanges = showEvent.getColumnPositionRanges();
Collection<Integer> positions = convertIntegerCollection(columnPositionRanges);
//Execute command to show columns that was hidden by expanded column group.
MultiColumnShowCommand multiColumnShowCommand = new MultiColumnShowCommand(positions);
resizeColumnHideShowLayer.doCommand(multiColumnShowCommand);
//Set whether or not to redraw table
doRedraw = true;
}
if (doRedraw) {
natTable.redraw();
}
}
/**
* Merge position values within several Ranges to Integer collection
*/
private Collection<Integer> convertIntegerCollection(Collection<Range> rangeCollection) {
Iterator<Range> rangeIterator = rangeCollection.iterator();
Set<Integer> mergedPositionSet = new HashSet<Integer>();
while (rangeIterator.hasNext()) {
Range range = rangeIterator.next();
mergedPositionSet.addAll(range.getMembers());
}
return mergedPositionSet;
}
/**
* Convert Integer wrapper object to primitive value
*/
private int [] convertIntPrimitiveArray(Collection<Integer> integerCollection) {
Integer [] integers = (Integer [])integerCollection.toArray(new Integer[integerCollection.size()]);
int [] positionPrimitives = new int[integers.length];
for (int i = 0 ; i < integers.length ; i++) {
positionPrimitives[i] = integers[i].intValue();
}
return positionPrimitives;
}
});
}

Dynamically add widgets in a cell to represent "tags" in Datagrid

In a GWT web app, I am using a DataGrid to manage elements from a database. I represent a list of elements as rows, the columns being editable fields of their characteristics (id, name, description). I am mostly using the EditTextCell class.
I now want to create a custom cell, for a column that has to represent a list of "tags" that can be attached to every element. From this cell, tags could be added, using a + button (that makes a drop-down menu appear or something), and deleted. Each tag should be a kind of button, or interactive widget (I later want to display pop-up with info, trigger actions, etc).
Actually, it would not be so different from the "tags" bar on the Stack Overflow website...
So I have been looking for a solution:
I thought this would be easy to do. I imagined just putting a FlowPanel in the cell, adding/removing Buttons/Widgets dynamically. But it turns out that in GWT Widgets and Cells and very different objects apparently..
I read making use of the AbstractCell class to create a custom cell allows to do anything, but its working is very low level and obscure to me.
I saw that CompositeCell allows to combine various cell widgets into one cell, but I have not found if it is possible to do it dynamically, or if the widgets are going to be the same for all lines throughout a column. I mostly saw examples about, for instance, how to put two Buttons in every cell of a single column.
What is the easiest way to implement what I need?
EDIT:
So, after some tests, I am going for Andrei's suggestion and going "low-level", creating a custom cell extending AbstractCell<>. I could create an appropriate "render" function, that generates a list of html "button", and also attaches Javascript calls to my Java functions when triggering a Javascript event (onclick, onmouseover, onmouseout...).
It is working pretty well. For instance, by clicking the "+" button at the end a tag list, it calls a MenuBar widget that presents the list of tags that can be added.
But I am struggling to find a way to update the underlying data when adding a tag.
To sum up:
I have a CustomData class that represents the data I want to display in each line of the table. It also contains the list of tags as a Set.
ModelTable (extends DataGrid) is my table.
CustomCell (extends AbstractCell) can renders the list of tags as several buttons on a line.
A click on a "+" button in a cell makes a AddTagMenu popup drop down, from which I can click on the tag to add.
How do I update the content of the cell?
I tried playing around with onBrowserEvent, onEnterKeyDown, bus events... with no success. At best I can indeed add a tag element to the underlying object, but the table is not updated.
It's not possible to meet your requirements without going really "low-level", as you call it.
It's relatively easy to create a cell that would render tags exactly as you want them. Plus icon is also easy, if this is the only action on the cell. However, it is very difficult to make every tag within a cell an interactive widget, because the DataGrid will not let you attach handlers to HTML rendered within a cell. You will need to supply your own IDs to these widgets, and then attach handlers to them in your code. The problem, however, is that when the DataGrid refreshes/re-renders, your handlers will most likely be lost. So you will have to attach them again to every tag in every cell on every change in the DataGrid.
A much simpler approach is to create a composite widget that represents a "row", and then add these "rows" to a FlowPanel. You can easily make it look like a table with CSS, and supply your own widget that looks like a table header. You will need to recreate some of the functionality of the DataGrid, e.g. sorting when clicked on "column" header - if you need this functionality, of course.
As you have already noted, using CompositeCell could be a way to get what you want.
The idea is to create a cell for every tag and then (during rendering) decide which one should be shown (rendered). Finally combine all those cells into one by creating a CompositeCell.
The main disadvantage of this solution is that you need to know all possible tags before you create a DataGrid.
So, if you have a fixed list of possible tags or can get a list of all existing tags and this list is reasonably small, here is a solution.
First, we need to know which tag is represented by a column so I extended a Column class to keep information about a tag. Please, note that TagColumn uses ButtonCell and also handles update when the button is clicked:
public class TagColumn extends Column<DataType, String> {
private TagEnum tag;
public TagColumn(TagEnum tag) {
super(new ButtonCell());
this.tag = tag;
setFieldUpdater(new FieldUpdater<DataType, String>() {
#Override
public void update(int index, DataType object, String value) {
Window.alert("Tag " + getTag().getName() + " clicked");
}
});
}
public TagEnum getTag() {
return tag;
}
#Override
public String getValue(DataType object) {
return tag.getName();
}
}
Then create a cell for each tag (I have hard-coded all tags in a TagEnum):
List<HasCell<DataType, ?>> tagColumns = new ArrayList<HasCell<DataType, ?>>();
for(TagEnum tag : TagEnum.values())
tagColumns.add(new TagColumn(tag));
Now, the most important part: decide either to show the tag or not - overwrite render method of the CompositeCell:
CompositeCell<DataType> tagsCell = new CompositeCell<DataType>(tagColumns) {
#Override
protected <X> void render(Context context, DataType value, SafeHtmlBuilder sb, HasCell<DataType, X> hasCell) {
if(value.getTagList().contains(((TagColumn) hasCell).getTag()))
super.render(context, value, sb, hasCell);
else
sb.appendHtmlConstant("<span></span>");
}
};
This is important to always render any element (for example empty span when the tag should not be shown). Otherwise the CompositeCell's implemantation will get confused when accessing sibling elements.
Finally, full, working example code:
private DataGrid<DataType> getGrid() {
DataGrid<DataType> grid = new DataGrid<DataType>();
List<HasCell<DataType, ?>> tagColumns = new ArrayList<HasCell<DataType, ?>>();
for(TagEnum tag : TagEnum.values())
tagColumns.add(new TagColumn(tag));
CompositeCell<DataType> tagsCell = new CompositeCell<DataType>(tagColumns) {
#Override
protected <X> void render(Context context, DataType value, SafeHtmlBuilder sb, HasCell<DataType, X> hasCell) {
if(value.getTagList().contains(((TagColumn) hasCell).getTag()))
super.render(context, value, sb, hasCell);
else
sb.appendHtmlConstant("<span></span>");
}
};
Column<DataType, DataType> tagsColumn = new Column<DataType, DataType>(tagsCell) {
#Override
public DataType getValue(DataType object) {
return object;
}
};
grid.addColumn(tagsColumn, "Tags");
grid.setRowData(Arrays.asList(
new DataType(Arrays.asList(TagEnum.gwt)),
new DataType(Arrays.asList(TagEnum.table, TagEnum.datagrid)),
new DataType(Arrays.asList(TagEnum.datagrid, TagEnum.widget, TagEnum.customCell)),
new DataType(Arrays.asList(TagEnum.gwt, TagEnum.table, TagEnum.widget, TagEnum.customCell)),
new DataType(Arrays.asList(TagEnum.gwt, TagEnum.customCell)),
new DataType(Arrays.asList(TagEnum.gwt, TagEnum.table, TagEnum.datagrid, TagEnum.widget, TagEnum.customCell))
)
);
return grid;
}
public class TagColumn extends Column<DataType, String> {
private TagEnum tag;
public TagColumn(TagEnum tag) {
super(new ButtonCell());
this.tag = tag;
setFieldUpdater(new FieldUpdater<DataType, String>() {
#Override
public void update(int index, DataType object, String value) {
Window.alert("Tag " + getTag().getName() + " clicked");
}
});
}
public TagEnum getTag() {
return tag;
}
#Override
public String getValue(DataType object) {
return tag.getName();
}
}
public class DataType {
List<TagEnum> tagList;
public DataType(List<TagEnum> tagList) {
this.tagList = tagList;
}
public List<TagEnum> getTagList() {
return tagList;
}
}
public enum TagEnum {
gwt ("gwt"),
table ("table"),
datagrid ("datagrid"),
widget ("widget"),
customCell ("custom-cell");
private String name;
private TagEnum(String name) {
this.name = name;
}
public String getName() {
return name;
}
}

Add new labels on button listener GWT

I'm trying to add new labels to a panel and this is when a button is clicked, in fact the number of labels is unknowing because my application consists in extracting some informations from a file and then display each information in a label so i have to upload the file and then extract the informations, i created an uploadfile and i'm able to extract the informations but i face a problem to display each information in its label, i can't create many labels and then with label.settext() make each information in its label beacuase the number of labels/informations is variable.
So can you advice/help me so i can make this working.
Best regards.
If you get the result from an Array for example you can do like this:
String[] data; //You can add you data here
addButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
for (String s : data) {
RootPanel.get().add(new Label(s));
}
}
});
That way you can add as much Labels as you want
You can create a variable number of Labels with a LinkedList.
int count = x ; //Quantity of labels you need;
LinkedList<Label> labelList = new LinkedList<Label>();
for (int i = 0; i < count ;i++)
{
Label tmpLabel = new Label();
tmpLabel.setText(STUFF) //Here you have to set your content
labelList.add(tmpLabel);
}
// Now we add the Labels to the Panel
for (int ind = 0; ind < labelList.size() ;ind++)
{
panel.add(labelList.get(ind)); //panel is the panel you show
}
If you don't have to access the labels later, you don't need the LinkedList and could add them direct to your panel.
You didnt say how you exactly attach the Labels, but if you use a Grid you have to set the size of it depending on your information.

ExtGWT Resizing TabPanel (TabItem) with ChartsVizualization an ChartsTable

The problem is on the drawing by click or resizing browser. I have TabPanel placed with RowData, two TabItems with Chart (Google Vizualization) on one and Table with the same Data on the next. I create them on the page loading.
Then I click on Load Data (button) from DB, I redraw this two:
public void reDraw(final List<Double> slices, final String[] devices)
{
pcPie.draw(createTable(slices,devices),createOptions("По автомобилям"));
tPie.draw(createTable(slices, devices),CreateTableOptions());
}
That's work only for active TabItem and replace the drawing space from behind with this size (400px;200px) in generated HTML and I find that Data isn't changed at the behind section.
Also, when I resized the browser, Charts and Tables aren't resizing. I've tryed to use some of Layout, they don't work. May be I don't understand exactly how can use them correctly.
So,
How can I resize my Charts and Tables correct in the both of the
section (active and behind)?
How can I resize my Charts and Tables
on the browser resizing events?
Our first problem came from this: when you use the TabPanel component with some TabItems, behind TabItems aren't being created exactly, and you can not redraw them, cause object isn't created. So we change our code in activated section:
public void run() {
tpLineCharts.setBorders(true);
TabItem tiGraph = new TabItem("График");
tableData = createTable();
lcLines = new LineChart(tableData,
createOptions("По компании"));
lcLines.addSelectHandler(createSelectHandler(lcLines));
tiGraph.setLayout(new FitLayout());
tiGraph.add(lcLines);
tpLineCharts.add(tiGraph);
TabItem tiTable = new TabItem("Таблица");
tLine = new Table(tableData, CreateTableOptions());
tiTable.add(tLine);
tiTable.addListener(Events.Select, new Listener<BaseEvent>()
{
#Override
public void handleEvent(BaseEvent be) {
tLine.draw(tableData);
}
});
tpLineCharts.add(tiTable);
}}, CoreChart.PACKAGE, Table.PACKAGE);
where tableData - AbstractTableData. After this modification we can redraw our components:
public void reDrawLineChart(final ArrayList <Double> sumCompanyTraffic,
final ArrayList<Integer> axisName, String title)
{
tableData =createTable(sumCompanyTraffic, axisName);
tLine.draw(tableData, CreateTableOptions());
lcLines.draw(tableData, createOptions(title));
}
Also you need to add this options:
private Options createOptions(String title)
{
Options options = Options.create();
options.setTitleX("Период");
options.setTitle(title);
if(tpLineCharts.isRendered())
options.setSize(tpLineCharts.getWidth(true),
tpLineCharts.getHeight(true));
return options;
}

GWT CellBrowser- how to always show all values?

GWT's CellBrowser is a great way of presenting dynamic data.
However when the browser contains more rows than some (seemingly) arbitrary maximum, it offers a "Show More" label that the user can click to fetch the unseen rows.
How can I disable this behavior, and force it to always show every row?
There are several ways of getting rid of the "Show More" (which you can combine):
In your TreeViewModel, in your NodeInfo's setDisplay or in the DataProvider your give to the DefaultNodeInfo, in onRangeChange: overwrite the display's visible range to the size of your data.
Extend CellBrowser and override its createPager method to return null. It won't change the list's page size though, but you can set it to some very high value there too.
The below CellBrowser removes the "Show More" text plus loads all available elements without paging.
public class ShowAllElementsCellBrowser extends CellBrowser {
public ShowAllElementsCellBrowser(TreeViewModel viewModel, CellBrowser.Resources resources) {
super(viewModel, null, resources);
}
#Override
protected <C> Widget createPager(HasData<C> display) {
PageSizePager pager = new PageSizePager(Integer.MAX_VALUE);
// removes the text "Show More" during loading
display.setRowCount(0);
// increase the visible range so that no one ever needs to page
display.setVisibleRange(0, Integer.MAX_VALUE);
pager.setDisplay(display);
return pager;
}
}
I found a valid and simple solution in setting page size to the CellBrowser's builder.
Hope this will help.
CellBrowser.Builder<AClass> cellBuilder = new CellBrowser.Builder<AClass>(myModel, null);
cellBuilder.pageSize(Integer.MAX_VALUE);
cellBrowser = cellBuilder.build();
The easiest way to do this is by using the:
cellTree.setDefaultNodeSize(Integer.MAX_VALUE);
method on your Cell Tree. You must do this before you begin expanding the tree.
My workaround is to navigate through elements of treeview dom to get "show more" element with
public static List<Element> findElements(Element element) {
ArrayList<Element> result = new ArrayList<Element>();
findShowMore(result, element); return result; }
private static void findShowMore(ArrayList res, Element element) {
String c;
if (element == null) { return; }
if (element.getInnerText().equals("Show more")) { res.add(element);
}
for (int i = 0; i < DOM.getChildCount(element); i++) { Element
child = DOM.getChild(element, i); findShowMore(res, child); } }
and than use:
if (show) { element.getStyle().clearDisplay(); } else {
element.getStyle().setDisplay(Display.NONE); }