Highlight plotted data

[susieferrari]

I would like to export (.txt or .cvs) data plotted on a graph by left mouse click, highlight it then right mouse click open a file chooser dialog to save data

Here is a picture example



And here is a sample code

public class BaseXYChart extends Application {

    @Override
    public void start(Stage stage) {
       stage.setTitle("Linear plot");
        
       final CategoryAxis xAxis = new CategoryAxis();
       final NumberAxis yAxis = new NumberAxis(1, 22, 0.5);
        
       yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis){
            @Override
        public String toString(Number object){
            return String.format("%7.2f", object);
        }
    });
final LineChart<String, Number>lineChart = new LineChart<String, Number>(xAxis, yAxis);

       lineChart.setCreateSymbols(false);
       lineChart.setAlternativeRowFillVisible(false);
       lineChart.setLegendVisible(false);
               
       XYChart.Series series1 = new XYChart.Series();
        
        series1.getData().add(new XYChart.Data("Jan", 1));
        series1.getData().add(new XYChart.Data("Feb", 1.5));
        series1.getData().add(new XYChart.Data("Mar", 2));
        series1.getData().add(new XYChart.Data("Apr", 2.5));
        series1.getData().add(new XYChart.Data("May", 3));
        series1.getData().add(new XYChart.Data("Jun", 4));
        series1.getData().add(new XYChart.Data("Jul", 6));
        series1.getData().add(new XYChart.Data("Aug", 9));
        series1.getData().add(new XYChart.Data("Sep", 12));
        series1.getData().add(new XYChart.Data("Oct", 15));
        series1.getData().add(new XYChart.Data("Nov", 20));
        series1.getData().add(new XYChart.Data("Dec", 22));
 
        BorderPane pane = new BorderPane();
        pane.setCenter(lineChart);          
        Scene scene = new Scene(pane, 800, 600);
        lineChart.getData().addAll(series1);
         
        stage.setScene(scene);
        stage.show();
    }

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

How to accomplish this?

Thanks

Susie

[susieferrari]

This question is over because I have found help to solve.

susie

[Eranga]

If you think that the solution may helpful to someone else and interesting, please post it here. :)

[susieferrari]

Hi Eranga,

here is a good solution to my question: would love to have help for the other my questions left, I still have problem also with Y Log scale, I can't solve.

Susie

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Cursor;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.control.ContextMenu;
import javafx.scene.control.MenuItem;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;


public class HighlightBaseXYChart extends Application {

    private DropShadow ds = new DropShadow();

    private ContextMenu contextMenu;

    private XYChart.Series selectedSeries;
      
    @Override
    public void start(Stage stage) {
        stage.setTitle("Linear plot");
        
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis(0, 22, 0.5);

        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {

            @Override
            public String toString(Number object) {
                return String.format("%7.2f", object);
            }
        });
        final LineChart<String, Number> lineChart = new LineChart<String, Number>(xAxis, yAxis);

        lineChart.setCreateSymbols(false);
        lineChart.setAlternativeRowFillVisible(false);
        lineChart.setLegendVisible(false);

        final XYChart.Series series1 = new XYChart.Series();

        series1.getData().add(new XYChart.Data("Jan", 1));
        series1.getData().add(new XYChart.Data("Feb", 1.5));
        series1.getData().add(new XYChart.Data("Mar", 2));
        series1.getData().add(new XYChart.Data("Apr", 2.5));
        series1.getData().add(new XYChart.Data("May", 3));
        series1.getData().add(new XYChart.Data("Jun", 4));
        series1.getData().add(new XYChart.Data("Jul", 6));
        series1.getData().add(new XYChart.Data("Aug", 9));
        series1.getData().add(new XYChart.Data("Sep", 12));
        series1.getData().add(new XYChart.Data("Oct", 15));
        series1.getData().add(new XYChart.Data("Nov", 20));
        series1.getData().add(new XYChart.Data("Dec", 22));

        BorderPane pane = new BorderPane();
        pane.setCenter(lineChart);
        Scene scene = new Scene(pane, 800, 600);
        lineChart.getData().addAll(series1);

        contextMenu = new ContextMenu();
        MenuItem menuItem = new MenuItem("Save data");
        contextMenu.getItems().add(menuItem);
        menuItem.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                if (selectedSeries != null) {
                    System.out.println("Save data of " + selectedSeries.getData());
                    // Saving logic here
                }
            }
        });

        // for every series in linechart
        applyMouseEvents(series1);

        stage.setScene(scene);
        stage.show();
    }

    private void applyMouseEvents(final XYChart.Series series) {

        final Node node = series.getNode();
        // We need set userdata to obtain it later through the node.
        node.setUserData(series);

        node.setOnMouseEntered(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent arg0) {
                node.setEffect(ds);
                node.setCursor(Cursor.HAND);
            }
        });

        node.setOnMouseExited(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent arg0) {
                node.setEffect(null);
                node.setCursor(Cursor.DEFAULT);
            }
        });

        node.setOnMouseReleased(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent mouseEvent) {
                if (mouseEvent.getButton().equals(MouseButton.SECONDARY)) {
                    contextMenu.show(node, mouseEvent.getScreenX() + 1, mouseEvent.getScreenY() + 1);
                    // Set as selected
                    selectedSeries = (XYChart.Series) node.getUserData();
                    System.out.println("Selected Series data " + selectedSeries.getData());
                }
            }
        });
    }
    public static void main(String[] args) {
        launch(args);
    }
}

