<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="point">
</div>
<script>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'Score'],
['Albert', 90],
['Alex', 75],
['Bailey', 65],
['Bethany', 98],
['Brooke', 68],
['Brenda', 50],
['Becky', 58],
['Charlotte', 59],
['Caroline', 92],
['Cassandra', 80],
['Cynthia', 85],
['Dana', 89],
['Danessa', 93],
['Emmanuel', 42],
['Evan', 78],
['Fabian', 94],
['Fabio', 61],
['Fabrice', 63],
['Fachtna', 97],
['George', 64],
['Gregory', 73],
['Garrett', 75.50],
['Haley', 72.25],
['Helen', 73.75],
['Joseph', 78.50],
['Justin', 99],
['Kaapro', 93.50],
['Kace', 78.25]
]);
var options = {
title: 'Marks obtained by Students',
height: 400,
legend: {
position: 'none'
},
histogram: {
bucketSize: 5
}
};
var chart = new google.visualization.Histogram(document.getElementById('point'));
chart.draw(data, options);
}
</script> </body>
</html>