jMaki and GWT


jMaki and GWT were created to solve a similar problem however both take radically different approaches. jMaki takes a script centric approach providing a well defined component model and life-cycle for JavaScript components using JSON as for model data and GWT takes a Java centric approach using well defined APIs in Java to generate script types in Java. Used together jMaki and GWT can provide the best of both worlds with jMaki providing access to a wide range of JavaScript functionality to GWT components.


Widget Creation

The source for a typical jMaki module for charting uses a base Java class that extends the Google Widget API. The in the following graphic jmaki.charting.JMakiChart extends This class encapsulates all the necessary functionality to get a charting widget initialized.

The jMaki resources for defining a widget include JavaScript and CSS files. The component.js contains a namespaced JavaScript object that is initialized by the jMaki client runtime defined in jmaki.js. The jMaki client runtime initializes each widget instance using a unique id generated by the chart extending JMakiWidget. These resources are defined in the jmaki/charting/Widgets.gwt.xml file.

   public native void initJS(JMakiChart tc,
                              String _uuid,
                              String service,
                              Axis _xAxis,
                              Axis _yAxis,
                              int _colorScheme,
                              String chartType) /*-{
     // initialize the Axes, value, and service

     $wnd.jmaki.subscribe("/jmaki/runtime/widget/loaded", function(args) {
            if ( == _uuid) {
        $wnd.jmaki.addWidget({ name : chartType, uuid : _uuid, args :$wnd.myargs, service :  $wnd.myservice,  value :  myval});

JavaScript Native Interface (JSNI) code to initialize a widget

JMakiWidget instances use the jMaki publish subscribe bus to track the time when the JavaScript object instance is available to the JMakiWidget component. If a users attempts to add or set data before the JavaScript instance of the widget is initialized the data will be saved until the widget is loaded.

Java / JavaScript Integration

Once a widget instance is initialized the UI can all into JavaScript using JSNI calls that are defined in the base JMakiWidget class. Following is a sequence diagram showing the calls in both Java and JavaScript.

Calling a JavaScript function

The sequence diagram shows a PieChart widget which uses a DataSet to update the chart. Note the jmaki.charting.plotkit.pie.Widget modifies the HTML document immediately following the call.


The end user does not need to see or deal with the JavaScript that is used with the component. All of the CSS and JavaScript resources are kept in the jar file containing the module. To use simply include the model in the classpath and in your application *.gwt.xml file include.


Now you simply need to include the import statements and you are free to create a chart. Here is sample which you can easily use by simply modifying the built in GWT Hello Sample Application that comes with GWT.


import jmaki.charting.client.DataSet;
import jmaki.charting.client.Axis;
import jmaki.charting.client.Axes;
import jmaki.charting.client.PieChart;

 * ChartApp application.
public class Hello implements EntryPoint {

public void onModuleLoad() {

        final Button button = new Button("Click me!");
        String[] labels = {"May", "June", "July", "August"};
        // A pie chart only has 1 axis 
        Axes axes = new Axes(new Axis(labels));       
        // create an instance of the piechart
        final PieChart pc = new PieChart(400, 400, axes, PieChart.RED);

        double[] points = {250, 35, 435, 15};
        DataSet ds = new DataSet("prices", "Some prices", points);
        // update the chart when the button is clicked
        button.addClickListener(new ClickListener() {

            public void onClick(Widget w) {
                // for fun update the axis 
                String[] labels2 = {"May2", "June2", "July2", "August2"};
                Axes a2 = new Axes(new Axis(labels2));
                // new data points
                double[] points2 = {150, 35, 135, 105};
                DataSet ds2 = new DataSet("prices", "Some prices", points2);



Let us know what you think. Visit the jMaki forum if you have any problems with the demo.


Visit the downloads folder for the zip file which will be named

Find the GWT charting in the download or visit the project subversion repository.