Googlecharts Dashboard, problems with invalid column index

Question

Hello I've got the following javascript code (just trying some things)

 // Load the Visualization API 
 google.load('visualization', '1.0', {'packages': ['controls']});
 //Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(drawDashboard);


 function drawDashboard() {

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

    data.addColumn('string', 'MyRace');
    data.addColumn('string', 'EnemyRace');
    data.addColumn('string', 'Map');
    data.addColumn('number', 'GameLength');
    data.addColumn('number', 'WinOrLose');
    data.addColumn('string', 'Datum');

    data.addRows([
       ['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map5', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map4', 15.8, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map3', 13.4, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map2', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map4', 11.9, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map3', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map5', 12.3, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map5', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map4', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map3', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map5', 10.2, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map4', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map1', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map3', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map2', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map4', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map3', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map5', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map4', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Terran', 'Map1', 10.2, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map5', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map2', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map3', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map4', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map3', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map5', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map4', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map5', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Terran', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map1', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map3', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map4', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map3', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map5', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map4', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map1', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map5', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map1', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Terran', 'Map3', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map4', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map3', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map3', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map4', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map5', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'],
       ['Zerg', 'Zerg', 'Map3', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'],
       ['Zerg', 'Terran', 'Map4', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 0, '30.12.2013']
    ]);

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

    wrapper = new google.visualization.ChartWrapper({
       chartType: 'BarChart',
       options: {title: 'Winratios gegen die verschiedenen Rassen',
          width: 400,
          height: 300,
          backgroundColor: '#232326',
          titleTextStyle: {color: '#99999b'},
          //vAxis: {textStyle: {color: '#99999b'}},
          //hAxis: {textStyle: {color: '#99999b'}, ticks: [0,0.2,0.4,0.6,0.8,1] },
          legend: 'none'
       },
       containerId: 'chart_div',
       'view': {'columns': [1, 4]}
    });

    google.visualization.events.addListener(wrapper, 'ready',
            function(event) {
               alert(wrapper.getDataTable().getColumnLabel(4));
               wrapper.setDataTable(google.visualization.data.group(wrapper.getDataTable(), [1], [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]));
               wrapper.draw();
            });

    var GL = new google.visualization.ControlWrapper({
       'controlType': 'NumberRangeFilter',
       'containerId': 'GL_div',
       'options': {
          'filterColumnIndex': '3'
       }
    });

    var MyRace = new google.visualization.ControlWrapper({
       'controlType': 'CategoryFilter',
       'containerId': 'MyRace_div',
       'options': {
          'filterColumnIndex': '0'
       }
    });

    var EnemyRace = new google.visualization.ControlWrapper({
       'controlType': 'CategoryFilter',
       'containerId': 'EnemyRace_div',
       'options': {
          'filterColumnIndex': '1'
       }
    });

    var Karte = new google.visualization.ControlWrapper({
       'controlType': 'CategoryFilter',
       'containerId': 'Karte_div',
       'options': {
          'filterColumnIndex': '2'
       }
    });

    var Datum = new google.visualization.ControlWrapper({
       'controlType': 'CategoryFilter',
       'containerId': 'Datum_div',
       'options': {
          'filterColumnIndex': '5'
       }
    });

    dashboard.bind([MyRace, EnemyRace, Karte, GL, Datum], wrapper);
    dashboard.draw(data);
 }

My Problem now is, that i get alerted the right value of the columnlaben (WinOrLose) but it throws an Error on the grouping, saying the column can only be a value between 0 and 1. Any Ideas how to fix? If i group with the colum 1 or 0 i get the error that these columns can't be gruped because he picks the columns 0 or 1 of the original datatable which are strings. How can I make him to group by column 4 ?

Thanks a lot for some help.

Answer 1

problem is that you define your wrapper view as 'view': {'columns': [1, 4]}.

It means that this bar chart expect data table with at least 5 column to create view upon them. But this group function

google.visualization.data.group(wrapper.getDataTable(), [1], [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}])

creates data table with only two columns, hence warning to select from index range [0 to 1].

If you will create new wrapper like below and pass resulting data table there it will be rendered.

    wrapper2 = new google.visualization.ChartWrapper({
           chartType: 'BarChart',
           options: {title: 'Winratios gegen die verschiedenen Rassen',
              width: 400,
              height: 300,
              backgroundColor: '#232326',
              titleTextStyle: {color: '#99999b'},
              //vAxis: {textStyle: {color: '#99999b'}},
              //hAxis: {textStyle: {color: '#99999b'}, ticks: [0,0.2,0.4,0.6,0.8,1] },
              legend: 'none'
           },
           containerId: 'chart_div2',
           'view': {'columns': [0, 1]}
        });

    google.visualization.events.addListener(wrapper, 'ready',
            function(event) {
               wrapper2.setDataTable(google.visualization.data.group(wrapper.getDataTable(), [1], [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]));
               wrapper2.draw();
            dashboard.bind([MyRace, EnemyRace, Karte, GL, Datum], wrapper2);
            dashboard.draw(data);
            });