Role on dynamic google chart (interval) - dynamic

Question

How can I use this: https://developers.google.com/chart/interactive/docs/roles if I populate the graph dynamically?
This is part of my code:
...
data.addRows(dates.length);
for (i = 0; i < dates.length; i++){
if (i!=0){
data.setValue( i, 0, new Date(dates[i]) );
temp = graph[dates[i]];
var j = 0;
if (temp){
for (j = 0; j < groups.length; j++){
if ( groups[j] in temp){
var volume = parseFloat(temp[groups[j]]);
console.log(i + ' ' + j + ' ' + volume);
data.setValue( i, j+1, volume )
}
}
}
}else{
data.setValue( i, 0, new Date(dates[i]) );
var j = 0;
for (j = 0; j < groups.length; j++){
data.setValue( 0, j+1, 0 )
}
}
}
...
After I set the value with 'data.setValue', how can I set also the role? (I need for the interval value) Something like 'data.setRole' would be wonderful!! :-)

Answer 1

You can create the DataTable without any roles, and then create a DataView that assigns roles to the columns in the view. The documentation shows how to do this here:
DataView.setColumns Method
When creating a view, you can explicitly set the role of a column.
This is useful when creating a new calculated column. See
DataView.setColumns() for more information.
The DataView.setColumns() help file explains how to do this as follows:
setColumns(columnIndexes)
columnIndexes - An array of numbers and/or objects (can be mixed):
Numbers specify the index of the source data column to include in the view. The data is brought through unmodified. If you
need to explicitly define a role or additional column properties,
specify an object with a sourceColumn property.
Objects specify a calculated column. A calculated column creates a
value on the fly for each row and adds it to the view. The object
must have the following properties:
calc [function] - A function that will be called for each row in the column to calculate a value for that cell. The function
signature is func(dataTable, row), where dataTable is the source
DataTable, and row is the index of the source data row. The
function should return a single value of the type specified by
type.
type [string] - The JavaScript type of the value that the calc function returns.
label [Optional, string] - An optional label to assign to this generated column. If not specified, the view column will have no
label.
id [Optional, string] - An optional ID to assign to this generated column.
sourceColumn - [Optional, number] The source column to use as a value; if specified, do not specify the calc or the type property.
This is similar to passing in a number instead of an object, but
enables you to specify a role and properties for the new column.
properties [Optional, object] - An object containing any arbitrary properties to assign to this column. If not specified, the view
column will have no properties.
role [Optional, string] - A role to assign to this column. If not specified, the existing role will not be imported.
So if your interval column is column #3, for instance, you would say:
dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}]);
The above sets columns 0, and 1 as-is, without a role, while column 2 is assigned as an interval column.
EDIT
Responding to the comments, the intervals are in the data set. Here is an example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Interval A', 'Interval B'],
['2003', 100, 95, 125],
['2004', 110, 96, 150],
['2005', 120, 97, 175],
['2006', 130, 98, 200],
['2007', 140, 99, 225],
['2008', 150, 100, 250]
]);
// Create Data View using columns 2 & 3 as intervals
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}, {sourceColumn: 3, role: 'interval'}]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(dataView,
{width:600, height:400,
hAxis: {title: "Year"}}
);
}
You include the interval values in the original data table as columns. You then use a dataview to change those columns to 'interval' role columns. Then you draw the dataview. This will provide error bars (interval columns) as expected.