Geek asks and answers

Role in google dynamic chart (interval)

How can I use this: https://developers.google.com/chart/interactive/docs/roles if I dynamically populate the chart?

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 the role as well? (I need the interval value) Something like "data.setRole" would be great !! :-)

0
source share
1 answer

You can create DataTablewithout any roles, and then create DataViewone that assigns roles to columns in the view. The documentation shows how to do this here :

DataView.setColumns Method

. . DataView.setColumns() .

DataView.setColumns() , :

setColumns(columnIndexes)

  • columnIndexes - / ( ):          . . , sourceColumn.
  • . " " . :
    • calc [function] - , , . - func (dataTable, ), dataTable DataTable, - . , .
    • type [string] - JavaScript, calc.
    • label [, ] - . , .
    • id [, ] - , .
    • sourceColumn - [, ] ; , calc type.
      ,
      .
    • properties [, ] - , . ,
      .
    • role [, ] - , . , .

, №3, , :

dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}]);

0 1 , , 2 .

, . :

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"}}
        );
}

. dataview, "". . ( ), .

+3

More articles:


All Articles