inegicomponentes-grafica
Version:
Componentes de visualizacion 2023 - Graficas
426 lines (406 loc) • 15.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="/datasets/caso1.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso2.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso3.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso4.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso5.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso6.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso7.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/datasets/caso8.js" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="./dist/lib/INEGIcomponentes.graficas.min.css"></script> -->
<script type="text/javascript" src="./dist/lib/INEGIcomponentes.graficas.min.js"></script>
<title>Graficas</title>
<style>
.col-6, .col-12 {
border-bottom:1px dashed #dcdcdc;
border-left:1px dashed #dcdcdc;
border-right:1px dashed #dcdcdc;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div id="root"></div>
</div>
<div class="col-12">
<h4>-> tabla de prueba con id idHtmlDatatable</h4>
<table id="idHtmlDatatable">
<thead>
<tr>
<th></th>
<th>Boys</th>
<th>Girls</th>
</tr>
</thead>
<tbody>
<tr>
<th>2016</th>
<td>30 386</td>
<td>28 504</td>
</tr>
<tr>
<th>2017</th>
<td>29 173</td>
<td>27 460</td>
</tr>
<tr>
<th>2018</th>
<td>28 430</td>
<td>26 690</td>
</tr>
<tr>
<th>2019</th>
<td>28 042</td>
<td>26 453</td>
</tr>
<tr>
<th>2020</th>
<td>27 063</td>
<td>25 916</td>
</tr>
<tr>
<th>2021</th>
<td>28 684</td>
<td>27 376</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col">
<div id="root1"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root2"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root3"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root4"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root5"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root6"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root7"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="root8"></div>
</div>
</div>
</div>
<script>
window.onload = function(){
INEGIComponentes.Graficas({
id:"root",
exe:false,
tipo:"columna",
animaciones:false,
// alto:600,
herramientas:{
mostrar:true
},
color:["#2a9d8f","#e9c46a","#457b9d","#f9844a","#9e2a2b","#f08080","#3a5a40","#f15bb5","#a3b18a","#f8961e", "#ffe66d", "#55a630", "#2b9348", "#a44a3f"],
titulo:"Caso 1",
margen_izquierdo:70,
// alto:400,
grid:{
x:true,
y:true
},
ejey:{
// formato:"S",
mostrar:true,
texto:"Población Total un elemento largo",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"Periodos un elemento de etiqueta",
posicion:"b"
},
leyenda: {
mostrar:true,
// marginTop:70,
// columnas:3,
alto:150,
},
series:{
mostrar:true,
curva:true,
puntos:true,
linea_guia_x:true,
linea_guia_y:true,
punto_guia:true,
etiquetas:{
mostrar:true
}
} ,
tooltip:{
mostrar:true,
seguir_puntero:false, // seguimiento del cursor
formato:function(d, color){
// console.log(d)
let template = '<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">'
+'<div class="toast-header">'
+'<span class="icgBoxcolor" style="background-color:'+ color +'"></span>'
+'<span><strong>'+ d.data.indicador +'</strong></span>'
+'<div><strong>Periodo:</strong> '+ d.data.periodo +'</div>'
+'</div>'
+'<div class="toast-body">'
+'<div><strong>Area:</strong> ' + d.data.area +"</div>"
+'<div><strong>Valor:</strong> ' + d.valor +"</div>"
+'</div>'
return template
}
},
dataset:caso1
// dataset:caso2
// dataset:caso22
// dataset:caso3
// dataset:caso4
// dataset:caso5
// dataset:caso6
// dataset:caso7
// dataset:caso8
});
INEGIComponentes.Graficas({
id:"root2",
exe:true,
tipo:"barra",
herramientas:{
mostrar:true
},
titulo:"Caso 2",
ejey:{
// formato:"S",
mostrar:true,
texto:"Población Total un elemento largo",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"Periodos un elemento de etiqueta",
posicion:"b"
},
leyenda: {
mostrar:true,
// marginTop:70,
// columnas:3,
alto:150,
},
tooltip:{
mostrar:false
},
dataset:caso2
});
INEGIComponentes.Graficas({
id:"root3",
exe:true,
tipo:"columna",
herramientas:{
mostrar:true
},
titulo:"Caso 3: Población Económicamente Activa",
leyenda: {
mostrar:true,
},
tooltip:{
mostrar:true
},
dataset:caso3
});
INEGIComponentes.Graficas({
id:"root4",
exe:true,
tipo:"barra",
herramientas:{
mostrar:true
},
titulo:"Caso 4: Población por sexo",
ejey:{
// formato:"S",
mostrar:true,
texto:"",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"",
posicion:"b"
},
leyenda: {
mostrar:true,
// marginTop:70,
// columnas:3,
alto:150,
},
tooltip:{
mostrar:true
},
dataset:caso4
});
INEGIComponentes.Graficas({
id:"root5",
exe:true,
tipo:"barra",
herramientas:{
mostrar:true
},
titulo:"Caso 5: Economia y PIB",
ejey:{
// formato:"S",
mostrar:true,
texto:"",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"",
posicion:"b"
},
leyenda: {
mostrar:true,
// marginTop:70,
// columnas:3,
alto:150,
},
tooltip:{
mostrar:true
},
dataset:caso5
});
INEGIComponentes.Graficas({
id:"root6",
exe:true,
tipo:"columna",
herramientas:{
mostrar:true
},
titulo:"Caso 6: PIB Trimestral",
ejey:{
// formato:"S",
mostrar:true,
texto:"",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"",
posicion:"b"
},
leyenda: {
mostrar:true,
columnas:true,
// ancho_item:100
posicion:"inferior",
},
tooltip:{
mostrar:true,
modo:"compartido" // en proceso
},
dataset:caso6
});
INEGIComponentes.Graficas({
id:"root7",
exe:false,
tipo:"piramide",
herramientas:{
mostrar:true
},
titulo:"Caso 7: Población por edad y sexo",
ejey:{
// formato:"S",
mostrar:true,
texto:"",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"",
posicion:"b"
},
leyenda: {
mostrar:true,
// marginTop:70,
// columnas:3,
alto:150,
},
tooltip:{
mostrar:true
},
dataset:caso7
});
INEGIComponentes.Graficas({
id:"root8",
exe:true,
tipo:"linea",
herramientas:{
mostrar:true
},
titulo:"Caso 7: Población por edad y sexo",
ejey:{
// formato:"S",
mostrar:true,
texto:"",
posicion:"l",
// numero_valores:3
},
ejex:{
// rotar_categorias:-40,
mostrar:true,
texto:"",
posicion:"b"
},
leyenda: {
mostrar:true,
// marginTop:70,
// columnas:3,
alto:150,
},
tooltip:{
mostrar:true
},
dataset:caso8
});
}
</script>
</body>
</html>