loachman - 2014-08-23

I am trying to get the position of the mouse cursor when the user mouses over the chart points. It always returns 0 for me?

I am posting the whole code below in case something somewhere else is messing it up.

public Chart createChart() {  

        final Chart chart = new Chart()  
            .setType(Series.Type.COLUMN)
            .setWidth(900)
            .setMargin(50, 50, 100, 80)  
            .setChartTitleText("World's largest cities per 2008")
            .setLegend(new Legend()  
            .setEnabled(false)
            )
            .setToolTip(new ToolTip()  
                .setFormatter(new ToolTipFormatter() {  
                    public String format(ToolTipData toolTipData) {  
                        return null;
                    }  
                })
                );

        chart.setSeriesPlotOptions(new SeriesPlotOptions()
             .setPointMouseOutEventHandler(new PointMouseOutEventHandler(){

                @Override
                public boolean onMouseOut(PointMouseOutEvent event) {
                    consoleLog( Integer.toString(event.getClientX()));
                    consoleLog(Integer.toString(event.getClientY()));

                    toolTipImage.getElement().getStyle().setOpacity(0);
                    return true;
                }
                 })
             .setPointMouseOverEventHandler(new PointMouseOverEventHandler(){

                @Override
                public boolean onMouseOver(PointMouseOverEvent event) {
                    consoleLog(Integer.toString(event.getClientX()));
                    consoleLog(Integer.toString(event.getClientY()));
                    drawImage(event.getPoint().getX().intValue());

                    return true;
                }

             })
              );
        chart.getXAxis()  
            .setCategories(  
                "Tokyo",  
                "Jakarta",  
                "New York",  
                "Seoul",  
                "Manila",  
                "Mumbai",  
                "Sao Paulo",  
                "Mexico City",  
                "Dehli",  
                "Osaka",  
                "Cairo",  
                "Kolkata",  
                "Los Angeles",  
                "Shanghai",  
                "Moscow",  
                "Beijing",  
                "Buenos Aires",  
                "Guangzhou",  
                "Shenzhen",  
                "Istanbul"  
            )  
            .setLabels(new XAxisLabels()  
                .setRotation(-45)  
                .setAlign(Labels.Align.RIGHT)  
                .setStyle(new Style()  
                    .setFont("normal 13px Verdana, sans-serif")  
                )
            );  

        chart.getYAxis()  
            .setAxisTitleText("Population (millions")  
            .setMin(0);  

        chart.addSeries(chart.createSeries()  
            .setName("Population")  
            .setPoints(new Number[]{  
                34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,  
                17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,  
                11.7, 11.2  
            })
            .setPlotOptions(new ColumnPlotOptions()
                .setPointWidth(40)

                .setDataLabels(new DataLabels()  
                    .setEnabled(true)  
                    .setRotation(-90)  
                    .setColor("#FFFFFF")  
                    .setAlign(Labels.Align.RIGHT)  
                    .setX(-3)  
                    .setY(10)  
                    .setFormatter(new DataLabelsFormatter() {  
                        public String format(DataLabelsData dataLabelsData) {  
                            return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble());  
                        }  
                    })  
                    .setStyle(new Style()  
                        .setFont("normal 13px Verdana, sans-serif")  
                    )

                )  
            )  
        );  

        return chart;  
    }