title: How to embed a python graph to a webserver created by an esp8266
body: <p>So, three python graphs are created using  matplotlib.pyplot while getting data from Serial via arduino.My goal is to get those graphs and someway display on a web server created by an esp8266.</p>
  <p>Python code looks like this</p>
  <pre><code>import serial
  
  import matplotlib.pyplot as plt
  from drawnow import *
  import atexit
  import numpy as np
  
  values = []
  
  values1 = []
  values2 = []
  values3 = []
  y=0
  values4 = []
  plt.ion()
  cnt=0
  BBox = ((24.5242, 26.4025,    40.2523,41.0255  ))
  serialArduino = serial.Serial('COM7', 9600)
  
  def plotValues():
      
     
      plt.subplot(2, 2, 1)
      plt.title('Serial value from Arduino')
      plt.grid(True)
      plt.ylabel('Values')
      
      
      
      plt.plot(values, 'g', label='temp values')
      #axes.legend(loc=4) 
      plt.plot(values1, 'r', label='ph values')
      
      plt.legend(loc='upper left')
      x = values2
      #y = np.array([10, 20, 30, 40])
  
      plt.subplot(2,2,2)
      plt.plot(x, 'b', label='turb')
      plt.legend(loc='upper left')
  
      ruh_m = plt.imread(r'C:\Users\lordjimas\Desktop\map.png')
      ax= plt.subplot(2,2,(3,4))
  
  
      ax.set_title('Plotting Spatial Data on Alexandroupolis  Map')
      ax.set_xlim(BBox[0],BBox[1])
      ax.set_ylim(BBox[2],BBox[3])
  
  
      ax.imshow(ruh_m,  extent = BBox, aspect= 'equal')
      ax.scatter(values4, values3, color = 'black')
      ax.fill_between((1,2), 0, 1, facecolor='green', alpha=0.2) # blocked area for first axes
      ax.fill_between((5,6), 0, 1, facecolor='orange', alpha=0.2) # blocked area for second axes
  
  
  
      
      
  
  def doAtExit():
      serialArduino.close()
      print(&quot;Close serial&quot;)
      print(&quot;serialArduino.isOpen() = &quot; + str(serialArduino.isOpen()))
  
  atexit.register(doAtExit)
  
  print(&quot;serialArduino.isOpen() = &quot; + str(serialArduino.isOpen()))
  
  #pre-load dummy data
  
      
  while True:
      while (serialArduino.inWaiting()==0):
          pass
      print(&quot;readline()&quot;)
      
      
      valueRead = serialArduino.readline()
      valueRead1 = serialArduino.readline()
      valueRead2 = serialArduino.readline()
      #valueRead3 = serialArduino.readline()
      #valueRead4 = serialArduino.readline()
      #check if valid value can be casted
      try:
          valueInInt = float(valueRead)
          valueInInt1 = float(valueRead1)
          valueInInt2 = float(valueRead2)
          #valueInInt3 = float(valueRead3)
          #valueInInt4 = float(valueRead4)
          if valueInInt &lt;= 8000000:
              if valueInInt1 &lt; 14:
                  values.append(valueInInt)
                  values1.append(valueInInt1)
                  values2.append(valueInInt2)
                  #values3.append(valueInInt3)
                  
                  #values4.append(valueInInt4)
                  y=y+5
                  
                  #values.pop(0)
                  #values4.pop(0)
                  #values3.pop(0)
  
  
                  
  
                 
                   
                  
                  drawnow(plotValues)
              else:
                  print(&quot;Invalid!problem with serial &quot;)
          else:
              print(&quot;Invalid! too large&quot;)
      except ValueError:
          print(&quot;Invalid! cannot cast&quot;)
  </code></pre>
  <p>I have tried converting those graphs to html script using the mpld3 library but I cant find a way to include that script to my esp8266 code</p>