title: Update a plotly.js Plot with new data
body: <p>I am taking my very first steps with Plotly.js and AJAX. However, I am stuck when it comes to passing the new data to the plot. Although the data is received (as confirmed by console.log()), it destroys the plot when using "Plotly.newPlot(). I can't seem to figure out where am I going wrong. I tried researching the issue, but all examples are not applicable in my case.</p>
  
  <p><strong>Expected behavior:</strong></p>
  
  <p>After clicking the button (chartId="chart1"), priceplot.js should send a request to the route '/updatepriceplot' which returns a JSON response based on the selection from request.form["chartOption"].</p>
  
  <p><strong>Actual behavior:</strong></p>
  
  <p>The plot is empty after clicking the button (chartId="chart1")</p>
  
  <p>Here is my Flask route:</p>
  
  <pre><code>@server_bp.route('/priceplot', methods=["GET"])
  def priceplot():
      form_priceplot = pricePlot_options()
  
      plot = createPlot()
      return render_template("priceplot.html", plot=plot, form_priceplot=form_priceplot)
  
  @server_bp.route('/updatepriceplot', methods=["POST"])
  def update_priceplot():
  
      # a = request.form["chartId"]
      chartOption = request.form["chartOption"]
      plot = updateData(chartOption)
  
      return plot
  </code></pre>
  
  <p>Here is the PricePlot function returning a new JSON file.</p>
  
  <pre><code>def createPlot():
  
      df =  pd.read_json('data_{}.json'.format("1"))
      df = df.dropna()
      data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]
  
      graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
  
      return graphJSON
  
  def updateData(chartOption=None):
  
      # load the json data
      df =  pd.read_json('data_{}.json'.format(chartOption))
      df = df.dropna()
      data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]
  
      graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
  
      return graphJSON
  </code></pre>
  
  <p>The HTML template:</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block content %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head lang="en"&gt;
      &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.12.4.min.js"
          integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="{{ url_for('static', filename='js/priceplot.js') }}"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="chartSectionchart1" class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h3&gt;Chart &lt;span id="chartIdHead"&gt;&lt;/span&gt;{{ chartOption }}&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;div class="chart" id="graph"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;p&gt;
                  &lt;button type="button" class="btn btn-primary updateButton" chartId="chart1"&gt;Update&lt;/button&gt;
              &lt;/p&gt;
              &lt;p&gt;
                  {{ form_priceplot.option_priceplot(size=1, class="form-control", id="chartOption") }}
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
      &lt;script&gt;
          var graphs = {{ plot | safe}};
          Plotly.plot('graph', graphs, {});
      &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>The priceplot.js</p>
  
  <pre><code>    $(document).ready(function(){
      $(".updateButton").on("click", function(){
          var chartId = $(this).attr("chartId")
          var chartOption = $("#chartOption").val()
          console.log(chartId)
          console.log(chartOption)
  
          req = $.ajax({
              url : "/updatepriceplot",
              type : "POST",
              data : {chartId: chartId, chartOption : chartOption}
          });
  
          req.done(function(data) {
              $("#chartSectionchart1").fadeOut(300).fadeIn(300);
              var graphs = data;
              console.log(graphs)
              Plotly.newPlot('graph', graphs, {});     
  
          });
  
  
      });
  });
  </code></pre>