Tech Hunt: Google pie chart with dynamic values from json response and click listener

<html >

<head>

<title>Google Pie Chart</title>

</head>

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>

</body>

</html>

Tech Hunt