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>