title: Equation solver webapp in Python
body: <p>I am making an equation solver webapp in Python (Flask framework).  App takes user input [a, b, c] and sent to server by calling a server side python function and get the results displayed using AJAX.</p>
  
  <p>Part of Client JavaScript:</p>
  
  <pre><code>$.getJSON($SCRIPT_ROOT + '/_serverFunction', { form data });
  </code></pre>
  
  <p>Server Python function:</p>
  
  <pre><code>@app.route('/_solve')
  def solve():
      a = request.args.get('a')
      b = request.args.get('b')
      c = request.args.get('c')
      cof = [a, b, c]
      roots = np.roots(cof)
      return jsonify(roots)
  </code></pre>
  
  <p>Above works just fine and i get the results displayed as per the input.</p>
  
  <p>However, I would also like to show a graph representing the solution next to the above results.</p>
  
  <p>I am able to generate a dummy static graph at server using matplotlib and send to the client with the following:</p>
  
  <pre><code>&lt;img src="/image.jpg" id='bg'&gt;
  </code></pre>
  
  <p>Server side python code:</p>
  
  <pre><code> @app.route('/image.jpg')
      def image_jpeg():
          image = StringIO()
          plot(image)
          image.seek(0)
          return send_file(image,
                           attachment_filename="image.jpg",
                           as_attachment=True)
  
  def plot(image):
      x = np.linspace(0, 100)
      y = np.sin(x)
      pyplot.plot(x, y)
      pyplot.savefig(image, format='jpg')
  </code></pre>
  
  <p>Above works and I get a static curve when i load the page. But I would like this graph to change when user submits the input to the server to solve the equation every time.</p>
  
  <p>How to make the both calls to the solve() and image_jpeg() from the same same AJAX call?</p>
  
  <p>How do the I share the user data [a , b ,c] across functions so the graph can be generated and sent back.</p>
  
  <p><strong><em>Update:</em></strong></p>
  
  <pre><code>$('img').attr('src',"data:image/png;base64"+ "," + data.imgdata);                             
  </code></pre>
  
  <p>On server:                                                                                     </p>
  
  <pre><code>    imgdata = image.getvalue()    
  import base64
  imgdata = base64.b64encode(imgdata)    
  </code></pre>
  
  <p>imgData is passed along with json.                    </p>