ComboChart with annotation text in gwt google-visualization

Question

I'm using gwt-visualization (a wrapper around Chart Tools). I have a ComboChart that includes two bar charts (stacked) and a line chart, and I want to add an annotation and annotationText to some rows.

The DataTable is defined like this:

private DataTable buildData() {

    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Day");
    data.addColumn(ColumnType.NUMBER, "Domain");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 1)");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 2)");

    addAnnotationColumn(data);

    return data;
}

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

And then the chart options...

private ComboChart.Options createComboOptions(String title) {
    ComboChart.Options options = ComboChart.createComboOptions();
    Series line = Series.create();
    line.setType(Type.LINE);
    options.setSeries(0, line);

    Series bars1 = Series.create();
    bars1.setType(Type.BARS);
    options.setSeries(1, bars1);

    Series bars2 = Series.create();
    bars2.setType(Type.BARS);
    options.setSeries(2, bars2);

    options.setIsStacked(true);
    return options;
}

Which results in something like this: result

What I need is to add annotations to some rows in the line series, or in other words how to set roles in a ComboChart, but I can't seem to find any documentation on how to do it in gwt (or even how to do it in pure JS in a ComboChart). Help?

score 1 · Answer 1 · answered Nov 12 '12 at 09:49

The documentation about roles in google charts can be found here.

For adding the actual annotation you can just use the built in GWT functions (setValue()) Something like that:

private DataTable buildData() {

    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Day");
    data.addColumn(ColumnType.NUMBER, "Domain");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 1)");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 2)");

    addAnnotationColumn(data);

    for (int i =0;i<dataLength;i++) {
        data.addRow();
        data.setValue(i,0,'DAY');
        data.setValue(i,1,DOMAIN);
        data.setValue(i,2,DOMAIN_SOURCE1); 
        data.setValue(i,3,DOMAIN_SOURCE2);
        data.setValue(i,4,ANNOTATION);
        data.setValue(i,5,ANNOTATION_TEXT);
    }

    return data;
}

Thanks for the answer. The problem is, when I do that the annotation simply won't show. But if I change the role from 'annotation' to 'tooltip' (just for the sake of testing), the "Domain 2" column will have a custom tooltip. — Marcelo, Nov 12 '12 at 19:46
@Marcelo: I think the best thing is to try to re-create your chart in pure JS in the [google chart playground](https://code.google.com/apis/ajax/playground/?type=visualization#combo_chart). You can take the combochart as an example and modify it to add annotations. Once this works, we can check out why the GWT version doesn't work. — Ümit, Nov 13 '12 at 07:50

score 1 · Accepted Answer · answered Nov 15 '12 at 18:35

Turns out that the ComboChart adds the annotation/annotationText columns to the last series created on the graph - Meaning that the roles were being added to the Bar graph, which does not support annotations in the ComboChart.

The Line graph, however, supports them - So the 'dirty fix' was to have the line series being the last one in the graph:

private ComboChart.Options createComboOptions(String title) {
    ComboChart.Options options = ComboChart.createComboOptions();

    Series bars1 = Series.create();
    bars1.setType(Type.BARS);
    options.setSeries(0, bars1);

    Series bars2 = Series.create();
    bars2.setType(Type.BARS);
    options.setSeries(1, bars2);

    Series line = Series.create();
    line.setType(Type.LINE);
    options.setSeries(2, line);

    options.setIsStacked(true);
    return options;
}

ComboChart with annotation text in gwt google-visualization

2 Answers2

Linked