		<!-- Consultas SQL -->
		<?php

			include 'SQL/conexion.php';
			
			$sql = 'SELECT * FROM respuesta INNER JOIN Inicial ON clave_escuela=CV_CCT';
			$result = $conn->query($sql);
			$Inicial = $result->num_rows;

			$sql = 'SELECT * FROM respuesta INNER JOIN Media ON clave_escuela=CV_CCT';
			$result = $conn->query($sql);
			$Media = $result->num_rows;
			
			$sql = 'SELECT * FROM respuesta INNER JOIN Preescolar ON clave_escuela=CV_CCT';
			$result = $conn->query($sql);
			$Preescolar = $result->num_rows;
			
			$sql = 'SELECT * FROM respuesta INNER JOIN Primaria ON clave_escuela=CV_CCT';
			$result = $conn->query($sql);
			$Primaria = $result->num_rows;
			
			$sql = 'SELECT * FROM respuesta INNER JOIN Secundaria ON clave_escuela=CV_CCT';
			$result = $conn->query($sql);
			$Secundaria = $result->num_rows;

			$sql = 'SELECT * FROM respuesta INNER JOIN Superior ON clave_escuela=CV_CCT WHERE clave_escuela != "99MSU99999"';
			$result = $conn->query($sql);
			$Superior = $result->num_rows;

			$sql = 'SELECT * FROM respuesta INNER JOIN Superior ON clave_escuela=CV_CCT WHERE clave_escuela = "99MSU99999"';
			$result = $conn->query($sql);
			$Otros = $result->num_rows;
			
			$Total = $Otros + $Superior + $Secundaria + $Primaria + $Preescolar + $Media + $Inicial;
			
			echo '<script>var myPCLabels = ["Inicial", "Preescolar", "Primaria", "Secundaria", "Media", "Superior", "Otros"];';
			echo 'var myPCData = ['.$Inicial.', '.$Preescolar.', '.$Primaria.', '.$Secundaria.', '.$Media.', '.$Superior.', '.$Otros.'];</script>';
			
			$Otros = (int)floor(100 * $Otros / $Total);
			$Superior = (int)floor(100 * $Superior / $Total);
			$Secundaria = (int)floor(100 * $Secundaria / $Total);
			$Primaria = (int)floor(100 * $Primaria / $Total);
			$Preescolar = (int)floor(100 * $Preescolar / $Total);
			$Media = (int)floor(100 * $Media / $Total);
			$Inicial = (int)floor(100 * $Inicial / $Total);
			
			$Otros = 100 - ($Superior + $Secundaria + $Primaria + $Preescolar + $Media + $Inicial);
			
			$Espa=0;
			$Maya=0;
            $Total=0;
            $Last="";

			$sql = 'SELECT * FROM respuesta;';
			$result = $conn->query($sql);

			for($A=1; $A<100; $A++)
				$ageArray[$A]=0;
			
			foreach ($result as $respuesta) {
                $Total++;
				if($respuesta["idioma"]=="Español")
					$Espa++;
				else
					$Maya++;
				$ageArray[$respuesta["edad"]]++;
				$last = $respuesta["fecha"];
			}
			
			$Espa = 100 * $Espa / $Total;
			$Maya = 100 * $Maya / $Total;
			
			$Mas = 0;
			$Fem = 0;
			
			$sql = "SELECT Nombres.Sexo as Sex, COUNT(*) as Cuenta from respuesta inner join Nombres on SUBSTRING_INDEX(TRIM(respuesta.nombre), ' ', 1) = Nombres.Nombre GROUP BY Nombres.sexo;";
			$result = $conn->query($sql);
			foreach ($result as $respuesta) {
				if($respuesta["Sex"]=="Femenino"){
					$Fem = $respuesta["Cuenta"];
				}else if($respuesta["Sex"]=="Masculino"){
					$Mas = $respuesta["Cuenta"];
				}
			}
			
			$SexTotal = ($Fem + $Mas);
			$Fem = 100 * $Fem / $SexTotal;
			$Mas = 100 * $Mas / $SexTotal;

			$now  = new DateTime();
			$old  = DateTime::createFromFormat('Y-m-d H:i:s', $last);
			$lapse = $now->diff($old);
			$mLast="Hace ";
			if($lapse->y>0) if($lapse->y==1) $mLast.=$lapse->y." año, "; else $mLast.=$lapse->y." años, ";
			if($lapse->m>0) if($lapse->m==1) $mLast.=$lapse->m." mes, "; else $mLast.=$lapse->m." meses, ";
			if($lapse->d>0) if($lapse->d==1) $mLast.=$lapse->d." día, "; else $mLast.=$lapse->d." días, ";
			if($lapse->h>0) if($lapse->h==1) $mLast.=$lapse->h." hora, "; else $mLast.=$lapse->h." horas, ";
			if($lapse->i>0) if($lapse->i==1) $mLast.=$lapse->i." minuto, "; else $mLast.=$lapse->i." minutos, ";
			if($lapse->s==1) $mLast.=$lapse->s." segundo."; else $mLast.=$lapse->s." segundos.";


			$sql = "select DATE_FORMAT(fecha, '%d-%m-%Y') as Date, COUNT(*) as Count from respuesta GROUP BY DATE_FORMAT(fecha, '%Y%m%d');";
			$result = $conn->query($sql);
			
			if (!empty($result)){
				$myACLabels = "var myACLabels = [";
				$myACData = "var myACData = [";
				$Counter=0;
				foreach ($result as $respuesta){
					$myACLabels .= '"'.$respuesta["Date"].'"';
					$myACData .= $respuesta["Count"];
					if($Counter++ < $result->num_rows-1){
						$myACLabels .= ", ";
						$myACData .= ", ";
					}
			
				}
			
				$myACLabels .= "];";
				$myACData .= "];";			

				echo '<script>'.$myACLabels.' '.$myACData.' </script>';
			}
			
		?>

					<!-- Page Heading -->
					<div class="d-sm-flex align-items-center justify-content-between mb-4">
						<h1 class="h3 mb-0 text-gray-800"><i class="fas fa-fw fa-tachometer-alt"></i> Proyect Overview</h1>
						<a target="_blanl" href="#ov" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" onclick="UpdatePage('overview.php', true);">
							<i class="fas fa-sync-alt fa-sm text-white-50"></i> 
							Update Stats
						</a>
					</div>

					<!-- Content Row -->
					<div class="row">

						<!-- Total respuestas -->
						<div class="col-xl-3 col-md-6 mb-4">
							<div class="card border-left-primary shadow h-100 py-2">
								<div class="card-body">
									<div class="row no-gutters align-items-center">
										<div class="col mr-2">
											<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total respuestas</div>
											<div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo $Total; ?></div>
										</div>
										<div class="col-auto">
											<i class="fas fa-file-signature fa-2x text-gray-300"></i>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Sexo -->
						<div class="col-xl-3 col-md-6 mb-4">
							<div class="card border-left-info shadow h-100 py-2">
								<div class="card-body">
									<div class="row no-gutters align-items-center">
										<div class="col mr-2">
											<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Sexo (Guess by Name)</div>
											<div class="row no-gutters align-items-center flex-nowrap">
												<div class="col-auto">
													<div id="vaMA" class="mb-0 mr-1 font-weight-bold text-gray-800"><?php printf("%05.2f", $Mas); ?></div>
												</div>
												<div class="col">
													<div class="progress progress-sm mr-1">
														<div id="pbMA" class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
													</div>													
												</div>
												<i class="fas fa-male fa-2x mr-2"></i>
												<div class="col-auto">
													<div id="vaFE" class="mb-0 mr-1 font-weight-bold text-gray-800"><?php printf("%05.2f", $Fem); ?></div>
												</div>
												<div class="col">
													<div class="progress progress-sm mr-1">
														<div id="pbFE"class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
													</div>
												</div>
												<i class="fas fa-female fa-2x mr-1"></i>
												<script>
													document.getElementById("pbMA").style.width = <?php echo "\"".number_format($Mas,0)."%\""; ?>;
													document.getElementById("pbFE").style.width = <?php echo "\"".number_format($Fem,0)."%\""; ?>;													
												</script>
												
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
						
						<!-- Idioma -->
						<div class="col-xl-3 col-md-6 mb-4">
							<div class="card border-left-success shadow h-100 py-2">
								<div class="card-body">
									<div class="row no-gutters align-items-center">
										<div class="col mr-2">
											<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Idioma</div>
											<div class="row no-gutters align-items-center flex-nowrap">
												<div class="text-xs" style="width:30px;">Esp.</div>
												<div class="col">
													<div class="ml-0 progress progress-sm mr-1">
														<div id="pbEs" class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
													</div>													
												</div>
												<div class="col-auto">													
													<div class="mb-0 mr-1 font-weight-bold text-gray-800"><?php printf("%05.2f", $Espa); ?>%</div>
												</div>												
												<div class="text-xs" style="width:30px;">Maya</div>																								
												<div class="col">
													<div class="ml-0 progress progress-sm mr-1">
														<div id="pbMa"class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
													</div>
												</div>
												<div class="col-auto">
													<div class="mb-0 mr-1 font-weight-bold text-gray-800"><?php printf("%05.2f", $Maya); ?>%</div>
												</div>												
												<script>
													document.getElementById("pbEs").style.width = <?php echo "\"".number_format($Espa,0)."%\""; ?>;
													document.getElementById("pbMa").style.width = <?php echo "\"".number_format($Maya,0)."%\""; ?>;
												</script>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>						

						<!-- Última respuesta -->
						<div class="col-xl-3 col-md-6 mb-4">
							<div class="card border-left-warning shadow h-100 py-2">
								<div class="card-body">
									<div class="row no-gutters align-items-center">
										<div class="col mr-2">
											<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Última respuesta</div>
											<div class="mb-0 font-weight-bold text-gray-800"><?php echo $last; ?></div>
											<div class="mb-0 font-weight-bold text-xs text-gray-500"><?php echo $mLast; ?></div>
										</div>
										<div class="col-auto">
											<i class="fas fa-clock fa-2x text-gray-300"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Content Row -->

					<div class="row">

						<!-- Histograma por día -->
						<div class="col-xl-8 col-lg-7">
							<div class="card shadow mb-4">
								<!-- Card Header - Dropdown -->
								<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
									<h6 class="m-0 font-weight-bold text-primary">Participaciones por Día</h6>
									<!--div class="dropdown no-arrow">
										<a class="dropdown-toggle" href="#ov" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
										</a>
										<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
											<a class="dropdown-item" href="#ov">Maximizar</a>
										</div>
									</div-->
								</div>
								<!-- Card Body -->
								<div class="card-body">
									<div class="chart-area">
										<canvas id="myAreaChart"></canvas>
									</div>
								</div>
							</div>
						</div>

						<!-- por Nivel de Estudios -->
						<div class="col-xl-4 col-lg-5">
							<div class="card shadow mb-4">
								<!-- Card Header - Dropdown -->
								<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
									<h6 class="m-0 font-weight-bold text-primary">Participación por Nivel de Estudios</h6>									
								</div>
								<!-- Card Body -->
								<div class="card-body">
									<div class="chart-area" id="myPieChart">
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Content Row -->
					<div class="row">

						<!-- Content Column -->
						<div class="col-xl-8 col-lg-7">
							<div class="card shadow mb-4">
								<div class="card-header py-3">
									<h6 class="m-0 font-weight-bold text-primary">Participación por Municipio / Institución</h6>
								</div>
								<div class="card-body">
									<div class="chart-area" id="myPlaceChart">
									</div>
								</div>
							</div>
						</div>


						<!-- Por edad -->
						<div class="col-xl-4 col-lg-5">
							<div class="card shadow mb-4">
								<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
									<h6 class="m-0 font-weight-bold text-primary">Participación por Edad</h6>									
								</div>
								<!-- Card Body -->
								<div class="card-body">
									<div class="chart-area" id="myAgeChart">
									</div>
								</div>
							</div>
						</div>
					</div>


