step by step gflot tutorial?

Question

I feel a bit dumb asking this question here, but I can't seem to find a decent Gflot tutorial. Yes, there are tons of examples , and you can even download the whole code and try it out, but if you just want to create a uiBinder in a GWT project and add it to the main panel...it becomes really hard. I'm trying to add a simple LineChart to my main html file in a test GWT project.

Here is my LineExample uiBinder, directly copied from the examples:

public class LineExample extends DefaultActivity{

private static Binder binder = GWT.create( Binder.class );

interface Binder extends UiBinder<Widget, LineExample>{}

interface Style extends CssResource{
    String button();
    String darkTheme();
    String whiteTheme();
    String legendLabel();
}

/**
 * Plot
 */
@UiField( provided = true )
SimplePlot plot;

/** 
 * Button switch to dark
 */
@UiField
Button switchDark;

/**
 * Button switch to white
 */
@UiField
Button switchWhite;

/**
 * Access to UiBinder style
 */
@UiField
Style style;


public LineExample( Resources resources ){
    super( resources );
}

/**
 * Create plot
 */
public Widget createPlot(){
    PlotModel model = new PlotModel();
    PlotOptions plotOptions = PlotOptions.create();
    plotOptions.setLegendOptions( LegendOptions.create().setBackgroundOpacity( 0 )
        .setPosition( LegendPosition.NORTH_WEST ) );
    plotOptions.setGridOptions( GridOptions.create().setMargin( 5 ) );
    plotOptions.addXAxisOptions( AxisOptions.create().setFont( FontOptions.create().setColor("black").setWeight( "bold" ).setStyle( "italic" ) ) );
    plotOptions.addYAxisOptions( AxisOptions.create().setFont( FontOptions.create().setColor( "black" ).setWeight( "bold" ).setStyle( "italic" ) ) );

    // create the plot
    plot = new SimplePlot( model, plotOptions );

    // add data
    generateRandomData();

    return binder.createAndBindUi( this );
}

/**
 * On click on the generate button, we clear the current data and generate new ones
 *
 * @param e click event
 */
@UiHandler( "generate" )
void onClickGenerate( ClickEvent e ){
    plot.getModel().removeAllSeries();
    generateRandomData();
    plot.redraw();
}

/**
 * Generate random data
 */
private void generateRandomData(){
    int nbSeries = Random.nextInt( 5 ) + 1;
    for ( int i = 0; i < nbSeries; i++ ){
        plot.getModel().addSeries( Series.of( "Random Series " + i ) );
    }
    for ( int i = 1; i < 13; i++ ){
        for ( SeriesHandler series : plot.getModel().getHandlers() ){
            series.add( DataPoint.of( i, Random.nextInt( 30 ) ) );
        }
    }
}

/**
 * Switch to dark theme
 *
 * @param e click event
 */
@UiHandler( "switchDark" )
void onClickSwitchToDark( ClickEvent e ){
    switchDark.setVisible( false );
    switchWhite.setVisible( true );

    plot.removeStyleName( style.whiteTheme() );
    plot.addStyleName( style.darkTheme() );
    plot.getOptions().getXAxisOptions().getFont().setColor( "white" );
    plot.getOptions().getXAxisOptions().setTickColor( "rgba(255, 255, 255, 0.6)" );
    plot.getOptions().getYAxisOptions().getFont().setColor( "white" );
    plot.getOptions().getYAxisOptions().setTickColor( "rgba(255, 255, 255, 0.6)" );
    plot.getOptions().getGridOptions().setBorderColor( "white" );
    plot.redraw();
}

/**
 * Switch to white theme
 *
 * @param e click event
 */
@UiHandler( "switchWhite" )
void onClickSwitchToWhite( ClickEvent e ){
    switchDark.setVisible( true );
    switchWhite.setVisible( false );

    plot.removeStyleName( style.darkTheme() );
    plot.addStyleName( style.whiteTheme() );
    plot.getOptions().getXAxisOptions().getFont().setColor( "black" );
    plot.getOptions().getXAxisOptions().clearTickColor();
    plot.getOptions().getYAxisOptions().getFont().setColor( "black" );
    plot.getOptions().getYAxisOptions().clearTickColor();
    plot.getOptions().getGridOptions().clearBorderColor();
    plot.redraw();
}

}

Here is the correspoding LineExample.ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"      xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:p="urn:import:com.googlecode.gflot.client">

