Arduino web server on sd graphs problem

Hello all.
I have searching many hours without the result.
I am building website and I would like to make graph which shows temperatures from my sensor per hours/minutes etc.
I have Arduino server on SD card. The problem is I would like to use Canvasjs/Dygraph/whatever like this which is able to zoom data. I made code which save data to csv file. When I use for example Dygraphs on pc there is no problem.
Additionaly I don't want to use other servers or something like this. Only Arduino with shield.

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
#define REQ_BUF_SZ   60

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80
File webFile;               // the web page file on the SD card

char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0;              // index into HTTP_req buffer


void setup()
{
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600);
// initialize SD card
Serial.println("Initializing SD card...");
  if (!SD.begin(4)) {
    Serial.println("ERROR - SD card initialization failed!");
    return;
    }
Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
  if (!SD.exists("index.htm")) {
    Serial.println("ERROR - Can't find index.htm file!");
    return;
    }
Serial.println("SUCCESS - Found index.htm file.");   
Ethernet.begin(mac, ip);  // initialize Ethernet device
server.begin();           // start to listen for clients
}

void loop()
{

    
EthernetClient client = server.available();  // try to get client
  if (client) {  // got client?
    boolean currentLineIsBlank = true;
     while (client.connected()) {
      if (client.available()) {   // client data available to read
       char c = client.read(); // read 1 byte (character) from client
                // limit the size of the stored received HTTP request
                // buffer first part of HTTP request in HTTP_req array (string)
                // leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
         if (req_index < (REQ_BUF_SZ - 1)) {
           HTTP_req[req_index] = c;          // save HTTP request character
           req_index++;
           }  
            if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
              client.println("HTTP/1.1 200 OK");
              client.println("Content-Type: text/html");
              
              client.println("Connection: keep-alive");
              client.println();              
               // send web page
              webFile = SD.open("index.htm"); 
                                     
                        if (webFile) {
                            while(webFile.available()) {
                               
                                client.write(webFile.read());
                                // send web page to client
                                }
                            webFile.close();                            
                            }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    // reset buffer index and all buffer elements to 0
                    req_index = 0;                    
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
delay(1000);
}

Additionaly I don't want to use other servers or something like this.

So, you expect Dygraphs to run on the Arduino? Realistic expectations are in order.

Yup, it will be perfect. Is it possible?
I am learning and I thought if I put files on SD card and open index.htm it would be possible like on PC.

PaulS:
So, you expect Dygraphs to run on the Arduino? Realistic expectations are in order.

Subtlety is lost on some as evidenced by the OP's response. LOL.

After few hours I opened Dygraph on my website. Script works using csv file on SD card.
Now the problem is how to speed up reading dygraph.js file - anybody have solution?

anybody have solution?

We don't know what your code looks like. We don't know what your expectations are. So, no.

Ups, ya sorry.
Dy.js is Dygraph combined dev javascript.
To get this graph there is around 1min.

#include <SPI.h>
#include <Ethernet.h>
#include <SdFat.h> 
SdFat SD;
#define REQ_BUF_SZ   60 // size of buffer used to capture HTTP requests

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20); EthernetServer server(80);

const int chipSelect = 4;
File webFile;
File dataFile;
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
int sensor = A3;
int sensorValue = 0;
unsigned long time;

void setup()
{
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600);       // for debugging
// initialize SD card
Serial.println("Initializing SD card...");
  if (!SD.begin(chipSelect)) {
  Serial.println("ERROR - SD card initialization failed!");
  return;    // init failed
  }
Serial.println("SUCCESS - SD card initialized.");
 if (!SD.exists("index.htm")) {
 Serial.println("ERROR - Can't find index.htm file!");
 return;
 }
Serial.println("SUCCESS - Found index.htm file.");
Ethernet.begin(mac, ip);
server.begin();
}

void loop()
{
sensorValue = analogRead(sensor);
time = millis();
dataFile = SD.open("data.csv",FILE_WRITE);    
 if (dataFile) {
  dataFile.print(time);
  dataFile.print(",");
  dataFile.println(sensorValue);
  dataFile.close();      
  } 
 
EthernetClient client = server.available();  // try to get client
 if (client) {
  boolean currentLineIsBlank = true;
   while (client.connected()) {
    if (client.available()) {
     char c = client.read(); // read 1 byte (character) from client
                // buffer first part of HTTP request in HTTP_req array (string)
                // leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
      if (req_index < (REQ_BUF_SZ - 1)) {
       HTTP_req[req_index] = c;          // save HTTP request character
       req_index++;
       }
                // print HTTP request character to serial monitor
       Serial.print(c);
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
       if (c == '\n' && currentLineIsBlank) {
                    // open requested web page file
        if (StrContains(HTTP_req, "GET / ") || StrContains(HTTP_req, "GET /index.htm")) {
         client.println(F("HTTP/1.1 200 OK"));
         client.println(F("Content-Type: text/html"));
         client.println(F("Connnection: close"));
         client.println();
         webFile = SD.open("index.htm", O_READ);        // open web page file
         }
        else if (StrContains(HTTP_req, "GET /dy.js")) {            
         client.println(F("HTTP/1.1 200 OK"));
         client.println(F("Content-Type: javascript"));
         client.println(F("Connnection: close"));
         client.println();
         webFile = SD.open("dy.js", O_READ);        // open web page file
         } 
        else if (StrContains(HTTP_req, "GET /Data.csv")) {
         client.println(F("HTTP/1.1 200 OK"));
         client.println(F("Content-Type: text"));
         client.println(F("Connnection: close"));
         client.println();
         webFile = SD.open("Data.csv",O_READ);        // open web page file
         }                             
        else if (StrContains(HTTP_req, "GET /pic.jpg")) {
         webFile.open("pic.jpg", O_READ);
          if (webFile) {
           client.println("HTTP/1.1 200 OK");
           client.println();
           }
          }
        if (webFile) {
         while(webFile.available()) {
          client.write(webFile.read()); // send web page to client
          }
          webFile.flush();
          webFile.close();
          }
                    // reset buffer index and all buffer elements to 0
         req_index = 0;
         StrClear(HTTP_req, REQ_BUF_SZ);
         break;
         }
                // every line of text received from the client ends with \r\n
          if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
           currentLineIsBlank = true;
           } 
           else if (c != '\r') {
                    // a text character was received from client
           currentLineIsBlank = false;
           }
         } // end if (client.available())
       } // end while (client.connected())
delay(1);      // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
delay(1000);
}


// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
 str[i] = 0;
 }
}

// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind){
char found = 0;
char index = 0;
char len;
len = strlen(str);    
 if (strlen(sfind) > len) {
  return 0;
  }
 while (index < len) {
  if (str[index] == sfind[found]) {
   found++;
    if (strlen(sfind) == found) {
     return 1;
     }
    }
    else {
    found = 0;
    }
    index++;
    }
    return 0;
}

int freeRam() {
  extern int __heap_start,*__brkval;
  int v;
  return (int)&v - (__brkval == 0 ? (int)&__heap_start : (int) __brkval); 
}
         while(webFile.available()) {
          client.write(webFile.read()); // send web page to client
          }
          webFile.flush();
          webFile.close();
          }

Sending 512 byte packets with one byte payloads is pretty wasteful. Read more than one byte at a time, and send far fewer packets (in much less time).

The flush() function commits the buffer of data being written to to the file. Hardly useful for files opened for read only.

PaulS:
Sending 512 byte packets with one byte payloads is pretty wasteful. Read more than one byte at a time, and send far fewer packets (in much less time).

Thank you, for now I have not bad reading speed.

Another problem occured is renaming files.
Temp file with saved sensorValues is naming "data.csv". When I decide to start new measurement I click physical button and I'd like to save this file with different name. How can I make this?
I have thied do this like this:

if (buttonState ==HIGH) {
do all operations, save sensor Values to "data.csv" file, send web page to web browser }
else
{
 int nr = 1;
 char filename[16] = {'\0'}; 
 sprintf(filename,"data%d.csv",nr);
 file=SD.rename(filename,); }

I have no idea how to increase "nr" by 1 if I click button again --> for now, when I click button again program do nothing.

I have no idea how to increase "nr" by 1 if I click button again

Since nr is local to the else block, you can't. nr has to have greater scope. If its scope is less than global, it also needs to be static.

Thank you again. All works. I made "nr" global.
Another problem is how to send all .csv files from SD card to web browser? I know I can open each separately but no idea how open them all.