<!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(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Subject', 'Alex', 'Blake', 'Charlie', 'Jade', 'Average'],
['Math', 100, 75, 85, 88, 87 ],
['Physics', 66, 85, 78, 98, 81.25 ],
['Chemistry', 87, 77, 95, 55, 78.5 ],
['Zoology', 77, 97, 85, 68, 81.75 ],
['Botany', 68, 89, 47, 87, 72.75 ]
]);
var options = {
title : 'Students Yearly Mark Report',
width: 600,
height: 400,
vAxis: {
title: 'Moarks Obtained'
},
hAxis: {
title: 'Subjects'
},
seriesType: 'bars',
series: {
4: {
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('point'));
chart.draw(data, options);
}
</script> </body>
</html>