<ui:style type='gflot.sample.client.LineExample.Style'>
 .button {
  margin-top: 10px;
  margin-left: 10px;
}

.darkTheme {
  background-color: black;
}

@external legendLabel;
.darkTheme .legendLabel {
    color: white;
}

.whiteTheme .legendLabel {
  color: black;
}

Generate Switch to dark Switch to white

The Resources file used:

public interface Resources extends ClientBundle {
@Source( "gflot.css" )
Style style();

public interface Style extends CssResource{
    String headerContainer();
    String headerTitle();
    String headerDescription();
    String headerHomePageLink();
    String menuScrollContainer();
    String menuContainer();
    String menuCategory();
    String menuLink();
    String menuLinkSelected();
    String sourceContainer();
    String sourceLink();
    String sourceLinkSelected();
    String mainScrollContainer();
    String mainContainer();
}

}

And the css file, gflot.css:

@def headerBgColor #0D0D0D;
@def mainBgColor #FFF7FF;
body {
    font-family: 'Ubuntu', sans-serif;
    font-size: 13px;
    background-color: mainBgColor;
    color: #0D0D0D;
}

@external gwt-Button;
.gwt-Button {
/*         background-color: #D14836; */
/*         background-image: -webkit-linear-gradient(top, #DD4B39, #D14836); */
/*         background-image: -moz-linear-gradient(top, #DD4B39, #D14836); */
/*         background-image: -ms-linear-gradient(top, #DD4B39, #D14836); */
/*         background-image: -o-linear-gradient(top, #DD4B39, #D14836); */
/*         background-image: linear-gradient(top, #DD4B39, #D14836); */
/*         border: 1px solid transparent; */
/*         height: 27px; */
/*         line-height: 27px; */
/*         padding: 0px 8px; */
/*         outline: 0; */
/*         font-weight: bold; */
/*         -webkit-border-radius: 5px; */
/*         -moz-border-radius: 5px; */
/*         border-radius: 5px; */
/*         cursor: pointer; */
}

.headerContainer {
    margin: 8px;
    padding: 10px;
    background-color: headerBgColor;
    color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
}

.headerContainer a {
    color: white;
}

.headerTitle {
    font-size: 20px;
    font-weight: bold;
}

 .headerDescription {
    font-style: italic;
    margin-left: 10px;
}

.headerHomePageLink {
    float: right;
    margin-top: 3px;
}

.menuScrollContainer {

}

.menuContainer {

}

.menuCategory {
    margin: 5px;
    font-size: 16px;
}

.menuLink {
    margin: 0px 10px;
}

.menuLink a {
    display: block;
    padding: 5px 8px;
    color: black;
    outline: 0px;
}

.menuLinkSelected a {
    background-color: #8C2E0B;
    color: white;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

.menuLink a:hover {
    background-color: #8C501C;
    color: white;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

.sourceContainer {
    padding: 10px;
}

.sourceLink {
    font-weight: bold;
    padding: 3px;
    color: black;
}

.sourceLink:hover {
    cursor: pointer;
    text-decoration: underline;
}

.sourceLinkSelected {
    color: grey;
 }

.sourceLinkSelected:hover {
    cursor: auto;
    text-decoration: none;
}

.mainScrollContainer {
    margin: 5px;
}

.mainContainer {
    margin: 5px;
}

Now, what I don't know how to proceed is adding the widget to my main panel...here is my EntryPoint class, where I'm adding an already existing widget I created before:

public class Gflot_example implements EntryPoint {
public void onModuleLoad() {
  RootPanel.get().add(new Login());
  //RootPanel.get().add(???);   >> new LineExample() does not look like the way to proceed here 
}    

I've checked the EntryPoint in the examples, but it calls a MainWidow class that does lots of stuff I really don't know what is going on there...anyone has a working example NOT from the official examples?

Thanks! Alex

Answer 1

The important part of the examples is the createPlot() method in each one. Rest of the stuff is used to handle history and source code viewing.

To add a SimplePlot to your RootPanel , just do the following :

• Create a PlotModel and add your data to it
• Create a PlotOptions and define the options you want
• Create a SimplePlot with the model and options you created
• Add the SimplePlot to your RootPanel

Basically, just copy the createPlot() method, put it inside your EntryPoint and do RootPanel.get().add(createPlot());

If you haven't done it yet, you also need to include the gflot module. Add <inherits name='com.googlecode.gflot.GFlot'/> to your module descriptor XML file.