If you think that the solution may helpful to someone else and interesting, please post it here. :)

[Eranga]

If you could specifically explain questions left with you I can help you to sort out them. And other members in the community too. :)

[susieferrari]

Thanks Eranga,

my questions left are the following:

1) I am not able to set YAxis as logarithmic: I have found the only example on the net and Darryl Burke kindly recode the JavaScript in FX but after all this time I still am not able to implement correctly

Topic is here:

Log scale for Y axis in XYChart

2) Compress / Expand data visualisation : thread is here

Compress/Expand data visualization

Haven't had any reply for this

Thank you very much

If you could specifically explain questions left with you I can help you to sort out them. And other members in the community too. :)

[susieferrari]

Any help still really very much appreciated!

Susie

[cselic]

Let me try :-)

1) I am not able to set YAxis as logarithmic: I have found the only example on the net and Darryl Burke kindly recode the JavaScript in FX but after all this time I still am not able to implement correctly

Topic is here:

http://www.java-forums.org/javafx/60...s-xychart.html

final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis(1, 22, 0.5);

Maybe you should change your code for yAxis with something like this:

final NumberAxis yAxis = new NumberAxis(Math.log10(1), Math.log10(22), Math.log10(0.5));

[susieferrari]

Hi cselic,

thanks for your reply but your suggestion doesn't work, I've aleady tried this solution before.

I think the task is in replacing the standard object chart with a log version, not just set lower and upper bound Y scale as log.

Susie

[cselic]

^I think that I've found solution:

Change you existing code:

        series1.getData().add(new XYChart.Data("Jan", 1));
        series1.getData().add(new XYChart.Data("Feb", 1.5));
        series1.getData().add(new XYChart.Data("Mar", 2));
        series1.getData().add(new XYChart.Data("Apr", 2.5));
        series1.getData().add(new XYChart.Data("May", 3));
        series1.getData().add(new XYChart.Data("Jun", 4));
        series1.getData().add(new XYChart.Data("Jul", 6));
        series1.getData().add(new XYChart.Data("Aug", 9));
        series1.getData().add(new XYChart.Data("Sep", 12));
        series1.getData().add(new XYChart.Data("Oct", 15));
        series1.getData().add(new XYChart.Data("Nov", 20));
        series1.getData().add(new XYChart.Data("Dec", 22));

with:

	series1.getData().add(new XYChart.Data("Jan", Math.log(1)));
	series1.getData().add(new XYChart.Data("Feb", Math.log(1.5)));
        series1.getData().add(new XYChart.Data("Mar", Math.log(2)));
        series1.getData().add(new XYChart.Data("Apr", Math.log(2.5)));
        series1.getData().add(new XYChart.Data("May", Math.log(3)));
        series1.getData().add(new XYChart.Data("Jun", Math.log(4)));
        series1.getData().add(new XYChart.Data("Jul", Math.log(6)));
        series1.getData().add(new XYChart.Data("Aug", Math.log(9)));
        series1.getData().add(new XYChart.Data("Sep", Math.log(12)));
        series1.getData().add(new XYChart.Data("Oct", Math.log(15)));
        series1.getData().add(new XYChart.Data("Nov", Math.log(20)));
        series1.getData().add(new XYChart.Data("Dec", Math.log(22)));

[susieferrari]

Yes this is an alternative way to have data as log, but it is not the best one: I have to load and display thousands of data and the right solution would be in having a Value Axis as log.

What it seems an easy task reveals to be one of the hardest issues in FX 2.x : it doesn't esist any native Java FX method to have log axis, and even searching through the web there are only one solution, written in JavaScript that I am not able to use, and it is here

JavaFX chart API and logarithmic scale - dooApp technical blog

It seems one developer has just been able to solve this problem, I have found his tweet here

@jasperpotts Been playing with JavaFX charts. Nice! Are logarithmic scale axes possible - see x-axis on this image?

where he set X Axis as log.

Susie

[cselic]

Yes this is an alternative way to have data as log, but it is not the best one: I have to load and display thousands of data and the right solution would be in having a Value Axis as log.

Then the best way for doing that is in some loop where you are going to change Data values in every step. For example change this line of code so that it can be used in loop for changing values of Data.

series1.getData().add(new XYChart.Data("Jan", Math.log(1)));

.

