Allow Google Chart To Display More Than 2 Different Data Sets

this chart below is by Google and it displays 2 data sets (Tea, Coffee). I've been trying to play around with in order to display 5 data sets but failed. I tried changing the butto

Solution 1:

This: current = 1 - current; will always switch between 1 and 0, that's why only the first 2 tables will be drawn.

Easier approach: When a chart has been drawn, push the first datatable to the end of the data-array, then you don't need to care about counters, data[0] is always the next table that will be drawn.

google.load("visualization", "1", {
  packages: ["corechart"]
});
google.setOnLoadCallback(init);

functioninit() {
  var rowData1 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Accountancy', 165, 938, 522, 998, 450],
    ['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
    ['Law', 157, 1167, 587, 807, 397],
    ['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
    ['Graduate School of Business Administration', 136, 691, 629, 1026, 366]
  ];

  var rowData2 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Architecture & Planning', 122, 638, 722, 998, 450],
    ['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
    ['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
    ['Construction Economics & Management', 200, 510, 315, 1068, 215],
    ['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
    ['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
    ['Mining Engineering', 123, 491, 829, 826, 366]
  ];

  var rowData3 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Anatomical Science', 122, 638, 722, 998, 450],
    ['Clinical Medicine', 320, 1120, 279, 1268, 288],
    ['Oral Health Sciences', 183, 167, 487, 207, 397],
    ['Pathology', 200, 560, 315, 679, 215],
    ['Physiology', 139, 900, 615, 500, 215],
    ['Public Health', 165, 938, 522, 998, 450],
    ['Therapeutic Sciences', 183, 500, 487, 207, 397],
    ['Centre for Health Science Education', 139, 1110, 615, 968, 215],
    ['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]
  ];

  var rowData4 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Wits School of Arts', 122, 638, 722, 998, 450],
    ['Wits School of Education', 320, 1120, 279, 1268, 288],
    ['Humanities Graduate Centre', 183, 167, 487, 207, 397],
    ['Human & Community Development', 200, 560, 315, 679, 215],
    ['Literature, Language and Media', 139, 900, 615, 500, 215],
    ['Social Sciences', 165, 938, 522, 998, 450],
    ['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]
  ];

  var rowData5 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Biological and Life Sciences', 122, 638, 722, 998, 450],
    ['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
    ['Molecular & Cell Biology', 183, 167, 487, 207, 397],
    ['Chemistry', 200, 560, 315, 679, 215],
    ['Physics', 139, 900, 615, 500, 215],
    ['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
    ['Geosciences', 183, 167, 487, 207, 397],
    ['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
    ['Mathematics', 139, 900, 615, 500, 215],
    ['Statistics & Actuarial Science', 123, 491, 829, 826, 366]
  ];

  // Create and populate the data tables.//Note: we store the title as table-propertyvar data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[0].setTableProperty('title', 'Commerce, Law & Management');
  data[1] = google.visualization.arrayToDataTable(rowData2);
  data[1].setTableProperty('title', 'Engineering & the Built Environment');
  data[2] = google.visualization.arrayToDataTable(rowData3);
  data[2].setTableProperty('title', 'Health Sciences');
  data[3] = google.visualization.arrayToDataTable(rowData4);
  data[3].setTableProperty('title', 'Humanities');
  data[4] = google.visualization.arrayToDataTable(rowData5);
  data[4].setTableProperty('title', 'Science');

  var options = {
    width: 600,
    height: 440,
    vAxis: {
      title: "Submissions"
    },
    hAxis: {
      title: "School"
    },
    seriesType: "bars",
    series: {
      4: {
        type: "line"
      }
    },
    animation: {
      duration: 1000,
      easing: 'out'
    },
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  var button = document.getElementById('b1');
  google.visualization.events.addListener(chart, 'ready', function() {
    button.disabled = false;
  });

  functiondrawChart() {

    options['title'] = 'Submissions by the ' + data[0].getTableProperty('title') 
                           + ' Faculty';
    button.disabled = true;
    chart.draw(data[0], options);
    //push the first table to  the end  
    data.push(data.shift());
    //set value for button
    button.value = 'Switch to ' + data[0].getTableProperty('title');
  }
  drawChart();
  button.onclick = drawChart;
}

#b1{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
}

<scripttype="text/javascript"src="https://www.google.com/jsapi"></script><inputtype="button"id="b1"value="Click me!" /><divid="chart_div"></div>