<script>

$(document).ready(function(){


  $.ajax({
    url: "chart1.php",
    method: "GET",
    dataType: "json",
    success: function(data) {     
      
      var cname = [];
      var ans = [];
      

      for(var i in data) {
         cname.push( data[i].cname);
         ans.push(data[i].ans);
        
                         }
      
      var ctx = document.getElementById('mycanvas1');
      var mycanvas = new Chart(ctx, {
        type: 'bar',
        data: {
                labels:cname,
                datasets : [ {
                                label: 'Members  ',
                                backgroundColor:  'rgba(75, 192, 192, 1)',                              
                                borderColor: 'rgba(75, 200, 200, 1)',
                                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                                data: ans,
                                fill: false
                              } ]
              }
      });
    }
  });


// pier 
$.ajax({
    url: "zanalytics/chartpie.php",
    method: "GET",
    dataType: "json",
    success: function(data) {     
      
      var dname = [];
      var ans = [];
       var coloR = [];
       var coloR2 = [];

       var dynamicColors = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
         };
      

      for(var i in data) {
         dname.push( data[i].dname);
         ans.push(data[i].ans);
         coloR.push(dynamicColors());
         coloR2.push(dynamicColors());
        
                         }
      
      var ctx2 = document.getElementById('mycanvaspie');
      var mycanvaspie = new Chart(ctx2, {
        type: 'pie',
        data: {
                labels: dname,
                datasets : [ {
                                label: ' Emission  ',
                                backgroundColor:coloR,                              
                                borderColor:  coloR2,
                                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                hoverBorderColor:coloR2,
                                data: ans,
                                fill: false
                              } ]
              }
      });
    }
  });
  

// chart 3

 $.ajax({
    url: "zanalytics/chart3.php",
    method: "GET",
    dataType: "json",
    success: function(data) {     
      
      var cname = [];
      var ans = [];
      

      for(var i in data) {
         cname.push( data[i].cname);
         ans.push(data[i].ans);
        
                         }
      
      var ctx = document.getElementById('mycanvas3');
      var mycanvas = new Chart(ctx, {
        type: 'bar',
        data: {
                labels:cname,
                datasets : [ {
                                label: 'Members  ',
                                backgroundColor:  'rgba(75, 192, 192, 1)',                              
                                borderColor: 'rgba(75, 200, 200, 1)',
                                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                                data: ans,
                                fill: false
                              } ]
              }
      });
    }
  });

// chart 4

$.ajax({
    url: "zanalytics/chart4.php",
    method: "GET",
    dataType: "json",
    success: function(data) {     
      
      var dname = [];
      var ans = [];
       var coloR = [];
       var coloR2 = [];

       var dynamicColors = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
         };
      

      for(var i in data) {
         dname.push( data[i].dname);
         ans.push(data[i].ans);
         coloR.push(dynamicColors());
         coloR2.push(dynamicColors());
        
                         }
      
      var ctx2 = document.getElementById('chart4');
      var chart4 = new Chart(ctx2, {
        type: 'pie',
        data: {
                labels: dname,
                datasets : [ {
                                label: ' Emission  ',
                                backgroundColor:coloR,                              
                                borderColor:  coloR2,
                                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                hoverBorderColor:coloR2,
                                data: ans,
                                fill: false
                              } ]
              }
      });
    }
  });



  });

</script>