<!-- 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>