CODEWITHSUNDEEP
google-visualization
NilsH
NilsH

Reputation: 13821

Modify appearance of DataTable role in a Google Chart

I have a column chart for which I use the certainty role to indicate that a value is uncertain. This is visualized as a non-solid fill of the column. However, this appearance is a little too subtle, so I want to make it a little bit clearer. Is there a way to hook into the charts API, or specify options for a role, that can modify it's appearance?

Upvotes: 0

Views: 499

Answers (1)

asgallant
asgallant

Reputation: 26340

The API does not support modifying the appearance of the uncertain columns. You can make a feature request to add support for modifying the appearance of uncertain elements.

Edit:

You can hack around the problem if your chart meets certain criteria (namely, you are using a Bar or ColumnChart with either 1 series of data or the "isStacked" option set to true; or a SteppedArea chart; or a LineChart/ScatterChart showing data points only [no lines]. LineCharts [with lines] and AreaCharts can be made to work, but it involves a lot more effort to make it happen. Other charts may be possible, but I haven't thought about how to make it work with them).

To make this work, you create a boolean column for your data (it doesn't have to have the "certainty" role, but assigning the role doesn't hurt anything either). Then you create a DataView or set the "view" parameter of a ChartWrapper to create one series of data for values where the boolean is true, and one series for values where the boolean is false, like this:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn('boolean', 'Boolean');
    data.addRows([
        ['Germany', 700, true],
        ['USA', 300, true],
        ['Brazil', 400, false],
        ['Canada', 500, true],
        ['France', 600, false],
        ['Russia', 800, true]
    ]);

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            // setting the "isStacked" option to true fixes the spacing problem
            isStacked: true,
            height: 300,
            width: 600,
            series: {
                0: {
                    // options for Boolean = true
                    color: '#3366cc'
                },
                1: {
                    // options for Boolean = false
                    color: '#0099c6',
                    visibleInLegend: false
                }
            }
        },
        view: {
            columns: [0, {
                type: 'number',
                label: data.getColumnLabel(1),
                calc: function (dt, row) {
                    // return value if Boolean is true
                    return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
                }
            }, {
                type: 'number',
                label: data.getColumnLabel(1),
                calc: function (dt, row) {
                    // return value if Boolean is false
                    return (dt.getValue(row, 2)) ? null : dt.getValue(row, 1);
                }
            }]
        }
    });
    chart.draw();
}

See example: http://jsfiddle.net/asgallant/Xzbw5/

Upvotes: 1

Related Questions