Wednesday, 8 June 2016

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

<html >
  <head>
    <meta charset="UTF-8">
    <title>Google Pie Chart</title>
  </head>
  <script src='http://www.gstatic.com/charts/loader.js'></script>
  <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