Question

I am using GWT api for google charts and having some issues:

• colums from the start and end values missing for the column chart

• BarChart width is trimmed is half for first/last value

To solve this I tried viewWindowMode property

HorizontalAxisOptions opt = HorizontalAxisOptions.create();
opt.set("viewWindowMode","pretty");

but this does not work.

Any ideas on how to solve?

Code:

private Options createOptions(ChartDataProxy response) {


        Options options = Options.create();
        options.setWidth(chartPanel.getOffsetWidth() - 2 * chartBorderWidth);
        options.setHeight(chartPanel.getOffsetHeight() - 2 * chartBorderWidth);

        HorizontalAxisOptions opt = HorizontalAxisOptions.create();
        opt.setTitle(response.getxAxisName());
        opt.setSlantedText(true);
        opt.set("viewWindowMode","pretty");

        options.setHAxisOptions(opt);

        AxisOptions vopt = AxisOptions.create();
        vopt.setTitle( response.getyAxisName());
        vopt.set("viewWindowMode","pretty");

        options.setVAxisOptions(vopt);

        options.setTitle(response.getCaption() + " " + response.getSubCaption());
        options.setLegend( LegendPosition.BOTTOM );

        options.setPointSize(4);

        return options;
    }

Answer 1

I’m having similar problem, although I was using javascript. Maybe, you can adapt it into GWT.

Basically DataView can fix it. You just need to handle the first column with DataView and return whatever you need to return when not using DataView — however, as string. I (don’t) know, it’s weird.

Given I had two columns: date, number. I will use this kind of code:

var data = new google.visualization.DataTable();

data.addColumn('date', 'month');
data.addColumn('number', 'users');

// trick to prevent the bar chart from being cut in half at both edge of our graph
var dataView = new google.visualization.DataView(data);
dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_monthly_users'));
chart.draw(dataView, options);

Hope it helps. I merely gather the scattered solutions.