Display in a ColumnChart the value inside the column (not only when hover)

Question

I have a GWT application which display severals chart with gwt-visualization.

I want in my ColumnChart the value of the column inside it.

In the official documentation, we can see that with DataView we can add the value inside a column: https://developers.google.com/chart/interactive/docs/gallery/columnchart

(please see the type of graph that i want before "This is a little more complicated than it should be, because we create a DataView to specify the annotation for each column.")

Here my actual code wich display the value only when we hover the column:

ColumnChart col = new ColumnChart(createColTable(), createColOptions());
fp.add(col);

private AbstractDataTable createColTable() {
    int maxNbLines = 5;

    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, messages.user());
    data.addColumn(ColumnType.NUMBER, messages.nbMsg());
    data.addColumn(ColumnType.NUMBER, messages.nbTot());

    data.addRows(maxNbLines);

    if (this.getMetrics().size() > 0) {
        int j = 0;

        for (java.util.Map.Entry<String,UIMetricsBean> entry : 
            this.getDayMetrics().entrySet()) {
            String key = entry.getKey();
            UIMetricsBean value = entry.getValue();
            data.setValue(j, 0, key);
            data.setValue(j, 1, value.getNbTotal());
            data.setValue(j, 2, value.getNbBad());

            j++;
            if(j >= maxNbLines) {
                break;
            }
        }
    }

    return data;
}
private Options createColOptions() {
    TextStyle titleTextStyle = TextStyle.create();
    titleTextStyle.setFontSize(18);
    titleTextStyle.setColor(COLOR_RED);

    Options options = Options.create();
    options.setWidth(720);
    options.setHeight(350);
    options.setTitle(messages.tot());
    options.setColors(COLOR_GRAY, COLOR_RED);
    options.setBackgroundColor(COLOR_BACKGROUND_GRAY);

    TextStyle axisTextStyle = TextStyle.create();
    axisTextStyle.setFontSize(8);
    HorizontalAxisOptions hAxisOption = HorizontalAxisOptions.create();
    hAxisOption.setTextStyle(axisTextStyle);
    options.setHAxisOptions(hAxisOption);
    options.setTitleTextStyle(titleTextStyle);

    return options;
}

Do you know how i can display the value of the column inside the column?

Thanks!

Answer 1

You can achieve this using JSNI and annotation. Here is a working example. You still need to pass your data as an Array to JSNI.

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.visualizations.corechart.BarChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class TestChart implements EntryPoint {


     public void onModuleLoad() {
            final FlowPanel flowPanel = new FlowPanel();
            Panel panel = RootPanel.get();
            panel.add(flowPanel);
            Runnable onLoadCallback = new Runnable() {
                public void run() {
                    BarChart bar = new BarChart(createTable(), createOptions());
                    flowPanel.add(bar);    
                }
            };
            VisualizationUtils.loadVisualizationApi(onLoadCallback, BarChart.PACKAGE);
        }

        private AbstractDataTable createTable() {
            DataTable data = createTemplate();          
            return data;
        }

        private Options createOptions() {
            Options options = getNativeOptions();
           //set other options
            return options;
        }

        private native Options getNativeOptions() /*-{
            var options = @com.google.gwt.visualization.client.visualizations.corechart.Options::create()();
            options = {
                fontName : 'Calibri',
                fontSize : 12,
                width: 600,
                height: 400,
                displayAnnotations: true,
                orientation : 'horizontal',
                legend: { position: "none" },
            };
            return options;
        }-*/;

        private native DataTable createTemplate() /*-{      
              var data = $wnd.google.visualization.arrayToDataTable([
                ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
                ['Copper', 8.94, '#b87333', '8.94' ],
                ['Silver', 10.49, 'silver', '10.49' ],
                ['Gold', 19.30, 'gold', '19.30' ],
                ['Platinum', 21.45, 'color: #e5e4e2', '21.45' ]
        ]);      
        return data;            
        }-*/;

}

The result

Answer 2

Can be done easily as shown below using visualization API.

Write JSNI method as follows:

 private native DataTable addAnnotationColumn(DataTable data) /*-{
 data.addColumn({type: 'string', role: 'annotation'});
        return data;
    }-*/;

Create a DataTable:

     DataTable dataTable = DataTable.create();
     addAnnotationColumn(dataTable);

Set the Data:

 dataTable.setValue(row, column, "Your text over here");