<script>

		function CreatCharts(){
			CrateDayChart();
			CreateLvlChart();
			CreateAgeChart();
			CreatePlaceChart();
		}

			function CrateDayChart() {



// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

function number_format(number, decimals, dec_point, thousands_sep) {
  // *     example: number_format(1234.56, 2, ',', ' ');
  // *     return: '1 234,56'
  number = (number + '').replace(',', '').replace(' ', '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: myACLabels,
    datasets: [{
      label: "Respuestas",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: myACData,
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 5,
          padding: 10,
          // Include a dollar sign in the ticks
          callback: function(value, index, values) {
            return number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
        }
      }
    }
  }
});		
		
		
			
			
			}		



			function CreatePlaceChart() {
			
				am4core.useTheme(am4themes_animated);

				data = {
				
				<?php
				
					$sql = 'SELECT * from (SELECT e.NOMBRECT as Escuela, e.CV_CCT as Clave, e.MUNICIPIO as Municipio, COUNT(e.CV_CCT) as Cuenta FROM respuesta, Superior e WHERE respuesta.clave_escuela = e.CV_CCT  GROUP BY e.CV_CCT UNION SELECT e.NOMBRECT, e.CV_CCT, e.MUNICIPIO, COUNT(e.CV_CCT)  AS count FROM respuesta, Media e WHERE respuesta.clave_escuela = e.CV_CCT  GROUP BY e.CV_CCT UNION SELECT e.NOMBRECT, e.CV_CCT, e.C_NOM_MUN, COUNT(e.CV_CCT)  AS count FROM respuesta, Inicial e WHERE respuesta.clave_escuela = e.CV_CCT GROUP BY e.CV_CCT UNION SELECT e.NOMBRECT, e.CV_CCT, e.C_NOM_MUN, COUNT(e.CV_CCT)  AS count FROM respuesta, Preescolar e WHERE respuesta.clave_escuela = e.CV_CCT GROUP BY e.CV_CCT UNION SELECT e.NOMBRECT, e.CV_CCT, e.C_NOM_MUN, COUNT(e.CV_CCT)  AS count FROM respuesta, Primaria e WHERE respuesta.clave_escuela = e.CV_CCT GROUP BY e.CV_CCT UNION SELECT e.NOMBRECT, e.CV_CCT, e.C_NOM_MUN, COUNT(e.CV_CCT)  AS count FROM respuesta, Secundaria e WHERE respuesta.clave_escuela = e.CV_CCT GROUP BY e.CV_CCT) a order by Municipio';
					$result = $conn->query($sql);

					if (!empty($result)) {
						$Counter = 0;
						$lMun = "";
						foreach ($result as $respuesta){
						
							if($lMun != $respuesta["Municipio"]){
								if($lMun != "") echo '},';
								echo '"'.$respuesta["Municipio"].'": { "'.$respuesta["Escuela"].'": '.$respuesta["Cuenta"];
							}else{
								echo ', "'.$respuesta["Escuela"].'": '.$respuesta["Cuenta"];							
							}
							
							$lMun = $respuesta["Municipio"];

						}
						
						echo '}';
					}

				?>
				};


				function processData(data) {

					  var treeData = [];

					  for (var muni in data) {
						var muniData = { name: muni, children: [] };
						var muniTotal = 0;
						for (var school in data[muni]) {
						  muniTotal += data[muni][school];
						}

						for (var school in data[muni]) {
							muniData.children.push({ name: school, count: data[muni][school] });
						}
						treeData.push(muniData);
					  }
					  
					  return treeData;
				}

					// create chart
					var chart = am4core.create("myPlaceChart", am4charts.TreeMap);
					chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

					// only one level visible initially
					chart.maxLevels = 1;
					// define data fields
					chart.dataFields.value = "count";
					chart.dataFields.name = "name";
					chart.dataFields.children = "children";
					chart.homeText = "Municipio";

					// enable navigation
					chart.navigationBar = new am4charts.NavigationBar();

					// level 0 series template
					var level0SeriesTemplate = chart.seriesTemplates.create("0");
					level0SeriesTemplate.tooltip.dy = - 15;
					level0SeriesTemplate.tooltip.pointerOrientation = "vertical";
					level0SeriesTemplate.tooltip.fontSize = 10;



					// create hover state
					var columnTemplate = level0SeriesTemplate.columns.template;
					var hoverState = columnTemplate.states.create("hover");

					// darken
					hoverState.adapter.add("fill", function (fill, target) {
					  if (fill instanceof am4core.Color) {
						return am4core.color(am4core.colors.brighten(fill.rgb, -0.2));
					  }
					  return fill;
					})


					var bullet0 = level0SeriesTemplate.bullets.push(new am4charts.LabelBullet());
					bullet0.locationX = 0.5;
					bullet0.locationY = 0.5;
					bullet0.label.text = "{name} ({value})";
					bullet0.label.fill = am4core.color("#ffffff");
					bullet0.label.fontSize = 10;
					
					// level1 series template
					var level1SeriesTemplate = chart.seriesTemplates.create("1");
					level1SeriesTemplate.tooltip.dy = - 15;
					level1SeriesTemplate.tooltip.pointerOrientation = "vertical";
					level1SeriesTemplate.tooltip.fontSize = 12;					

					var bullet1 = level1SeriesTemplate.bullets.push(new am4charts.LabelBullet());
					bullet1.locationX = 0.5;
					bullet1.locationY = 0.5;
					bullet1.label.text = "{name} ({value})";
					bullet1.label.fill = am4core.color("#ffffff");
					bullet1.label.fontSize = 10;

					chart.data = processData(data);
					
			}

		
		
			function CreateAgeChart() {
			
				am4core.useTheme(am4themes_material);			
				am4core.useTheme(am4themes_animated);

				var chart = am4core.create("myAgeChart", am4charts.RadarChart);
				chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

				chart.data = [
				
				<?php
					$start=false;
					for($A=1; $A<=99; $A++){
						if($ageArray[$A+1]) $start=true;
						if($start){
							echo '{"age": "'.$A.'", "value":';
							printf("%3.1f", (100*$ageArray[$A]/$Total));
							echo '}';
							if($A<99) echo ',';
							$rest=0;
							for($B=$A; $B<=99; $B++){
							 if($ageArray[$B]>0) $rest++;
							}
							if($rest==0) break;
						}
					}
				?>
				];

				chart.radius = am4core.percent(100);
				chart.innerRadius = am4core.percent(50);
				chart.startAngle = 185;
				chart.endAngle = 355; 	
				
				var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
				valueAxis.renderer.grid.template.strokeOpacity = 0.1;
				valueAxis.renderer.labels.template.disabled = true;
				valueAxis.strictMinMax = true;

				// Create axes
				var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
				categoryAxis.dataFields.category = "age";
				categoryAxis.renderer.grid.template.location = 0;
				categoryAxis.renderer.minGridDistance = 60;
				categoryAxis.tooltip.disabled = true;
				categoryAxis.renderer.minHeight = 110;
				categoryAxis.renderer.grid.template.disabled = true;
				//categoryAxis.renderer.labels.template.disabled = true;
				let labelTemplate = categoryAxis.renderer.labels.template;
				labelTemplate.radius = am4core.percent(-60);
				labelTemplate.location = 0.5;
				labelTemplate.relativeRotation = 90;
				labelTemplate.fontSize = 10;

				var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
				valueAxis.renderer.grid.template.disabled = true;
				valueAxis.renderer.labels.template.disabled = true;
				valueAxis.tooltip.disabled = true;

				// Create series
				var series = chart.series.push(new am4charts.RadarColumnSeries());
				series.sequencedInterpolation = true;
				series.dataFields.valueY = "value";
				series.dataFields.categoryX = "age";
				series.columns.template.strokeWidth = 0;
				series.tooltipText = "{age} años: [bold]{valueY}%[/]";;
				series.columns.template.radarColumn.cornerRadius = 10;
				series.columns.template.radarColumn.innerCornerRadius = 0;

				series.tooltip.pointerOrientation = "vertical";

				// on hover, make corner radiuses bigger
				let hoverState = series.columns.template.radarColumn.states.create("hover");
				hoverState.properties.cornerRadius = 0;
				hoverState.properties.fillOpacity = 1;


				series.columns.template.adapter.add("fill", function(fill, target) {
				  return chart.colors.getIndex(target.dataItem.index);
				})

				// Cursor
				chart.cursor = new am4charts.RadarCursor();
				chart.cursor.innerRadius = am4core.percent(50);
				chart.cursor.lineY.disabled = true;
				chart.cursor.behavior = "none";


			}

		

		function CreateLvlChart(){

				am4core.useTheme(am4themes_animated);
				am4core.useTheme(am4themes_dataviz);

				var chart = am4core.create("myPieChart", am4charts.RadarChart);
				chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

				chart.data = [{
					"name": "Otros",
					"value": <?php echo $Otros; ?>,
					"full": 100
				}, {
					"name": "Superior",
					"value": <?php echo $Superior; ?>,
					"full": 100
				}, {
					"name": "Media",
					"value": <?php echo $Media; ?>,
					"full": 100
				}, {
					"name": "Secundaria",
					"value": <?php echo $Secundaria; ?>,
					"full": 100
				}, {
					"name": "Primaria",
					"value": <?php echo $Primaria; ?>,
					"full": 100
				}, {
					"name": "Preescolar",
					"value": <?php echo $Preescolar; ?>,
					"full": 100
				}, {
					"name": "Inicial",
					"value": <?php echo $Inicial; ?>,
					"full": 100
				}];

				// Make chart not full circle
				chart.startAngle = -95;
				chart.endAngle = 185;
				chart.innerRadius = am4core.percent(20);

				// Set number format
				chart.numberFormatter.numberFormat = "#.#'%'";

				// Create axes
				var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
				categoryAxis.dataFields.category = "name";
				categoryAxis.renderer.grid.template.location = 0;
				categoryAxis.renderer.grid.template.strokeOpacity = 0;
				categoryAxis.renderer.labels.template.horizontalCenter = "right";
				categoryAxis.renderer.labels.template.fontWeight = 500;
                categoryAxis.renderer.labels.template.fontSize = 12;
				categoryAxis.renderer.labels.template.adapter.add("fill", function(fill, target) {
				  return (target.dataItem.index >= 0) ? chart.colors.getIndex(target.dataItem.index) : fill;
				});
				categoryAxis.renderer.minGridDistance = 5;

				var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
				valueAxis.renderer.grid.template.strokeOpacity = 0;
				valueAxis.min = 0;
				valueAxis.max = 100;
				valueAxis.strictMinMax = true;

				// Create series
				var series1 = chart.series.push(new am4charts.RadarColumnSeries());
				series1.dataFields.valueX = "full";
				series1.dataFields.categoryY = "name";
				series1.clustered = false;
				series1.columns.template.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
				series1.columns.template.fillOpacity = 0.08;
				series1.columns.template.cornerRadiusTopLeft = 20;
				series1.columns.template.strokeWidth = 0;
				series1.columns.template.radarColumn.cornerRadius = 20;
				series1.defaultState.transitionDuration = 250;

				var series2 = chart.series.push(new am4charts.RadarColumnSeries());
				series2.dataFields.valueX = "value";
				series2.dataFields.categoryY = "name";
				series2.clustered = false;
				series2.columns.template.strokeWidth = 0;
				series2.columns.template.tooltipText = "{name}: [bold]{value}[/]";
				series2.columns.template.radarColumn.cornerRadius = 20;
				series2.defaultState.transitionDuration = 500;

				series2.columns.template.adapter.add("fill", function(fill, target) {
				  return chart.colors.getIndex(target.dataItem.index);
				});

				// Add cursor
				chart.cursor = new am4charts.RadarCursor();
				chart.cursor.behavior = "none";
				
				//setTimeout(function(){updateChart(chart)}, 600);

		}
		
		
		function updateChart(Chart){
		
					Chart.data[0].value=<?php echo $Otros; ?>;
					Chart.data[1].value=<?php echo $Superior; ?>;
					Chart.data[2].value=<?php echo $Media; ?>;
					Chart.data[3].value=<?php echo $Secundaria; ?>;
					Chart.data[4].value=<?php echo $Primaria; ?>;
					Chart.data[5].value=<?php echo $Preescolar; ?>;
					Chart.data[6].value=<?php echo $Inicial; ?>;
					Chart.invalidateRawData();
		}


		CreatCharts();
		
</script>	

