GXT using Ext JS Charts JSInterop Example (Ext JS 6.5.3)

ExtJsBarChart.java

package com.sencha.gxt.explorer.client.extjs_charts;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.explorer.client.extjs.Ext;
import com.sencha.gxt.explorer.client.model.Example.Detail;
import com.sencha.gxt.widget.core.client.container.CssFloatLayoutContainer;
import com.sencha.gxt.widget.core.client.container.CssFloatLayoutContainer.CssFloatData;

import jsinterop.annotations.JsFunction;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;

@Detail(
  name = "Ext JS Bar Chart",
  category = "Ext JS Charts",
  icon = "barchart",
  classes = { Ext.class },
  minHeight = ExtJsBarChart.MIN_HEIGHT,
  minWidth = ExtJsBarChart.MIN_WIDTH)
public class ExtJsBarChart implements EntryPoint, IsWidget {

  protected static final int MIN_HEIGHT = 480;
  protected static final int MIN_WIDTH = 640;

//  private native void testDefineModel() /*-{
//    $wnd.Ext.define('com.example.NameValueModel', {
//      extend : 'Ext.data.Model',
//      fields : [ {
//        name : 'name',
//        mapping : 'name'
//      }, {
//        name : 'value',
//        mapping : 'value'
//      } ]
//    });
//  }-*/;

  /**
   * Define the Ext Class
   */
  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class NameValueModelDefine {
    @JsProperty
    public Object extend;
    @JsProperty
    public Object[] fields;
    @JsProperty
    public Object constructor;
  }

  /**
   * Define the Ext class Constructor
   */
  @JsFunction
  public static interface Constructor {
    Object onConstructor(Object config);
  }

