允许 google 图表显示超过 2 个不同的数据集
allow google chart to display more than 2 different data sets
下面这张图表来自 Google，它显示了 2 个数据集（茶、咖啡）。我一直在尝试玩弄以显示 5 个数据集但失败了。我尝试更改 button.onclick 函数和 button.value。我附上了初始代码（2个数据集）和修改后的代码（5个数据集）。
初始视图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<button type="button" id="b1">Click Me!</button>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
// Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 122, 638, 722, 998, 450, 614.6],
['2005/06', 100, 1120, 899, 1268, 288, 682],
['2006/07', 183, 167, 487, 207, 397, 623],
['2007/08', 200, 510, 315, 1068, 215, 609.4],
['2008/09', 123, 491, 829, 826, 366, 569.6]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
width: 400,
height: 240,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}},
animation:{
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
修改后的视图：
<html>
<head>
<button type="button" id="b1" onclick="init();">Click me!</button>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(init);
function init() {
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.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
data[2] = google.visualization.arrayToDataTable(rowData3);
data[3] = google.visualization.arrayToDataTable(rowData4);
data[4] = google.visualization.arrayToDataTable(rowData5);
var options = {
width: 600,
height: 440,
vAxis: { title: "Submissions" },
hAxis: { title: "School" },
seriesType: "bars",
series: { 4: { type: "line" } },
animation: {
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function () {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Commerce, Law & Management' : 'Engineering & the Built Environment');
});
options['title'] = 'Submissions by the ' + (current ? 'Engineering & the Built Environment' : 'Commerce, Law & Management') + ' Faculty';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function () {
current = 1 - current;
drawChart();
}
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
修改后的视图只显示rowData1和rowData2。我试图 fiddle 让它显示 rowData1、rowData2、rowData3、rowData4 和 rowData5。
澄清一下，每一行数据代表大学中的一个学院，每一行中的值代表每个学院的学校。
院系如下：
rowData1 - 商业、法律和管理，
rowData2 - 工程与建筑环境，
rowData3 - 健康科学，
rowData4 - 人文学科，
rowData5 - 科学。
您可能会看到 rowsData1 和 rowData2 的功能已经实现。
这：current = 1 - current; 将始终在 1 和 0 之间切换，这就是为什么只绘制前 2 tables 的原因。
更简单的方法：绘制图表后，将第一个数据table推到data-array的末尾，然后你就不需要关心计数器了，data[0] 始终是下一个要绘制的 table。
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(init);
function init() {
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-property
var 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;
});
function drawChart() {
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;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input type="button" id="b1" value="Click me!" />
<div id="chart_div"></div>
下面这张图表来自 Google，它显示了 2 个数据集（茶、咖啡）。我一直在尝试玩弄以显示 5 个数据集但失败了。我尝试更改 button.onclick 函数和 button.value。我附上了初始代码（2个数据集）和修改后的代码（5个数据集）。
初始视图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<button type="button" id="b1">Click Me!</button>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
// Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 122, 638, 722, 998, 450, 614.6],
['2005/06', 100, 1120, 899, 1268, 288, 682],
['2006/07', 183, 167, 487, 207, 397, 623],
['2007/08', 200, 510, 315, 1068, 215, 609.4],
['2008/09', 123, 491, 829, 826, 366, 569.6]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
width: 400,
height: 240,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}},
animation:{
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
修改后的视图：
<html>
<head>
<button type="button" id="b1" onclick="init();">Click me!</button>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(init);
function init() {
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.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
data[2] = google.visualization.arrayToDataTable(rowData3);
data[3] = google.visualization.arrayToDataTable(rowData4);
data[4] = google.visualization.arrayToDataTable(rowData5);
var options = {
width: 600,
height: 440,
vAxis: { title: "Submissions" },
hAxis: { title: "School" },
seriesType: "bars",
series: { 4: { type: "line" } },
animation: {
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function () {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Commerce, Law & Management' : 'Engineering & the Built Environment');
});
options['title'] = 'Submissions by the ' + (current ? 'Engineering & the Built Environment' : 'Commerce, Law & Management') + ' Faculty';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function () {
current = 1 - current;
drawChart();
}
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
修改后的视图只显示rowData1和rowData2。我试图 fiddle 让它显示 rowData1、rowData2、rowData3、rowData4 和 rowData5。 澄清一下，每一行数据代表大学中的一个学院，每一行中的值代表每个学院的学校。
院系如下： rowData1 - 商业、法律和管理， rowData2 - 工程与建筑环境， rowData3 - 健康科学， rowData4 - 人文学科， rowData5 - 科学。
您可能会看到 rowsData1 和 rowData2 的功能已经实现。
这：current = 1 - current; 将始终在 1 和 0 之间切换，这就是为什么只绘制前 2 tables 的原因。
更简单的方法：绘制图表后，将第一个数据table推到data-array的末尾，然后你就不需要关心计数器了，data[0] 始终是下一个要绘制的 table。
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(init);
function init() {
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-property
var 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;
});
function drawChart() {
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;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input type="button" id="b1" value="Click me!" />
<div id="chart_div"></div>