templates/visualizaciones.html
{% load staticfiles %}
<style>
iframe{
width: 50% !important;
text-align: center;
}
</style>
<div id="visualizaciones" class="">
{# <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/bootstrap.min.css' %}" />#}
{# <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>#}
<script src="{% static 'js/Chart.min.js' %}" type="text/javascript"></script>
<style type="text/css">
.tab section {
text-align: center;
}
.tab h1 {text-align: center;}
.tab section div {
margin-left: 24%;
}
</style>
<div class="ui pointing secondary menu">
<a class="item active" data-tab="first">Beneficiados Reparación</a>
<a id="dos" class="item" data-tab="second">Beneficiados Construcción</a>
<a id="tres" class="item" data-tab="third">Construcción Sanitarios</a>
<a class="item" data-tab="four">Reparación Sanitarios</a>
<a class="item" data-tab="five">Abastecimiento de Agua</a>
<a class="item" data-tab="six">Espacios Solicitados</a>
</div>
<div class="ui tab segment active" data-tab="first" >
<section>
<h2>Cantidad de Beneficiados por reparación/adecuación de espacios</h2>
<h3> Cantidad de Beneficiados</h3>
<h3>Total:372,182</h3>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</section>
<section>
<h2>Cantidad de Espacios que necesitan Reparación</h2>
<h3>Total:5,919</h3>
<div style="width: 50%">
<canvas id="canvas2" height="450" width="600"></canvas>
</div>
</section>
<section>
<h2>Cantidad de Espacios que necesitan Adecuación</h2>
<h3>Total: 1,292 </h3>
<div style="width: 50%">
<canvas id="canvas3" height="450" width="600"></canvas>
</div>
</section>
</div>
<div class="ui tab segment active" data-tab="second" id="second">
<section>
<h2>Beneficiados con la construcción de Espacios</h2>
<h3>Total:684,815</h3>
<div style="width: 50%">
<canvas id="canvas4" height="450" width="600"></canvas>
</div>
</section>
</div>
<div class="ui tab segment active" data-tab="third" id="third">
<h1>CONSTRUCCIÓN DE SANITARIOS</h1>
<section>
<h2>Sanitarios que faltan construir en todo el país</h2>
<h3>Total: 2,953 </h3>
<div style="width: 50%">
<canvas id="canvas5" height="450" width="600"></canvas>
</div>
</section>
<section>
<h2> Beneficiados con la construcción de los baños</h2>
<h3>Total: 141,611</h3>
<div style="width: 50%">
<canvas id="canvas6" height="450" width="600"></canvas>
</div>
</section>
</div>
<div class="ui tab segment active" data-tab="four" id="four">
<h1>REPARACIÓN DE SANITARIOS</h1>
<section>
<h2>Beneficiados con la reparacion de los sanitarios</h2>
<h3>Total: 234,007</h3>
<div style="width: 50%">
<canvas id="canvas7" height="450" width="600"></canvas>
</div>
</section>
<section>
<h2>Sanitarios construidos que necesitan reparación</h2>
<h3>Total: 3,603</h3>
<div style="width: 50%">
<canvas id="canvas8" height="450" width="600"></canvas>
</div>
</section>
<section>
<h2>Sanitarios construidos que necesitan adecuación</h2>
<h3>Total: 1,073</h3>
<div style="width: 50%">
<canvas id="canvas9" height="450" width="600"></canvas>
</div>
</section>
</div>
<div class="ui tab segment" data-tab="five" id="five">
<section>
<h2>Tipo de Abastecimiento de Agua</h2>
<h3>Tipo de abastecimiento de Agua según la lista de prioridades de construcción de espacios</h3>
<div style="width: 50%">
<canvas id="chart-area" width="300" height="300"/>
</div>
</section>
</div>
<div class="ui tab segment active" data-tab="six" id="six">
<section>
<h2>Espacios solicitados</h2>
<h3>Total de espacios:372,182</h3>
<div style="width: 50%">
<canvas id="canvas11" height="450" width="600"></canvas>
</div>
</section>
</div>
<script>
/* Cantidad de Beneficiados por reparación/adecuación de espacios */
var barChartData = {
labels : ["ALTO PARANA","PDTE. HAYES","ITAPUA","CENTRAL","CONCEPCION","CAPITAL","SAN PEDRO","CORDILLERA","CAAGUAZU","GUAIRA","ÑEEMBUCU","CAAZAPA","PARAGUARI","AMAMBAY","CANINDEYU","ALTO PARAGUAY","BOQUERON","MISIONES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [27055, 4493, 18487, 168008, 8105, 16494, 13783,25552,25197,3720,953,933,21390,26860,917,1482,1323,7430]
}
]
};
/*Cantidad de Espacios que necesitan Reparacion*/
var barChartData2 = {
labels : ["SAN PEDRO","ÑEEMBUCU","CAAZAPA","MISIONES","AMAMBAY","CORDILLERA","CAPITAL","CENTRAL","ITAPUA","ALTO PARAGUAY","PDTE. HAYES","CAAGUAZU","BOQUERON","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA ","CONCEPCION"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [ 440, 34,35, 91, 169, 521, 255, 1746, 323, 26, 125, 761, 26, 35, 580, 138,381, 233]
}
]
};
var barChartData3 = {
labels : ["SAN PEDRO","ÑEEMBUCU","CAAZAPA","MISIONES","AMAMBAY","CORDILLERA","CAPITAL","CENTRAL","ITAPUA","ALTO PARAGUAY","PDTE. HAYES","CAAGUAZU","BOQUERON","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA ","CONCEPCION"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [ 150, 2, 0, 26, 13, 127, 44, 487, 69, 9, 37, 32, 7, 17, 111, 6, 82, 73]
}
]
};
var barChartData4 = {
labels : ["ALTO PARANA","PDTE. HAYES","ITAPUA","CENTRAL","CONCEPCION","CAPITAL","SAN PEDRO","CORDILLERA","CAAGUAZU","GUAIRA","ÑEEMBUCU","CAAZAPA","PARAGUARI","AMAMBAY","CANINDEYU","ALTO PARAGUAY","BOQUERON","MISIONES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [ 62036,6220, 39833, 318861, 16219, 27340, 37843, 48537, 54298, 4529, 916, 3777, 39941, 12892, 4306,1505, 3268, 2494]
}
]
};
var barChartData5 = {
labels : ["SAN PEDRO","CORDILLERA","AMAMBAY","ÑEEMBUCU","CAPITAL","ITAPUA","ALTO PARAGUAY","CAAZAPA","CAAGUAZU","BOQUERON","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA","CONCEPCION","MISIONES","PDTE HAYES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [ 471, 409, 61, 16, 104, 141, 20, 52, 335, 4, 109, 544, 87, 311, 81, 102, 106]
}
]
}
var barChartData6 = {
labels : ["SAN PEDRO","CORDILLERA","AMAMBAY","ÑEEMBUCU","CAPITAL","ITAPUA","ALTO PARAGUAY","CAAZAPA","CAAGUAZU","BOQUERON","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA","CONCEPCION","MISIONES","PDTE HAYES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [15721,16369,2908,1060,10614,13486,557,2238,16877,131,4635,16651,2210,27230,5447,986,4491]
}
]
}
var barChartData7 = {
labels : ["SAN PEDRO","AMAMBAY","CORDILLERA","ÑEEMBUCU","CAPITAL","CENTRAL","CAAGUZU","ITAPUA","ALTO PARAGUAY","PDTE. HAYES","CAAZAPA","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA","CONCEPCION","MISIONES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [ 6310, 4313, 14444, 1141, 15653, 106585, 18418, 15225, 557, 1393, 1826, 1512, 12769, 3035, 19579, 5659, 5588]
}
]
}
var barChartData8 = {
labels : ["SAN PEDRO","CORDILLERA","AMAMBAY","ÑEEMBUCU","CAPITAL","CENTRAL","CAAGUZU","ITAPUA","ALTO PARAGUAY","PDTE. HAYES","CAAZAPA","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA","CONCEPCION","MISIONES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [ 199, 295, 92, 9, 153, 1148, 394, 227, 27, 43, 34, 65, 361, 96, 258, 56, 146]
}
]
}
var barChartData9 = {
labels : ["SAN PEDRO","CORDILLERA","AMAMBAY","ÑEEMBUCU","CAPITAL","CENTRAL","CAAGUZU","ITAPUA","ALTO PARAGUAY","PDTE. HAYES","CAAZAPA","CANINDEYU","PARAGUARI","GUAIRA","ALTO PARANA","CONCEPCION","MISIONES"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [28,67,19,2,49,403,24,88,12,4,10,2,151,17,97,51,49]
}
]
}
var pieData = [
{
value: 1005,
color:"#3498db",
highlight: "#2980b9",
label: "Pozo Artesiano"
},
{
value: 1033,
color: "#8e44ad",
highlight: "#9b59b6",
label: "SENASA"
},
{
value: 159,
color: "#2ecc71",
highlight: "#27ae60",
label: "Junta Saneamiento"
},
{
value: 267,
color: "#446CB3",
highlight: "#3A539B",
label: "Aguateria"
},
{
value: 53,
color: "#2C3E50",
highlight: "#336E7B",
label: "Aljibe"
},
{
value: 30,
color: "#1BA39C",
highlight: "#65C6BB",
label: "Rio/Manantial/Tajamar"
},
{
value: 853,
color: "#AEA8D3",
highlight: "#DCC6E0",
label: "ESSAP/CORPOSANA"
},
{
value: 924,
color: "#E4F1FE",
highlight: "#C5EFF7",
label: "Otros"
}
];
var barChartData11 = {
labels : ["Aulas","Laboratorio","Secretaria","Biblioteca","Direccion","Sala de Profesores","Sala de Informatica","Cocina","Comedor/Cantina","Muralla/Cercado","Polideportivo/tinglado/escenario","Porteria/deposito","CRA","Bebederos","Otros"],
datasets : [
{
fillColor : "#5b90bf",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [2101, 309, 198, 518, 514, 245, 85, 83, 85, 46, 87, 17, 29, 3, 98]
}
]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx2 = document.getElementById("canvas2").getContext("2d");
window.myBar2 = new Chart(ctx2).Bar(barChartData2, {
responsive : true
});
var ctx3 = document.getElementById("canvas3").getContext("2d");
window.myBar3 = new Chart(ctx3).Bar(barChartData3, {
responsive : true
});
var ctx4 = document.getElementById("canvas4").getContext("2d");
window.myBar4 = new Chart(ctx4).Bar(barChartData4, {
responsive : true
});
var ctx5 = document.getElementById("canvas5").getContext("2d");
window.myBar5 = new Chart(ctx5).Bar(barChartData5, {
responsive : true
});
var ctx6 = document.getElementById("canvas6").getContext("2d");
window.myBar6 = new Chart(ctx6).Bar(barChartData6, {
responsive : true
});
var ctx7 = document.getElementById("canvas7").getContext("2d");
window.myBar7 = new Chart(ctx7).Bar(barChartData7, {
responsive : true
});
var ctx8 = document.getElementById("canvas8").getContext("2d");
window.myBar8 = new Chart(ctx8).Bar(barChartData8, {
responsive : true
});
var ctx9 = document.getElementById("canvas9").getContext("2d");
window.myBar9 = new Chart(ctx9).Bar(barChartData9, {
responsive : true
});
var ctx10 = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx10).Pie(pieData);
var ctx11 = document.getElementById("canvas11").getContext("2d");
window.myBar11 = new Chart(ctx11).Bar(barChartData11, {
responsive : true
});
$( "#second" ).removeClass( "active" );
$( "#third" ).removeClass( "active" );
$( "#four" ).removeClass( "active" );
$( "#five" ).removeClass( "active" );
$( "#six" ).removeClass( "active" );
</script>
<script>
$('#visualizaciones .menu .item')
.tab({
context: $('#visualizaciones')
})
;
</script>
</div>