{% if questionnaires %}
  {% set questionnaires = questionnaires | reverse %}
  <div class="col-xl-6 col-lg-6">
    <div class="card">
      <div class="card-body">
        <div class="d-flex">
          <h3 class="card-title">{{ gettext("Peso") }} ({{ gettext("kg.") }})</h3>
        </div>
        <div class="row" style="margin-left:-35px; margin-right: -15px;">
          <div class="col-12 align-self-center p-0">
            <div class="weight ct-sm-line-chart chartist-chart" style="height:200px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xl-6 col-lg-6">
    <div class="card">
      <div class="card-body">
        <div class="d-flex">
          <h3 class="card-title">{{ gettext("Índice de masa corporal") }}</h3>
        </div>
        <div class="row" style="margin-left:-35px; margin-right: -15px;">
          <div class="col-12 align-self-center p-0">
            <div class="imc ct-sm-line-chart chartist-chart" style="height:200px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Chartist.Line('.weight', {
        labels: [{% for questionnaire in questionnaires %}"{{ moment(questionnaire.created).format("L") }}"{% if not forloop.last %},{% endif %}{% endfor %}],
        series: [
          [{% for questionnaire in questionnaires %}"{{ questionnaire.peso }}"{% if not forloop.last %},{% endif %}{% endfor %}],
        ]
      }, {
        fullWidth: true,

        plugins: [
          Chartist.plugins.tooltip()
        ],
        chartPadding: {
          right: 60
        }
      });

    new Chartist.Line('.imc', {
        labels: [{% for questionnaire in questionnaires %}"{{ moment(questionnaire.created).format("L") }}"{% if not forloop.last %},{% endif %}{% endfor %}],
        series: [
          [{% for questionnaire in questionnaires %}"{{ questionnaire.medidas_antropometricas.IMC }}"{% if not forloop.last %},{% endif %}{% endfor %}],
        ]
      }, {
        fullWidth: true,

        plugins: [
          Chartist.plugins.tooltip()
        ],
        chartPadding: {
          right: 60
        }
      });
  </script>
{% endif %}