  /**
   * Verify entity was added: > Ext.data.schema.Schema.instances.default.entities
   */
  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class NameValueModel {
    @JsProperty
    public String name;
    @JsProperty
    public Double value;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Axes {
    @JsProperty
    String type;
    @JsProperty
    String position;
    @JsProperty
    Object title;
    @JsProperty
    String fields;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Series {
    @JsProperty
    String type;
    @JsProperty
    Object subStyle;
    @JsProperty
    String xField;
    @JsProperty
    String yField;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class ChartConfig {
    @JsProperty
    String xtype;
    @JsProperty
    Object renderTo;
    @JsProperty
    int width;
    @JsProperty
    int height;
    @JsProperty
    Object store;
    @JsProperty
    Object[] axes;
    @JsProperty
    Object series;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Title {
    @JsProperty
    String text;
    @JsProperty
    int fontSize;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class SubStyle {
    @JsProperty
    String[] fill;
    @JsProperty
    String stroke;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Field {
    @JsProperty
    String name;
    @JsProperty
    String type;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class StoreConfig {
    @JsProperty
    Object model;
    @JsProperty
    Object fields;
    @JsProperty
    Object[] data;
    @JsProperty
    Object autoLoad;
    @JsProperty
    Object proxy;
  }

  @JsType
  public static class Proxy {
    @JsProperty
    Object type;
    @JsProperty
    Object url;
    @JsProperty
    Object reader;
  }

  @JsType
  public static class Reader {
    @JsProperty
    Object type;
    @JsProperty
    Object rootProperty;
  }

  private FlowPanel chartPanel1;
  private FlowPanel chartPanel2;

  @Override
  public Widget asWidget() {
    chartPanel1 = new FlowPanel();
    chartPanel2 = new FlowPanel();

    drawChart1();
    drawChart2(chartPanel2.getElement());

    CssFloatLayoutContainer container = new CssFloatLayoutContainer();
    container.add(new HTML("JsInterop Example"), new CssFloatData(1, new Margins(10, 10, 4, 10)));
    container.add(chartPanel1, new CssFloatData(1, new Margins(0, 10, 10, 10)));

     container.add(new HTML("JSNI Example"), new CssFloatData(1, new Margins(10, 10, 4, 10)));
     container.add(chartPanel2, new CssFloatData(1, new Margins(0, 10, 10, 10)));

    return container;
  }

  @Override
  public void onModuleLoad() {
    RootPanel.get().add(asWidget());
  }

  private void drawChart1() {
    Field field0 = new Field();
    field0.name = "name";
    field0.type = "string";
    
    Field field1 = new Field();
    field1.name = "value";
    field1.type = "float";
    
    Field[] fields = new Field[2];
    fields[0] = field0;
    fields[1] = field1;

    NameValueModelDefine nameModelDefinition = new NameValueModelDefine();
    nameModelDefinition.extend = "Ext.data.Model";
    nameModelDefinition.fields = fields;
    
    // To verify it was added: > Ext.data.schema.Schema.instances.default.entities
    Ext.define("com.example.NameValueModel", nameModelDefinition);

    NameValueModel nvm0 = new NameValueModel();
    nvm0.name = "A";
    nvm0.value = 1.01;
    NameValueModel nvm1 = new NameValueModel();
    nvm1.name = "B";
    nvm1.value = 2.02;
    NameValueModel nvm2 = new NameValueModel();
    nvm2.name = "C";
    nvm2.value = 3.03;
    NameValueModel nvm3 = new NameValueModel();
    nvm3.name = "D";
    nvm3.value = 4.04;
    NameValueModel nvm4 = new NameValueModel();
    nvm4.name = "E";
    nvm4.value = 5.05;

    NameValueModel[] datas = new NameValueModel[4];
    datas[0] = nvm0;
    datas[1] = nvm1;
    datas[2] = nvm2;
    datas[3] = nvm3;
    datas[4] = nvm4;

    StoreConfig storeConfig = new StoreConfig();
    storeConfig.model = "com.example.NameValueModel"; // Same as JsType above
    storeConfig.data = datas;

    Object store = Ext.create("Ext.data.Store", storeConfig);
    Title title1 = new Title();
    title1.text = "Values";
    title1.fontSize = 15;

    Title title2 = new Title();
    title2.text = "Chart 1";
    title2.fontSize = 15;

    Axes axes1 = new Axes();
    axes1.type = "numeric";
    axes1.position = "left";
    axes1.title = title1;
    axes1.fields = "value";

    Axes axes2 = new Axes();
    axes2.type = "category";
    axes2.position = "bottom";
    axes2.title = title2;
    axes2.fields = "name";

    Axes[] axes = new Axes[2];
    axes[0] = axes1;
    axes[1] = axes2;

    String[] fills = new String[1];
    fills[0] = "#388FAD";

    SubStyle subStyle = new SubStyle();
    subStyle.fill = fills;
    subStyle.stroke = "#1F6D91";

    Series series = new Series();
    series.type = "bar";
    series.subStyle = subStyle;
    series.xField = "name";
    series.yField = "value";

    ChartConfig chartConfig = new ChartConfig();
    chartConfig.xtype = "cartesian";
    chartConfig.renderTo = chartPanel1.getElement();
    chartConfig.width = 500;
    chartConfig.height = 300;
    chartConfig.store = store;
    chartConfig.axes = axes;
    chartConfig.series = series;

    Ext.create(chartConfig);
    
    log(chartConfig);
  }

  private native void log(ChartConfig chartConfig) /*-{
    console.log("chartCOnfig=", chartConfig);
  }-*/;

  private native void drawChart2(Element renderToElement) /*-{
    $wnd.Ext.create({
      xtype : 'cartesian',
      renderTo : renderToElement,
      width : 500,
      height : 300,
      store : {
        fields : [ 'name', 'value' ],
        data : [ {
          name : 'A',
          value : 1.01
        }, {
          name : 'B',
          value : 2.02
        }, {
          name : 'C',
          value : 3.03
        }, {
          name : 'D',
          value : 4.04
        }, {
          name : 'E',
          value : 5.05
        } ]
      },

      axes : [ {
        type : 'numeric',
        position : 'left',
        title : {
          text : 'Values',
          fontSize : 15
        },
        fields : 'value'
      }, {
        type : 'category',
        position : 'bottom',
        title : {
          text : 'Chart 2',
          fontSize : 15
        },
        fields : 'name'
      } ],

      series : {
        type : 'bar',
        subStyle : {
          fill : [ '#388FAD' ],
          stroke : '#1F6D91'
        },
        xField : 'name',
        yField : 'value'
      }
    });
  }-*/;

}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Sencha GXT Explorer</title>

<!-- App -->
<link rel="icon shortcut" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="explorer/reset.css" />

<!-- Ext JS 6.5.3 Modern -->
<link href="extjs/theme-material-all.css" rel="stylesheet"/>
<link href="extjs/charts-all.css" rel='stylesheet'/>
</head>
<body style="margin: 0; padding: 0; background: repeat top left url(examples/images/bg/square.gif);">

<div id="explorer-loading-panel" style="top: 0; right: 0; bottom: 0; left: 0; height: 64px; width: 64px; position: absolute; margin: auto; background: no-repeat center url(examples/images/general/loading.gif);"></div>

<!-- GXT -->
<script language='javascript' src='explorer/explorer.nocache.js'></script>
<iframe src="javascript:''" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0"></iframe>

<!-- Ext JS -->
<script src="extjs/ext-modern-all.js"></script>
<script src="extjs/charts.js"></script>

<!-- Google Analytics -->
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-1396058-29', 'gxt-demo-examples');
    ga('send', 'pageview');
</script>
</body>
</html>

This is using Ext JS modern for both the framework and charts.