void drawGraph() {//////////////////////////////
 String out = "";
 int k=1;// expansion de escala horizontal 
  out.reserve(12000); // el SVG completo
  char buff[850]; // las lineas a dibujar
  out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"720\" height=\"300\">\n";
  out += "<rect width=\"720\" height=\"300\" fill=\"rgb(240, 250, 240)\" stroke-width=\"1\"/>\n";
  int alto = 300; // del svg igual a declaracion <svg...
  out += "<style> <![CDATA[ text{dominant-baseline: hanging; font: 8px Verdana;}]]></style>\n";
  out += "<text>\n";

  int marca = int(float(largoH) / 24); // define numero de marcas verticales en gráfico
  int inicio = marca * (float(60 - minutoi) / 60.); // pixeles para alinear las marcas verticales con la hora real
  for (int i = inicio; i <= largoH; i = i + marca) {
    sprintf(buff, "<tspan x=\"%d\" font-weight=\"lighter\" fill=\"green\">%d</tspan>\n", k* i, int(i / marca + horai + 1) % 24); // numero ordenadas
    out += buff;
  }// fin for i para texto
  out += "</text>\n";// fin de los textos

  for (int i = inicio; i <= largoH; i = i + marca) { // lineas verticales
    sprintf(buff, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke=\"greenyellow\"/>\n", k* i, alto, k* i, 1); // verticales verdes grilla
    out += buff;
  }// fin for i de vertical

  // lineas horizontales
  sprintf(buff, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke=\"greenyellow\"/>\n", 1, alto * 3 / 4, k* largoH, alto * 3 / 4); // horizontal verde
  out += buff;
  sprintf(buff, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke=\"greenyellow\"/>\n", 1, alto / 2, k* largoH, alto / 2); // horizontalal verde
  out += buff;
  sprintf(buff, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke=\"greenyellow\"/>\n", 1, alto / 4, k* largoH, alto / 4); // horizontal verde
  out += buff;
  
  // valores texto rojo
  sprintf(buff, "<text x=\"%d\" y=\"%d\" fill=\"red\"> %2.1f </text>\n", 3, alto - 10, float(minH1 / rango1) ); // escala rojo min
  out += buff;
  sprintf(buff, "<text x=\"%d\" y=\"%d\" fill=\"red\"> %2.1f </text>\n", 5, 8, float(maxH1 / rango1) ); // escala roja max
  out += buff;
  sprintf(buff, "<text x=\"%d\" y=\"%d\" fill=\"red\"> %2.1f </text>\n", 5, alto / 2 - 8, (float(maxH1 - minH1) / 2 + float(minH1)) / rango1 ); // txt rojo medio
  out += buff;
  // valores texto azul
  sprintf(buff, "<text x=\"%d\" y=\"%d\" fill=\"blue\"> %3.2f </text>\n", k* largoH - 25, alto - 10, float(minH2 / rango2) ); // escala 2 azul min
  out += buff;
  sprintf(buff, "<text x=\"%d\" y=\"%d\" fill=\"blue\"> %3.2f </text>\n", k* largoH - 25, 6, float(maxH2 / rango2) ); // escala azul max
  out += buff;
  sprintf(buff, "<text x=\"%d\" y=\"%d\" fill=\"blue\"> %3.2f </text>\n", k* largoH - 25, alto / 2, (float(maxH2 - minH2) / 2 + float(minH2)) / rango2 ); // medio
  out += buff;
  // fin grilla.

  out += "<g >\n";

  sprintf(buff, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke=\"magenta\"/>\n", k* h, alto, k* h, 1); // cursor
  out += buff;
  //  Graficar funcion completa escalado segun maxH y minH
  sprintf(buff, "<polyline points = \"");
  out += buff;
  for (int x = 0; x < largoH; x++) {
    int yAct =  map(historia1[x], minH1, maxH1, 0, alto); // ajustar a escala svg
    sprintf(buff, "%d,%d ", k*x,alto- yAct);
    out += buff;
  }// fin for x
  sprintf(buff, "\" fill = \"none\" stroke = \"red\" stroke-width = \"1\"/>\n");
  out += buff;

   sprintf(buff, "<polyline points = \"");
  out += buff;
  for (int x = 0; x < largoH; x++) {
    int yAct =  map(historia2[x], minH2, maxH2, 0, alto); // ajustar a escala svg
    sprintf(buff, "%d,%d ", k*x, alto-yAct);
    out += buff;
  }// fin for x
  sprintf(buff, "\" fill = \"none\" stroke = \"blue\" stroke-width = \"1\"/>\n");
  out += buff;
  out += "</g>\n</svg>\n";
//   Serial.print(h); Serial.print('\t'); Serial.print(" out: "); Serial.println(out.length());
  //Serial.print("\n out: "); Serial.println(out.c_str());// para debug
  server.send(200, "image/svg+xml", out);
}//////////////////////////////////////