Menu
Hello!
I need some help in understanding how to add percentages to my bar graph.
Can someone please tell me how this can be done? I get the number rates, but I would like the percentages as well.
Here is my code:
[code=html]<html>
<head>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
</head>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“corechart”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[“Race”, “Number”, { role: “style” } ],
[“African American”, 2411,”#7D110C”],
[“Hispanic/Latino”, 1076, “#82786F”],
[“Asian/American”, 735, “#7D110C”],
[“Two or More Races”, 692, “#82786F”],
[“International Students”, 684, “#7D110C”],
[“American Indian/Alaskan Native”, 28, “#82786F”],
[“Native Hawaiian/Pacific Islander”, 9, “color: #7D110C”]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: “stringify”,
sourceColumn: 1,
type: “string”,
role: “annotation” },
2]);
var options = {
title: “Ethnically Diverse Undergraduates”,
width: 1200,
height: 400,
bar: {groupWidth: “65%”},
legend: { position: “none” },
};
var chart = new google.visualization.ColumnChart(document.getElementById(“columnchart_values”));
chart.draw(view, options);
}
</script>
<script>
google.load(“visualization”, “1”, {packages:[“corechart”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[“Race”, “Number”, { role: “style” } ],
[“African American”, 2411,”#7D110C”],
[“Hispanic/Latino”, 1076, “#82786F”],
[“Asian/American”, 735, “#7D110C”],
[“Two or More Races”, 692, “#82786F”],
[“International Students”, 684, “#7D110C”],
[“American Indian/Alaskan Native”, 28, “#82786F”],
[“Native Hawaiian/Pacific Islander”, 9, “color: #7D110C”]
]);
var options = {
title: ‘Ethnically Diverse Undergraduates’,
legend: ‘none’
};
var chart = new google.visualization.PieChart(document.getElementById(‘piechart2’));
chart.draw(data, options);
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
total += data.getValue(i, 1);
}
var legend = document.getElementById(“legend”);
var legItem = [];
var colors = [‘#7D110C’, ‘#82786F’, ‘#7D110C’, ‘#82786F’, ‘#7D110C’, ‘#82786F’, ‘#7D110C’];
for (var i = 0; i < data.getNumberOfRows(); i++) {
var label = data.getValue(i, 0);
var value = data.getValue(i, 1);
var percent = Number(100 * value / total).toFixed(1);
// This will create legend list for the display
legItem[i] = document.createElement(‘li’);
legItem[i].id = ‘legend_’ + data.getValue(i, 0);
legItem[i].innerHTML = ‘<div class=”legendMarker”> <span style=”color:’ + colors[i] + ‘;”>’ + label + ‘: ‘ + value + ‘(‘ + percent + ‘%)</span></div>’;
legend.appendChild(legItem[i]);
}
}
</script>
<body>
<div id=”columnchart_values” style=”width: 1500px; height: 300px;”></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<style>
#piechart2 {
width: 700px;
height: 400px;
position: relative;
float: left;
}
#legend {
margin-top: 100px;
margin-right: 50px;
}
</style>
<div id=”piechart2″></div>
<div id=”legend”></div>
</body>
</html>
Thanks!