Real time chart - CanvasJS

Real time Chart

by luciotappi

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>

<header>
<h2>Test</h2>
</header>

<section>
    <nav>
      <ul>
        <li><a href="#">General</a></li>
        <li><a href="#">Ajustes</a></li>
        <li><a href="#">Pagina principal</a></li>
      </ul>
    </nav>
  </section>

<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<label>Coordenada x:</label>
<label id='coordX'></label><br>
<label>Coordenada y:</label>
<label id='coordY'></label><br>
<label>Etiqueta:</label>
<label id='etiquetaOut'></label><br>
<label for ="etiqueta"> Escriba etiqueta</label>
 <input type="text" name="etiqueta" id="etiqueta">
<button id="agregarEtiqueta">Agregar etiqueta a par de puntos</button><br>
<section>
    <label for ="zoomActivado">Zoom</label>
  <input type="checkbox" name="zoomActivado" id="zoomActivado" checked >
  <label for ="tipoZoom">Tipo de zoom</label>
  <select name="tipoZoom" id="tipoZoom">
    <option value="x">Eje X</option>
    <option value="y">Eje Y</option>
    <option value="xy" selected="selected">Ejes X e Y</option>

  </select><br>
  <label for ="tipoTema">Tema</label>
  <select name="tipoTema" id="tipoTema">
    <option value="light">Claro</option>
    <option value="dark" selected="selected">Oscuro</option>
  </select>
  </section>  

    
  </body>

</html>

JavaScript

window.onload = function () {
	var dps1 = [];   //dataPoints. 
    var dps2 = [];   //dataPoints. 
var chart = new CanvasJS.Chart("chartContainer",{

    zoomEnabled:true,// Habilita la opcion de hacer zoom en el grafico
    zoomType: "xy", // La opcion por default es "x" y en ese caso no es necasiro escribir la linea
    theme: "dark2",    //Tema. Puede ser "light1", "dark1", "dark2"
    //width: 320,  // Ancho de grafico (CAMBIAR desde el <div> )
    //height: 400, // alto de grafico  (CAMBIAR desde el <div> )

	title :{
		text: "Bahia de testeo",
    fontFamily: "Montserrat",    
	},

// A continuacion se agrega el evento de hacer click sobre la leyenda en el grafico y ocultar la grafica

  legend: { 
            fontFamily: "Montserrat",  
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
 
                e.chart.render();
            }
        },

	axisX: {						
    fontFamily: "Montserrat",  
		title: "Tiempo",
        gridColor: "grey",
        gridThickness: 1,
      //  valueFormatString: "HH:mm:ss" ,
        crosshair:{
        enabled: true,
       //snapToDataPoint: true,
     }   
	},
	axisY:[
        {
          fontFamily: "Montserrat",  
            title: " Presión (PSI) ",
            gridColor: "grey",
        gridThickness: 1,
            crosshair:{
        enabled: true,
       //snapToDataPoint: true,
     }   
        },
        {
          fontFamily: "Montserrat",  
            title: " Temperatura (°C)",
            gridColor: "grey",
        gridThickness: 1,
            crosshair:{
        enabled: true,
       //snapToDataPoint: true,
     }   
        },
        {
         ...