You can also put your String and Double values into Collection, maybe HashMap or something else.


There are other ways, but they not good as previous one. For example:

MyLogClass number = new MyLogClass(5);
XYChart.Series<String, MyLogClass> series2 = new XYChart.Series<>();
XYChart.Data<String, MyLogClass> chart = new XYChart.Data<>();
series2.getData().add(new XYChart.Data<>("Jan", number));

and you should write private class inside your public class BaseXYChart. It could be something like this:

	private class MyLogClass {
		
		public MyLogClass(int number) {
			Math.log(number);
		}
	}

[susieferrari]

Thank you very much cselic,

I will try to follow your suggestions: I have just had some chat on Skype with Jonathan Giles and he gave me this link

Login Required - JavaFX

Regards,

Susie

[cselic]

^Can you please copy+paste content from that link, because login is required for that link.

[susieferrari]

The page should open without a login, but here are two picture from this link

^Can you please copy+paste content from that link, because login is required for that link.

[susieferrari]

http://javafx-jira.kenai.com/browse/RT-20609

[susieferrari]

Well what I want to plot is not a log(number); I want to plot that number but charted in log scale, and this is the reason:

when dealing with financial time serie, linear scale is not the right choice because it is far more important to graphically visualize data as percentage move.

Just an example: let's suppose we have a time serie at point x=1,y=10 and point x=2,y=20. At point x=n,y=100 and point x=n+1,y=110.

If we plot these data as linear Y axis, the rate of change from point x=n+1 to point x=n is = 10, just as from point x=2 to point x=1, BUT the percentage move from point x=1 to point x=2 is 100% increase while from point x=n to point x=n+1 is only 10%.

The 100% increase get the same height as 10% increase, and this is incorrect for financial data plot and analysis.

If we plot as log, we would see a great Y increase from point 1 to point 2 (100%), and we will have the appropriate 10% Y increase later.

Susie

[cselic]

Well what I want to plot is not a log(number); I want to plot that number but charted in log scale ...

Then you should change this line of your code:

final NumberAxis yAxis = new NumberAxis(1, 22, 0.5);

you should change it to something like this:

final NumberAxis yAxis = new NumberAxis(Math.log10(1), Math.log10(100), Math.log10(1.12202);

or maybe to something like this (same values like calculated with logs but without logs):

final NumberAxis yAxis = new NumberAxis(0, 2, 0.05);

[susieferrari]

Well let me do another example to better clarify the Y log axis:

I have changed a little my code in this way:

final NumberAxis yAxis = new NumberAxis(0.5, 20.5, 0.5);

and

series1.getData().add(new XYChart.Data("Jan", 1));
        series1.getData().add(new XYChart.Data("Feb", 2));
        series1.getData().add(new XYChart.Data("Mar", 1.5));
        series1.getData().add(new XYChart.Data("Apr", 3));
        series1.getData().add(new XYChart.Data("May", 2.5));
        series1.getData().add(new XYChart.Data("Jun", 5));
        series1.getData().add(new XYChart.Data("Jul", 4));
        series1.getData().add(new XYChart.Data("Aug", 8));
        series1.getData().add(new XYChart.Data("Sep", 6.5));
        series1.getData().add(new XYChart.Data("Oct", 13));
        series1.getData().add(new XYChart.Data("Nov", 10));
        series1.getData().add(new XYChart.Data("Dec", 20));

The series is now modified to show each up swing is 100% up move, I have highlited in green lines below each swing



We can immediately note that these up swing are not the same Y height: move from 1 to 2 takes only 1 point on Y scale, while the swing from 10 to 20 takes 10 point on Y scale.

This is not correct for financial data series analysis: all of these up swings MUST have the same Y values on Y scale, because all of these are 100% moves.

So, if I set my upper Y bound as Math.log10(20) I will not have the upper value plotted because that values is = 2!

I need to display 20 as upper bound ( to be accurate, here I have set 20,5 as upper value bound) but the Y scale must be setted differently from this linear Y.

In other words, the distance for each ticks in Y scale should not be linear as now, but dislayed differently, in logarithmic display, so that the charting Y distance from 1 to 2 is the same charting y distance from 10 to 20.

Thanks for your patience.

Susie

[cselic]

^Lets try this:

Write this code (from my previous post):

final NumberAxis yAxis = new NumberAxis(Math.log10(1), Math.log10(100), Math.log10(1.12202);

or maybe to something like this (same values like calculated with logs but without logs):

final NumberAxis yAxis = new NumberAxis(0, 2, 0.05);

So, next idea is that we are going to work with log10, but we are going to show results on a graph from 0 to 20. So we should change this part of code:

yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {

            @Override
            public String toString(Number object) {
                return String.format("%7.2f", object);
            }
        });

with something like this:

yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {

            @Override
            public String toString(Number object) {
                return String.format("%7.2f", Math.pow(10.0, object.doubleValue()));
            }
        });