Graficos

by Luiz Vargas

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
  <div class="row">
      <div>
        <h4 class="encab">
          Ranking Banqueros Personales
        </h4>
      </div>
      <div class="col-md-12" style="border:2px solid maroon">
        <div class="col-md-12" style="border:2px solid red">
          <div class="encab">Nacional</div>
          <div id="idNacional" style="border:2px solid purple"></div>
        </div>
      </div>
      <div class="col-md-12" style="border:2px solid maroon">
        <div class="col-md-6" style="border:2px solid yellow">
          <div class="encab">Dvisión</div>
          <div id="idDivision" style="border:2px solid green"></div>
        </div>
        <div class="col-md-6" style="border:2px solid blue">
          <div class="encab">Zona</div>
          <div id="idZona" style="border:2px solid gray"></div>
        </div>
      </div>
    </div>

CSS

.encab{
    text-align:center;
  }

JavaScript

google.charts.load('current', {'packages':['annotationchart'], 'callback':pruebas});
      $(window).resize(function(){
        pruebas();
       });
        function pruebas(){
          var nm=[
            ['idNacional', ['#043263', '#E9E9E9']],
              ['idDivision', ['#004481', '#E9E9E9']],
              ['idZona', ['#1464A5', '#E9E9E9']]
          ];

          //Insertar Datas al Arreglo data:
          var data1 = [[['Nacional','Valor'],['1765/2532',12],['',100]],
                        [['Division','Valor'],['107/1210',44],['',100]],
                        [['Zona','Valor'],['16/232',5],['',100]]
          ];

          //Insertar Datas al arreglo nm:
          nm[0].push(data1[0]);
          nm[1].push(data1[1]);
          nm[2].push(data1[2]);
          console.log(nm);
          //Aqui Empieza Google Charts 

          for(var i in nm){
            var data = google.visualization.arrayToDataTable([
              data1[i][0],
              data1[i][1],
              data1[i][2],   
            ]);
            var options = {
              pieHole: 0.65,
              colors:nm[i][1],
              pieSliceText: 'none',
              pieStartAngle: 0,
              pieSliceTextStyle:'none',
              legend:'none',
              tooltip: { trigger: 'none' }
            };
              var chart = new google.visualization.PieChart(document.getElementById(nm[i][0]));
              chart.draw(data, options);
          }
          
        }
        //Termina Google Charts