The web site of amarmol


    function mostarGráfico(){
      // obtener el contexto delasync function mostrarContaminantes() {
  // obtener datos de la API
  const estacion = document.getElementById("estaciones").value;
  const fecha = document.getElementById("fecha").value;
  const contaminantes = await obtenerContaminantes(estacion, fecha);

  // generar tabla de resultados
  let tabla = ;
  tabla += ;
  for (const key in contaminantes[0]) {
    tabla += ;
  }
  tabla += ;
  for (const contaminante of contaminantes) {
    tabla += ;
    for (const key in contaminante) {
      tabla += ;
    }
    tabla += ;
  }
  tabla += ${key}
${contaminante[key]};
  document.getElementById("resultado").innerHTML = tabla;

  // generar gráfico de resultados
  const etiquetas = contaminantes.map(c => c.nom_contaminant);
  const valores = contaminantes.map(c => parseFloat(c.valor));

  const grafico = new Chart(document.getElementById("grafico"), {
    type: "bar",
    data: {
      labels: etiquetas,
      datasets: [
        {
          label: "Niveles de contaminación",
          data: valores,
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          borderColor: "rgba(255, 99, 132, 1)",
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
} canvas
        var ctx = document.getElementById('grafico').getContext('2d');

        // definir los datos del gráfico
        var datos = {
          labels: ['Estación 1', 'Estación 2', 'Estación 3', 'Estación 4', 'Estación 5'],
          datasets: [{
            label: 'Nivel de contaminación',
            data: [3, 2, 4, 1, 5],
            backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff']
          }]
        };

        // crear la instancia del objeto Chart
        var grafico = new Chart(ctx, {
          type: 'bar',
          data: datos,
          options: {
            title: {
              display: true,
              text: 'Niveles de contaminación'
            },
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        });
      }//el último del mostrarGráfico()