GWT Highcharts, Java, and xml UiBinder?

Question

I want to know how to use GWT Highcharts to display a graph with a xml UiBinder. I have been looking at the examples of how Highcharts looks in Java. I copied this example from the Moxie Group: GWT Highcharts page and I pasted it in a Java class that I created:

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import org.moxieapps.gwt.highcharts.client.*;
import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.LinePlotOptions;

public class LineChart implements EntryPoint {

public void onModuleLoad() {
    RootPanel.get().add(createChart());
}




    public Chart createChart () {

        final Chart chart = new Chart()
                .setType(Series.Type.LINE)
                .setChartTitle(new ChartTitle()
                                .setText("Monthly Average Temperature")
                )
                .setChartSubtitle(new ChartSubtitle()
                                .setText("Source: WorldClimate.com")
                )
                .setToolTip(new ToolTip()
                                .setEnabled(false)
                );

        chart.getXAxis()
                .setCategories(
                        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                );

        chart.getYAxis()
                .setAxisTitleText("Temperature °C");

        chart.setLinePlotOptions(new LinePlotOptions()
                        .setEnableMouseTracking(true)
                        .setDataLabels(new DataLabels()
                                        .setEnabled(true)
                        )
        );

        chart.addSeries(chart.createSeries()
                        .setName("Tokyo")
                        .setPoints(new Number[]{
                                7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
                        })
        );
        chart.addSeries(chart.createSeries()
                        .setName("London")
                        .setPoints(new Number[]{
                                3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8
                        })
        );

        return chart;
    }

}

Now, I want to see if this is working on my project. What do I need to do? Should I create a main method to display the graph? and how do I reference this gram from a xml UiBinder?

I want the line graph to be displayed in a page that is formatted in a UiBinder but if I could at least see the graph running that would help a lot.

Thanks!

Answer 1

First you need to download and include jquery and highcharts javascript in your myApp.html file.

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="highcharts.js"></script>

Then you need to download and include highcharts.jar as a dependency of your project.

Then you need to include the highcharts module into you gwt project (myApp.gwt.xml):

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

After that you can start using UiBinder.

Create a Composite in your source directory: for the example, let's pretend your pakage is com.mycompany. So create a class com.mycompany.MyChart.java

package com.mySampleApplication.client;

import com.google.gwt.core.shared.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import org.moxieapps.gwt.highcharts.client.*;

import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.LinePlotOptions;

public class MyChart extends Composite {


    interface MyUiBinder extends UiBinder<FlowPanel, MyChart> {
    }

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    @UiField(provided = true)
    public final Chart chart;

    public MyChart() {
        chart = new Chart()
                .setType(Series.Type.LINE)
                .setChartTitle(new ChartTitle().setText("Monthly Average Temperature"))
                .setChartSubtitle(new ChartSubtitle().setText("Source: WorldClimate.com"))
                .setToolTip(new ToolTip().setEnabled(false));

        chart.getXAxis()
                .setCategories(
                        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                );

        chart.getYAxis().setAxisTitleText("Temperature °C");

        chart.setLinePlotOptions(new LinePlotOptions()
                        .setEnableMouseTracking(true)
                        .setDataLabels(new DataLabels()
                                        .setEnabled(true)
                        )
        );

        chart.addSeries(chart.createSeries()
                        .setName("Tokyo")
                        .setPoints(new Number[]{
                                7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
                        })
        );
        chart.addSeries(chart.createSeries()
                        .setName("London")
                        .setPoints(new Number[]{
                                3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8
                        })
        );

        initWidget(uiBinder.createAndBindUi(this));
    }
}

Then create the corresponding UiBinder file in your ressource folder com.mycompany.MyChart.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:highcharts="urn:import:org.moxieapps.gwt.highcharts.client">

    <g:FlowPanel>
        <highcharts:Chart ui:field="chart"/>
    </g:FlowPanel>

</ui:UiBinder>

And finnally create your chart composite and add it to the DOM

public void onModuleLoad() {
    RootPanel.get().add(new MyChart());
}

It could be a lot easier if you don't use UiBinder, but it seems to be a requirement for you.