Skip to content

Instantly share code, notes, and snippets.

@gomezgleonardob

gomezgleonardob/grafica

Last active April 16, 2019 20:31
Show Gist options
  • Save gomezgleonardob/722d3edf3b8af2fa6e5ec18553c5e645 to your computer and use it in GitHub Desktop.
Save gomezgleonardob/722d3edf3b8af2fa6e5ec18553c5e645 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grafica
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<!--script type="text/javascript" src="/js/importa_datos.js"></script-->
<title>Comparación de calidad de agua abril</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/Chart.bundle.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>
<style>
div.example {
font-size: 80px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
.ph_entrante{
position : absolute;
left : 200px;
top : 200px;
height : 100%;
}
.ox_entrante{
position : absolute;
left : 200px;
top: 800px;
height : 100%;
}
.cond_entrante{
position : absolute;
left : 200px;
top : 1400px;
height : 100%;
}
.ph_saliente{
position : absolute;
left : 200px;
top : 2000px;
height : 100%;
}
.ox_saliente{
position : absolute;
left : 200px;
top: 2600px;
height : 100%;
}
.cond_saliente{
position : absolute;
left : 200px;
top : 3200px;
height : 100%;
}
.descargar{
position : absolute;
left : 500px;
top : 3800px;
height : 10%;
width: 300px; height: 70px;
background-color: rgb(61, 144, 219);
border-radius: .5em;
cursor: pointer;
transition: background-color 1s;
}
.descargar:hover{
background-color : rgb(218, 107, 4);
}
.descargar p{
text-align: center;
font-size: 2em;
font-weight: bold;
color: #fff;
line-height: 2.2em;
position: relative;
bottom: 30px;
}
</style>
</head>
<body>
<h1 style="font-size:4vw;" align="center">COMPARACION DE AGUA ENTRANTE/SALIENTE ABRIL</h1>
<div style="width:75%; ">
<canvas id="PH1" class="ph_entrante"></canvas>
</div>
<div style="width:75%; ">
<canvas id="OX1" class="ox_entrante"></canvas>
</div>
<div style="width:75%">
<canvas id="COND1" class="cond_entrante"></canvas>
</div>
<div style="width:75%">
<canvas id="PH2" class="ph_saliente"></canvas>
</div>
<div style="width:75%; ">
<canvas id="OX2" class="ox_saliente"></canvas>
</div>
<div style="width:75%">
<canvas id="COND2" class="cond_saliente"></canvas>
</div>
<a href="../datos/abril.csv">
<div class="descargar">
<p>Descargar Datos</p>
</div>
</a>
<script type="text/javascript">
//Seccion de adquisicion de datos desde la tabla excel
var url = "../datos/abril.csv"; //nombre del archivo del que se tomaran los datos
var requerimiento = new XMLHttpRequest(); //se manda un request al archivo de excel
requerimiento.open("GET", url, true);
requerimiento.responseType = "arraybuffer";
var val_x=[];
var val_ph1=[];
var val_oxig1=[];
var val_cond1=[];
var val_ph2=[];
var val_oxig2=[];
var val_cond2=[];
requerimiento.onload = function(e) {
var info = readData();
//console.log("x",info[0].x);
//console.log("ph1",info[0].Ph1);
//console.log("ox",info[0].Oxig1);
//console.log("cond",info[0].Cond1);
for(var i=0; i<info.length; ++i){
if(i%6===0){
val_x.push(info[i].x);
val_ph1.push(info[i].Ph1);
val_oxig1.push(info[i].Oxig1);
val_cond1.push(info[i].Cond1);
val_ph2.push(info[i].Ph2);
val_oxig2.push(info[i].Oxig2);
val_cond2.push(info[i].Cond2);
}
}
console.log("info",info);
console.log("val_x",val_x);
console.log("val_ph1",val_ph1);
console.log("val_oxig1",val_oxig1);
console.log("val_cond1",val_cond1);
console.log("val_ph2",val_ph2);
console.log("val_oxig2",val_oxig2);
console.log("val_cond2",val_cond2);
function readData(){
var arraybuffer = requerimiento.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
/* Call XLSX */
var workbook = XLSX.read(bstr, {type:"binary"});
/* DO SOMETHING WITH workbook HERE */
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
//console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
var info= XLSX.utils.sheet_to_json(worksheet,{raw:true});
return info;
}
}
requerimiento.send();
//Seccion para Graficar
//Ph de flujo de entrada
$(document).ready(function(){ //se ejecute el codigo cuando este listo
//comando de ajax para cargar datos desde un archivo csv
$.ajax({ //ajax solo se puede ejecutar desde un servidor (ejemplo localhost con xampp)
//url: 'meses.csv',
//dataType: "text",
//contentType: "charset=utf-8",
}).done(grafica); //se llama a la funcion "grafica"
function grafica(data){
var config = {
type: 'line',
data: {
//labels: ["x", datos2[0], datos3[0], datos4[0], datos5[0]],
labels: [
val_x[0],
val_x[1],
val_x[2],
val_x[3],
val_x[4],
val_x[5],
val_x[6],
val_x[7],
val_x[8],
val_x[9],
val_x[10],
val_x[11],
val_x[12],
val_x[13],
val_x[14],
val_x[15],
val_x[16],
val_x[17],
val_x[18],
val_x[19]
],
datasets: [{
label: 'PH',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
val_ph1[0],
val_ph1[1],
val_ph1[2],
val_ph1[3],
val_ph1[4],
val_ph1[5],
val_ph1[6],
val_ph1[7],
val_ph1[8],
val_ph1[9],
val_ph1[10],
val_ph1[11],
val_ph1[12],
val_ph1[13],
val_ph1[14],
val_ph1[15],
val_ph1[16],
val_ph1[17],
val_ph1[18],
val_ph1[19],
],
fill: false,
}, {
label: 'Nominal Superior',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
8.5,
],
}, {
label: 'Nominal Inferior',
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: [
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'CALIDAD ENTRANTE'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Horas'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PH'
}
}]
}
}
};
var ctx = document.getElementById('PH1').getContext('2d');
window.myLine = new Chart(ctx, config);
}
});
//Oxígeno de flujo de entrada
$(document).ready(function(){ //se ejecute el codigo cuando este listo
//comando de ajax para cargar datos desde un archivo csv
$.ajax({ //ajax solo se puede ejecutar desde un servidor (ejemplo localhost con xampp)
//url: 'meses.csv',
dataType: "text",
contentType: "charset=utf-8",
}).done(grafica); //se llama a la funcion "grafica"
function grafica(data){
var config = {
type: 'line',
data: {
//labels: ["x", datos2[0], datos3[0], datos4[0], datos5[0]],
labels: [
val_x[0],
val_x[1],
val_x[2],
val_x[3],
val_x[4],
val_x[5],
val_x[6],
val_x[7],
val_x[8],
val_x[9],
val_x[10],
val_x[11],
val_x[12],
val_x[13],
val_x[14],
val_x[15],
val_x[16],
val_x[17],
val_x[18],
val_x[19]
],
datasets: [{
label: 'Oxígeno',
fill: false,
backgroundColor: window.chartColors.purple,
borderColor: window.chartColors.purple,
data: [
val_oxig1[0],
val_oxig1[1],
val_oxig1[2],
val_oxig1[3],
val_oxig1[4],
val_oxig1[5],
val_oxig1[6],
val_oxig1[7],
val_oxig1[8],
val_oxig1[9],
val_oxig1[10],
val_oxig1[11],
val_oxig1[12],
val_oxig1[13],
val_oxig1[14],
val_oxig1[15],
val_oxig1[16],
val_oxig1[17],
val_oxig1[18],
val_oxig1[19],
],
fill: false,
}, {
label: 'Nominal Superior',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
],
}, {
label: 'Nominal Inferior',
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'CALIDAD ENTRANTE'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Horas'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'mg/L'
}
}]
}
}
};
var ctx = document.getElementById('OX1').getContext('2d');
window.myLine = new Chart(ctx, config);
}
});
//Conductividad de flujo de entrada
$(document).ready(function(){ //se ejecute el codigo cuando este listo
//comando de ajax para cargar datos desde un archivo csv
$.ajax({ //ajax solo se puede ejecutar desde un servidor (ejemplo localhost con xampp)
//url: 'meses.csv',
dataType: "text",
contentType: "charset=utf-8",
}).done(grafica); //se llama a la funcion "grafica"
function grafica(data){
var config = {
type: 'line',
data: {
//labels: ["x", datos2[0], datos3[0], datos4[0], datos5[0]],
labels: [
val_x[0],
val_x[1],
val_x[2],
val_x[3],
val_x[4],
val_x[5],
val_x[6],
val_x[7],
val_x[8],
val_x[9],
val_x[10],
val_x[11],
val_x[12],
val_x[13],
val_x[14],
val_x[15],
val_x[16],
val_x[17],
val_x[18],
val_x[19]
],
datasets: [{
label: ' Conductividad ',
fill: false,
backgroundColor: window.chartColors.yellow,
borderColor: window.chartColors.yellow,
data: [
val_cond1[0],
val_cond1[1],
val_cond1[2],
val_cond1[3],
val_cond1[4],
val_cond1[5],
val_cond1[6],
val_cond1[7],
val_cond1[8],
val_cond1[9],
val_cond1[10],
val_cond1[11],
val_cond1[12],
val_cond1[13],
val_cond1[14],
val_cond1[15],
val_cond1[16],
val_cond1[17],
val_cond1[18],
val_cond1[19],
],
fill: false,
}, {
label: 'Nominal Superior',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
1000,
],
}, {
label: 'Nominal Inferior',
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: [
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
100,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'CALIDAD ENTRANTE'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Horas'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'uSiemens'
}
}]
}
}
};
var ctx = document.getElementById('COND1').getContext('2d');
window.myLine = new Chart(ctx, config);
}
});
//PH de flujo de salida
$(document).ready(function(){ //se ejecute el codigo cuando este listo
//comando de ajax para cargar datos desde un archivo csv
$.ajax({ //ajax solo se puede ejecutar desde un servidor (ejemplo localhost con xampp)
//url: 'meses.csv',
dataType: "text",
contentType: "charset=utf-8",
}).done(grafica); //se llama a la funcion "grafica"
function grafica(data){
var config = {
type: 'line',
data: {
//labels: ["x", datos2[0], datos3[0], datos4[0], datos5[0]],
labels: [
val_x[0],
val_x[1],
val_x[2],
val_x[3],
val_x[4],
val_x[5],
val_x[6],
val_x[7],
val_x[8],
val_x[9],
val_x[10],
val_x[11],
val_x[12],
val_x[13],
val_x[14],
val_x[15],
val_x[16],
val_x[17],
val_x[18],
val_x[19]
],
datasets: [{
label: 'PH',
fill: false,
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
val_ph2[0],
val_ph2[1],
val_ph2[2],
val_ph2[3],
val_ph2[4],
val_ph2[5],
val_ph2[6],
val_ph2[7],
val_ph2[8],
val_ph2[9],
val_ph2[10],
val_ph2[11],
val_ph2[12],
val_ph2[13],
val_ph2[14],
val_ph2[15],
val_ph2[16],
val_ph2[17],
val_ph2[18],
val_ph2[19],
],
fill: false,
}, {
label: 'Nominal Superior',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
9,
],
}, {
label: 'Nominal Inferior',
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: [
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
6,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'CALIDAD SALIENTE'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Horas'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PH'
}
}]
}
}
};
var ctx = document.getElementById('PH2').getContext('2d');
window.myLine = new Chart(ctx, config);
}
});
//Oxígeno de flujo de salida
$(document).ready(function(){ //se ejecute el codigo cuando este listo
//comando de ajax para cargar datos desde un archivo csv
$.ajax({ //ajax solo se puede ejecutar desde un servidor (ejemplo localhost con xampp)
//url: 'meses.csv',
dataType: "text",
contentType: "charset=utf-8",
}).done(grafica); //se llama a la funcion "grafica"
function grafica(data){
var config = {
type: 'line',
data: {
//labels: ["x", datos2[0], datos3[0], datos4[0], datos5[0]],
labels: [
val_x[0],
val_x[1],
val_x[2],
val_x[3],
val_x[4],
val_x[5],
val_x[6],
val_x[7],
val_x[8],
val_x[9],
val_x[10],
val_x[11],
val_x[12],
val_x[13],
val_x[14],
val_x[15],
val_x[16],
val_x[17],
val_x[18],
val_x[19]
],
datasets: [{
label: 'Oxígeno',
fill: false,
backgroundColor: window.chartColors.purple,
borderColor: window.chartColors.purple,
data: [
val_oxig2[1],
val_oxig2[1],
val_oxig2[2],
val_oxig2[3],
val_oxig2[4],
val_oxig2[5],
val_oxig2[6],
val_oxig2[7],
val_oxig2[8],
val_oxig2[9],
val_oxig2[10],
val_oxig2[11],
val_oxig2[12],
val_oxig2[13],
val_oxig2[14],
val_oxig2[15],
val_oxig2[16],
val_oxig2[17],
val_oxig2[18],
val_oxig2[19],
],
fill: false,
}, {
label: 'Nominal Superior',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
4,
],
}, {
label: 'Nominal Inferior',
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: [
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
1.5,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'CALIDAD SALIENTE'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Horas'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'mg/L'
}
}]
}
}
};
var ctx = document.getElementById('OX2').getContext('2d');
window.myLine = new Chart(ctx, config);
}
});
//Conductividad de flujo de salida
$(document).ready(function(){ //se ejecute el codigo cuando este listo
//comando de ajax para cargar datos desde un archivo csv
$.ajax({ //ajax solo se puede ejecutar desde un servidor (ejemplo localhost con xampp)
//url: 'meses.csv',
dataType: "text",
contentType: "charset=utf-8",
}).done(grafica); //se llama a la funcion "grafica"
function grafica(data){
var config = {
type: 'line',
data: {
//labels: ["x", datos2[0], datos3[0], datos4[0], datos5[0]],
labels: [
val_x[0],
val_x[1],
val_x[2],
val_x[3],
val_x[4],
val_x[5],
val_x[6],
val_x[7],
val_x[8],
val_x[9],
val_x[10],
val_x[11],
val_x[12],
val_x[13],
val_x[14],
val_x[15],
val_x[16],
val_x[17],
val_x[18],
val_x[19]
],
datasets: [{
label: 'Conductividad',
fill: false,
backgroundColor: window.chartColors.yellow,
borderColor: window.chartColors.yellow,
data: [
val_cond2[1],
val_cond2[1],
val_cond2[2],
val_cond2[3],
val_cond2[4],
val_cond2[5],
val_cond2[6],
val_cond2[7],
val_cond2[8],
val_cond2[9],
val_cond2[10],
val_cond2[11],
val_cond2[12],
val_cond2[13],
val_cond2[14],
val_cond2[15],
val_cond2[16],
val_cond2[17],
val_cond2[18],
val_cond2[19],
],
fill: false,
}, {
label: 'Nominal Superior',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
1500,
],
}, {
label: 'Nominal Inferior',
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: [
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'CALIDAD DE SALIDA'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Horas'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'uSiemens'
}
}]
}
}
};
var ctx = document.getElementById('COND2').getContext('2d');
window.myLine = new Chart(ctx, config);
}
});
</script>
</body>
<footer>
<div id="footer" style="text-align:center">
<form id = "Regresar" action = "/index.html">
<input type = "submit" value = "Regresar">
</form>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment