Modify appearance of DataTable role in a Google Chart - google-visualization

Question

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?

Answer 1

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/