Saiyine
Punto Com

Graficas espacio tiempo

2016-10-07 15:40:58

Para mis necesidades de gráficas, normalmente suelo usar Graph.js, pero el otro dia necesité la tipica gráfica de mediciones por fecha, quicir, por ejemplo, la temperatura en algunas fechas no necesariamente correlativas entre sí­, y me di cuenta de que en esta libreria las X son simples cadenas y no las separa correctamente en el tiempo. Por ejemplo, si tenemos datos del 1 de enero, el 3 enero y el 27 de octubre, te sale una gráfica con tres puntos exactamente a la misma distancia entre ellos.

O al menos, yo no he visto como hacerlo.

Así­ que estoy probando con esta, Chart Scatter, que, aunque es bastante más sosa, al menos si hace correctamente lo de las fechas.

¡Copia pega!

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="Chart.Core.js"></script>
  <script src="Chart.Scatter.js"></script>
</head>
<body>
  <canvas id="header-canvas" width="640" height="480"></canvas>
  <div id="legend"></div>

  <script>
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var data = [], ii = 0;

    var ctx = document.getElementById("header-canvas").getContext("2d");
    var myChart = new Chart(ctx).Scatter([{ label: "dataset 1", data: data }], {
      showScale: true,
      scaleShowLabels: true,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines: false,
      scaleLineWidth: 1,
      scaleLineColor: "red",
      scaleGridLineColor: "#999",
      scaleLabel: "<%=value%>Kg",
      scaleDateFormat: "mm/yyyy",
      scaleGridLineWidth: 1,
      useUtc: true,
      pointDot: false,
      scaleType: 'date',
      animation: false,
      emptyDataMessage: "chart has no data",
      scaleOverride: true,
      scaleSteps: 8,
      scaleStepWidth: 10,
      scaleStartValue: 40,
      
      xScaleOverride: false,
      xScaleSteps: 10,

      pointDot: true,
      pointDotStrokeWidth: 1,
      pointDotRadius: 4,
      pointHitDetectionRadius: 4,
      
      
      // Number - The value jump in the hard coded x scale
      xScaleStepWidth: 3600000 * 24 * 14,

      // Number - The x scale starting value
      xScaleStartValue: Date.parse("2016-02-15T03:00:00+03:00")
    });

    var punto = 0;
    
    setInterval(function () {

      var arg = Date.parse("2016-02-15T03:00:00+03:00") + ii * 24 * 3600000;

//      myChart.datasets[0].removePoint(0);
//      myChart.datasets[1].removePoint(0);

      var npunto = getRandomInt(80, 105);
      if (punto == 0)
      {
        punto = npunto;
      }
      var fpunto = (punto + npunto) / 2;
      punto = fpunto;      
      
      myChart.datasets[0].addPoint(arg, fpunto);
      myChart.update(), ii++;

    }, 3 * 1000);
    
    
    document.getElementById("legend").innerHTML = myChart.generateLegend();

  </script>
</body>
</html>

Rollos antiguos

2016-10-06 23:10:50 - Perdidas de memorias a corto plazo.

2016-10-03 23:30:51 - M31.

2016-10-02 10:59:06 - Es de eso ddd.

2016-09-28 23:35:04 - Herramientas chau chau.

2016-09-26 21:09:15 - Desmandado.

Saiyine

Selfie of meHi! Welcome to Saiyine Punto Com where I talk about anything that goes through my mind!

Puedo prometer y prometo que a la mayor brevedad aquí irá un menú o algo asín.