To create a pie chart, use the following code:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ‘1.0′, {‘packages’:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(’string’, ‘Topping’);
data.addColumn(‘number’, ‘Slices’);
data.addRows([
['Correct Answer', <?php echo $correct_answer_chart; ?>],
['Incorrect Answer', <?php echo $incorrect_answer_chart; ?>],
['Pending Ansewr', <?php echo $pending_answer_chart; ?>],
['Skiped Ansewr', <?php echo $skiped_answer_chart; ?>]
]);

var options = {‘title’:'Result’,
‘width’:600,
‘height’:300,
colors: ['#00CD00', '#e0440e', '#e5e599', '#cccccc']
};

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>

The above code will generate the following image:



To create a column chart, use the following code:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1″, {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(’string’, ‘date’);
data.addColumn(‘number’, ‘Correct Answer’);
data.addColumn(‘number’, ‘Incorrect Answer’);
data.addColumn(‘number’, ‘Pending’);
data.addColumn(‘number’, ‘Skiped’);
data.addRows(<?php echo $get_exam_time; ?>);

<?php

foreach($arr_user_exam_details as $key => $value){
echo “data.setValue(“.$key.”,0,’”.$value["update_time"].”‘);”;
echo “data.setValue(“.$key.”,1,”.$value["correct_answer"].”);”;
echo “data.setValue(“.$key.”,2,”.$value["incorrect_answer"].”);”;
echo “data.setValue(“.$key.”,3,”.$value["pending_answer"].”);”;
echo “data.setValue(“.$key.”,4,”.$value["skiped_answer"].”);”;
}
?>
var chart = new google.visualization.ColumnChart(document.getElementById(‘chart’));
chart.draw(data, {width: 500, height: 240, title: ‘Over All Sheet Performance’,colors: ['#00CD00', '#e0440e', '#e5e599', '#cccccc'],
hAxis: {title: ‘Date and Performances’, titleTextStyle: {color: ‘red’}}
});
}

The above code will generate the following image:

The following code should be added to the HTML file after the above script:

<div id=”chart_div”></div>
<div id=”chart”></div>

Latest posts by Sahel Aktar

  • Share/Bookmark