Google combo chart transition animation - javascript

today i found it these chart service by google and i played around with a little ans seem to go stuck and chart transition animation where i try 2 view two sets of different data on the same table which changes on button click, following is the code,
<!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>
over here https://developers.google.com/chart/interactive/docs/animation?hl=nl-NL, please, i know this is a nooby question, but this doesn't seem to work for me...i added references and everything but still doesn't gave me anything, please any one could fix this code with html to work or give some information how to, i'd be much grateful :) thank you very much. :)


No worries, I found the answer, i know this must be a very obvious answer, but this is for someone whoever might need help :)
<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 = [['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('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 ? '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>

Related

Google animation chart is not working for chrome

I'm trying to visualize different datasets on one graph. This graph is made via google charts API. By testing I encountered the problem that the graph is not working on chrome but on other browsers like Edge and Firefox. Here is my code:
<head>
<meta charset="ISO-8859-1">
<title> tea and coffee</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// 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: 600,
height: 350,
vAxis: {
title: "Cups"
},
hAxis: {
title: "Month"
},
seriesType: "bars",
series: {
5: {
type: "line"
}
},
animation: {
startup: true,
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');
var button2 = document.getElementById('b2');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
button2.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button2.disabled = false;
button.value = 'Switch to' + current;
button2.value = 'Switch to' + current;
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
buttonChange = function() {
current = 0;
drawChart();
}
button2Change = function() {
current = 1;
drawChart();
}
}
</script>
</head>
<body>
<select>
<option id='b1' onclick="buttonChange()" value="Tea">Tea</option>
<option id='b2' onclick="button2Change()" value="Coffee">Coffee</option>
</select>
<div id="visualization" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
function buttonChange() {
current = 0;
drawChart();
}
function button2Change() {
current = 1;
drawChart();
}
</script>
</body>
As you see I just combined some snippets from the API. So the contained data is just a placeholder. I already tried to deactivate all Chrome-Extensions, checked the options for irregularities and tried on another PC. On every Browser it works fine. I hope someon can help me.

How do I put bar graphs between haxis values

I want my graph to look like this, where the bar graphs are between the haxis values.
http://imgur.com/C5GF7Ay
My code is as follows:
var data3 = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var options3 = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}}
};

you could try using a continuous axis with dates
then use hAxis.format and hAxis.ticks to only show the years
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Date', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
[new Date(2013, 0, 1), 165, 938, 522, 998, 450, 614.0],
[new Date(2013, 1, 1), 135, 940, 542, 990, 454, 614.1],
[new Date(2013, 2, 1), 157, 942, 562, 988, 458, 614.2],
[new Date(2013, 8, 1), 139, 944, 582, 980, 462, 614.3],
[new Date(2013, 9, 1), 136, 946, 652, 968, 466, 614.4],
[new Date(2014, 10, 1), 152, 938, 522, 998, 450, 614.0],
[new Date(2014, 11, 1), 164, 940, 542, 990, 454, 614.1],
[new Date(2015, 2, 1), 166, 942, 562, 988, 458, 614.2],
[new Date(2015, 3, 1), 158, 944, 582, 980, 462, 614.3],
[new Date(2015, 4, 1), 160, 946, 652, 968, 466, 614.4],
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {
title: 'Year',
format: 'yyyy',
ticks: [
new Date(2013, 0, 1),
new Date(2014, 0, 1),
new Date(2015, 0, 1),
new Date(2016, 0, 1)
]
},
bar: {
width: 100
},
seriesType: 'bars',
series: {5: {type: 'line'}}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Issue with displaying Google Charts

This is my first day of exploring google charts, but it is not displaying the line chart. It is infact not showing anything.
Here is my code:
<html>
<head>
<style>
<%# include file="demoGraph.css"%>
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
[Jan, 700, 1200, 800],
[Feb, 1000, 275, 1800],
[Mar, 1250, 220, 1500],
[Apr, 1100, 400, 600],
[May, 1900, 250, 1200],
[Jun, 2000, 360, 1000],
[Jul, 1500, 500, 1000],
[Aug, 1300, 250, 1000],
[Sep, 1700, 500, 1000],
[Oct, 1200, 150, 525],
[Nov, 1000, 250, 625],
[Dec, 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>
But on the web page its not displaying anything. Well according to them it should show graph, but its not. Could someone point what I'am missing ?

Here is a working example.
In your code the months(Jan, Feb, ..) needs to be enclosed in ", else it will be treated as a variable which was not defined and error will be thrown.
Datatype for the column(month) should be string. Change data.addColumn('number', 'Months'); to data.addColumn('string', 'Months');
<html>
<head>
<style>
<%# include file="demoGraph.css"%>
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>

include the query if needed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
and change data.addColumn('number', 'Months'); to data.addColumn('string', 'Months');
also change
data.addRows([
[Jan, 700, 1200, 800],
[Feb, 1000, 275, 1800],
[Mar, 1250, 220, 1500],
[Apr, 1100, 400, 600],
[May, 1900, 250, 1200],
[Jun, 2000, 360, 1000],
[Jul, 1500, 500, 1000],
[Aug, 1300, 250, 1000],
[Sep, 1700, 500, 1000],
[Oct, 1200, 150, 525],
[Nov, 1000, 250, 625],
[Dec, 1920, 280, 700]
]);
To
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
here is the HTML
<html>
<head>
<style>
<%# include file="demoGraph.css"%>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>

In you example you did not defined the your month variables. Since you defined your first row as number data.addColumn('number', 'Months'); they need to be in a number format.
For Example: https://jsfiddle.net/56jekrec/1/

Google Charts how to hide dynamically created series and show only one in legend?

I use combochart and my series are created dynamically from sql database. I'd like to hide all of them but show only the first one which represents my goal line. How can I achieve that? (I know the number of series after I build array for DataTabele and probably I'd have to build some array for series)
var options = {
legend: {position: "none"},
isStacked: true,
seriesType: 'bars',
series: {
1: {
type: 'line',
color: 'red',
}
},
};

When you know the index of the column which should be visible in the legend you may dynamically create the series-option based on the columns.
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Average', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda'],
['2004/05', 614.6, 165, 938, 522, 998, 450],
['2005/06', 682, 135, 1120, 599, 1268, 288],
['2006/07', 623, 157, 1167, 587, 807, 397],
['2007/08', 609.4, 139, 1110, 615, 968, 215],
['2008/09', 569.6, 136, 691, 629, 1026, 366]
]);
var options = {
isStacked: true,
legend: {position: "top"},
seriesType: 'bars',
series: (function(d,i){
var s={},c=d.getNumberOfColumns();
for(var k=0;k<c;++k){
s[k]=(k===i)
?{type:'line',color: 'red'}
:{visibleInLegend:false}
}
return s;
})(data,//the dataTable
0//index of the column which should be visible in the legend
)
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" ></div>

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 button.onclick function and the button.value. I have attached the initial code(2 data sets) and the modified code (5 data sets).
Initial View:
<!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>
Modified View:
<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>
The modified view only displays rowData1 and rowData2. I was trying to fiddle around to get it to display rowData1, rowData2, rowData3, rowData4 and rowData5.
Just to clarify,each rowData represents a faculty in a unversity and the values inside each row represents the schools in each faculty.
The faculties are as follows:
rowData1 - Commerce, Law & Management,
rowData2 - Engineering & the Built Environment,
rowData3 - Health Sciences,
rowData4 - Humanities,
rowData5 - Science.
as you may see the faculties for rowsData1 and rowData2 have been implemented.

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

Categories

Resources