Temperature graph

Hey guys ,
i want to display a graph of temperature on tft touch 7''. i sent all the tempeture values to an Sd card.
Can i diplay a 24 hours graph ? and save it on the SD Card ?

Yes to both.

Yes, it is possible to display 24 hours of temp info on a 7" touch screen.

I display 5 days of air pressure info on a small screen.

Start with how many pixels you want to designate to displaying 24 hours of info.

Lets say you use a "" to represent a graphed point. How many pixels does the "" occupy?

In my case I have a 128X128 OLED display. Each "_" takes 5 pixels. If I advance the cursor position 2 places forward that allows me to see the next position. The overlap with the previous position enhances the look of the graph. I update the graph every hour but advance the cursor once every 2 hours. I am able to display 5 days worth of graphed data.

Here is my task that operates a graph that you might be able to use as a model:

void fUpdateDisplay( void * parameter )
{
  // Color definitions
  // http://www.barth-dev.de/online/rgb565-color-picker/
  /*
    ColorPalette[0] = 0x0000; //BLACK
    ColorPalette[1] = 0x001F; //BLUE
    ColorPalette[2] = 0xF800; //RED
    ColorPalette[3] = 0x07E0; //GREEN
    ColorPalette[4] = 0x07FF; //CYAN
    ColorPalette[5] = 0xF81F; //MAGENTA
    ColorPalette[6] = 0xFFE0; //YELLOW
    ColorPalette[7] = 0xFFFF; //WHITE
    ColorPalette[8] = 0xFFFFD8; //LIGHTYELLOW
    ColorPalette[9] = 0xFF8040; //BROWN
  */
  int rowRef = 80;
  int hRef = int( oPressureHistory[0] );
  const int nextPoint = 2;
  int nextCol = 0;
  int16_t aqColor = 216; //minimum value
  for (;;)
  {
    xEventGroupWaitBits (eg, evtDoDisplay, pdTRUE, pdTRUE, portMAX_DELAY ); //
    xSemaphoreTake( sema_mqttOK, portMAX_DELAY );
    mqttOK ++;
    xSemaphoreGive( sema_mqttOK );
    vTaskDelay( 1 );
    tft.fillScreen( ColorPalette[0] );
    tft.setTextSize( 2 );
    log_i( "oTemperature %f", oTemperature );
    if ( (oTemperature >= 73.0f) && (oTemperature <= 100.0f) )
    {
      log_i( "if ( (oTemperature >= 73.0f) && (oTemperature <= 100.0f) )" );
      // green to decrease and red to increase no blue
      int tempDiff = int( 100.0f - oTemperature );
      log_i( "oTemperature %f tempDiff %d", oTemperature, tempDiff );
      int NewRed = tempDiff << 10;
      int NewGreen =  0x07E0 - (tempDiff << 5 );
      //int NewRed = ColorPalette[3] - (tempDiff << 5 ) ; // load in green decreased by temperature
      log_i( "NewRed %d NewGreen %d", NewRed, NewGreen );
      NewRed |= NewGreen ;
      log_i( "NewRed | NewGreen %d ", NewRed );
      tft.setTextColor( NewRed );
    }
    if ( oTemperature <= 0.0f )
    {
      log_i("white");
      tft.setTextColor( ColorPalette[7] ); // white
    }
    if ((oTemperature >= 32.0f) && (oTemperature < 72.0f) )
    {
      //log_i("if ((oTemperature >= 32.0f) && (oTemperature < 72.0f) )");
      //blue decreases, no red, green increases
      int tempDiff = int( oTemperature - 32.0f );
      if( tempDiff > 31 ) tempDiff = 31;
      log_i(" oTemperature %f tempDiff %d", oTemperature, tempDiff );
      int NewBlue =  ColorPalette[1] - tempDiff; // decrease blue
      log_i( "NewBlue %d", NewBlue );
      int NewGreen =  (tempDiff) << 5 ;// increase green
      log_i( "NewGreen %d", NewGreen );
      NewGreen |= NewBlue; // combine blue into newgreen
      log_i( "NewGreen or'ed %d", NewGreen );
      tft.setTextColor( NewGreen );
    }
    if ((oTemperature >= 72.0f) && (oTemperature < 73.0f) ) tft.setTextColor( ColorPalette[3] ); //green
    if ( (oTemperature < 32.0f) && (oTemperature >= 0.0f) )
    {
      log_i( "if ( (oTemperature < 32.0f) && (oTemperature >= 0.0f) )" );
      int NewBlue = ColorPalette[1]; // blue
      //blue is max for each step below 32 red and green increase by one
      //get steps below 32
      int tempDiff = int( 32.0f - oTemperature );
      NewBlue = NewBlue + ( (tempDiff) << 5); //add green
      NewBlue =  NewBlue | (xOff << 10);//add red
      tft.setTextColor( NewBlue ); // red
    } //if( (oTemperature <= 32.0f) %% (oTemperature >= 0.0f) )
    if ( oTemperature >= 100.0f ) tft.setTextColor( ColorPalette[2] ); // red
    tft.setCursor( 0, 0 );
    if ( oTemperature < 100.0f )
    {
      tft.print( "Tmp " + String(oTemperature) );
    } else
    {
      tft.print( "Tmp " + String(int(oTemperature)) );
    }
    tft.setCursor( 0, 20 );
    tft.setTextSize( 2 );
    if ( oHumidity < 49.0f )
    {
      //reduce green component, increase blue component, red @0
      //get difference from 50%
      int xOff = 2 * ( abs(50 - int(oHumidity)) ); // used to make adjustments to green and blue
      //shift xOff to the left by 5 places reduce green by xOff
      newGreen = ColorPalette[3] - ( (xOff) << 5); //green falls off by xOff
      // increase blue by xOff
      newGreen = newGreen | (xOff);
      //log_i( "ColorPalette[3] %d newGreen %d", ColorPalette[3], newGreen );
      tft.setTextColor( newGreen );
    }
    //@50%
    if ( (oHumidity <= 51.0f) && (oHumidity >= 49.0f) )
    {
      tft.setTextColor( ColorPalette[3] ); //green
    }
    // above
    if ( oHumidity > 51.0f )
    {
      //reduce green component, increase red component, blue @0
      //get difference from 50%
      int tempDiff = (int)oHumidity - 50;
      if( tempDiff > 31 ) tempDiff = 31;
      int newGreen = ColorPalette[3] - ( tempDiff << 5 ); //green falls off by xOff
      int newRed = tempDiff << 10;
      // increase red by xOff
      newGreen =  newGreen | tempDiff;
      tft.setTextColor( newGreen );
    }
    tft.print( "Hum " + String(oHumidity) );
    // set AQI text color
    if ( (oIAQ * 216) >= (90.0f * 216))
    {
      int redColor = (int)oIAQ - 90;
      redColor *= 216;
      int green = ColorPalette[3] - (redColor << 5);
      int blue = ColorPalette[1] - redColor;
      aqColor &= 0x7FF; //set green to and blue to max
      redColor = redColor << 10;
      aqColor |= redColor;
      tft.setTextColor( aqColor );
    }
    if ( oIAQ * 216 > 60.0f * 216 && oIAQ * 216 < 90.0f * 216 )
    {
      int blueColor = (int)oIAQ - 60;
      blueColor *= 216;
      aqColor &= (0x7E0 - (blueColor << 5) ); //set green reduce green by blue
      aqColor |= blueColor;
      tft.setTextColor( aqColor );
    }
    if ( oIAQ * 216 <= 60.0f * 216 )
    {
      int greenColor = oIAQ * 216;
      greenColor = greenColor << 5;
      tft.setTextColor( greenColor );
    }
    // display AQI
    tft.setCursor( 0, 40 );
    tft.print( "AQI " + String(oIAQ) );
    //
    tft.setTextSize( 1 );
/////////<<<<<< start the graph thing here >>>>>>>>>>>>>>>
    tft.setTextColor( ColorPalette[1] ); //set graph line color
    tft.setCursor( 0, 118 );
    tft.print( "  Pres: " + String(oPressure) + "mmHg" );
    hRef = int( oPressureHistory[0] );
    nextCol = 0;
    xSemaphoreTake( sema_HistoryCompleted, portMAX_DELAY );
    for (int i = 0; i <= DataCells; i++)
    {
      int hDisplacement = hRef - int( oPressureHistory[i] ); // cell height displacement from baseline
      tft.setCursor( nextCol , (rowRef + hDisplacement) );
      tft.print( "_" );
      nextCol += nextPoint;
      //place vertical bar representing a 24 hour time period.
      if ( (nextCol % 24) == 0 )
      {
        //tft.drawLine( col, row, width, height, color );
        tft.drawLine( uint16_t(nextCol), uint16_t(rowRef + 5), uint16_t(nextCol), uint16_t(rowRef + 11), ColorPalette[7] );
      }
    }
    // advance cursor to place a begin of graph marker. each letter is 5 spaces wide but graph position marker only advances 2 spaces
    // to keep cursor at begining place cursor +2 the nextCol position.
    tft.setCursor( (arrayCellPtr * nextPoint), (rowRef + 3) );
    tft.print( "I" );
    xSemaphoreGive( sema_HistoryCompleted );
    //     log_i( "fUpdateDisplay MEMORY WATERMARK %d", uxTaskGetStackHighWaterMark(NULL) );
  }
  vTaskDelete( NULL );
} // void fUpdateDisplay( void * parameter )

There should be an example included in whatever display library you are using which tells you all you need. In the simplest method, you increment the x-coordinate according to time and the y-coordinate according to the temperature you are measuring, and put a dot there..