<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var obj = JSON.parse('<?php echo json_encode($enroled_course) ?>');
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMaterial);
function drawMaterial() {
// alert(obj.toSource());
var data = new google.visualization.DataTable();
data.addColumn('string', 'Course Name');
data.addColumn('number', 'Completion Percentage');
data.addRows(20);
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var val = obj[key];
var course_percent=val.id;
var course_name=val.fullname;
data.setCell(course_name,course_percent);
//console.log(val);
}
}
/*var data = new google.visualization.DataTable();
// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');
// Add data.
data.addRows([
['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
['Bob', new Date(2007,5,1)], // More typically this would be done using a
['Alice', new Date(2006,7,16)], // formatter.
['Frank', new Date(2007,11,28)],
['Floyd', new Date(2005,3,13)],
['Fritz', new Date(2011,6,1)]
]);*/
var materialOptions = {
chart: {
title: 'Enrolled courses Details'
},
hAxis: {
title: 'Completion Percentage',
minValue: 0
},
vAxis: {
title: 'Courses'
},
bars: 'vertical'
};
var materialChart = new google.charts.Bar(document.getElementById('chart_div'));
materialChart.draw(data, materialOptions);
}
</script>
<div id="chart_div"></div>
<div class="container">
<div class="row rounded">
<div class="col-sm border">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>