{% extends 'base.html' %} {% load bootstrap3 %}{% block content %}
<div id="plot"></div>
{% endblock content %} {% block modal %}
<!-- Modal -->
<div class="modal fade" id="setup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Setup plot</h4>
      </div>
      <div class="modal-body">
        {% if code and plot %}
        <form id="form_setup">
          {% bootstrap_form setup_form layout='grid' size='small' %}
        </form>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button id="bt_update" type="button" class="btn btn-primary">Update</button>
      </div>
    </div>
  </div>
</div>
{% endblock modal%} {% block script %}
<script>
  /* This conditional is used to know if we have to setup the data
   or just update the last data*/
  let flag = true;

  function plot(data) {
    // console.log(data['time']);
    if (flag === true) {
      flag = false;
      spc = new Pcolor({
        div: 'plot',
        data: data,
        props: { title: '{{title}}', zmin: 10, zmax: 30, colormap: 'Jet' },
      });
      return true;
    } else {
      spc.plot(data);
      return false;
    }
  }
  /*It is the button to make changes in my plot parameters defined in block modal*/
  $("#bt_update").click(function () {
      $("#setup").modal('hide');
      var values = $("#form_setup").serializeArray();
      spc.restyle(values);
    });
</script> {% endblock script %}