<html >
<head>
<meta charset="UTF-8">
<title>Google Pie Chart</title>
</head>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts. setOnLoadCallback(drawChart);
function drawChart() {
var Json = [
{"Name":"Vignesh ","Mark":"40","class":"s4"," id":"1",},
{"Name":"Sreeragh","Mark":"50. 5","class":"s5","id":"2"},
{"Name":"Indu","Mark":"43.5"," class":"s6","id":"3"},
{"Name":"Mathew","Mark":"26.5" ,"class":"s7","id":"4"}
];
var data =new google.visualization. DataTable();
data.addColumn('string','Name' ); //specifying the column header and type
data.addColumn('number','Mark' );
data.addColumn('string',' class');
data.addColumn('number','id');
for(i=0;i<Json.length;i++){
data.addRow([Json[i].Name, parseFloat(Json[i].Mark),Json[ i].class,parseInt(Json[i].id)] ); //adding data to the datatable from json
}
var options = {
title: 'Google pie chart with dynamic value (json)',
is3D: true,
pieStartAngle: 0,
};
var chart=new google.visualization.PieChart( document.getElementById(' piechart'));
function selectHandler() { //selection method
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var id = data.getValue(selectedItem. row,3); //3 is column index of the datatable to which the data to be alerted
alert('The user selected has Id '+ id);
}
}
google.visualization.events. addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
No comments:
Post a Comment