<!DOCTYPE html>
<html lang="en">
  <head>
    {% block head %}
      {% block meta %}
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <link rel="shortcut icon" href="#" />
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      {% endblock meta %}

      <title>CSULA Medtronic Project! | {% block title %}{% endblock %}</title>

      {% block stylesheets %}
        <!-- Bootstrap -->
        <link href="{{ url_for('static', filename='vendors/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="{{ url_for('static', filename='vendors/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
        <!-- NProgress -->
        <link href="{{ url_for('static', filename='vendors/nprogress/nprogress.css') }}" rel="stylesheet">
        <!-- bootstrap-daterangepicker -->
        <link href="{{ url_for('static', filename='vendors/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
        <!-- iCheck -->
        <link href="{{ url_for('static', filename='vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
        <!-- bootstrap-progressbar -->
        <link href="{{ url_for('static', filename='vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}" rel="stylesheet">
        <!-- JQVMap -->
        <link href="{{ url_for('static', filename='vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet"/>
      {% endblock stylesheets %}
      <!-- Custom Theme Style -->
      <link href="{{ url_for('static', filename='build/css/custom.css') }}" rel="stylesheet">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

<!-- 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

 -->
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script>



<!--     <script type=text/javascript>
      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script> -->
    {% endblock head %}
  </head>

  <body class="{% block body_class %}nav-md {% endblock body_class %}">
    {% block body %}
      <div class="container body">
        <div class="main_container">

          {% block sidebar %}
            <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
              {% include "site_template/sidebar.html" %}
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="top_nav">
              {% include "site_template/top_navigation.html" %}
            </div>
          {% endblock top_navigation %}

          {% block content %}
            <!-- {{ content }} -->
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "site_template/footer.html" %}
            </footer>
          {% endblock footer %}
        </div>
      </div>

      {% block javascripts %}
        <!-- jQuery -->
        <script src="{{ url_for('static', filename='vendors/jquery/dist/jquery.min.js') }}"></script>
        <!-- Bootstrap -->
        <script src="{{ url_for('static', filename='vendors/bootstrap/dist/js/bootstrap.min.js') }}"></script>
        <!-- FastClick -->
        <script src="{{ url_for('static', filename='vendors/fastclick/lib/fastclick.js') }}"></script>
        <!-- NProgress -->
        <script src="{{ url_for('static', filename='vendors/nprogress/nprogress.js') }}"></script>
        <!-- bootstrap-progressbar -->
        <script src="{{ url_for('static', filename='vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
        <!-- iCheck -->
        <script src="{{ url_for('static', filename='vendors/iCheck/icheck.min.js') }}"></script>
        <!-- bootstrap-daterangepicker -->
        <script src="{{ url_for('static', filename='vendors/moment/min/moment.min.js') }}"></script>
        <script src="{{ url_for('static', filename='vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
        <!-- bootstrap-wysiwyg -->
        <script src="{{ url_for('static', filename='vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js') }}"></script>
        <script src="{{ url_for('static', filename='vendors/jquery.hotkeys/jquery.hotkeys.js') }}"></script>
        <script src="{{ url_for('static', filename='vendors/google-code-prettify/src/prettify.js') }}"></script>
        <!-- jQuery Tags Input -->
        <script src="{{ url_for('static', filename='vendors/jquery.tagsinput/src/jquery.tagsinput.js') }}"></script>
        <!-- Switchery -->
        <script src="{{ url_for('static', filename='vendors/switchery/dist/switchery.min.js') }}"></script>
        <!-- Select2 -->
        <script src="{{ url_for('static', filename='vendors/select2/dist/js/select2.full.min.js') }}"></script>
        <!-- Autosize -->
        <script src="{{ url_for('static', filename='vendors/autosize/dist/autosize.min.js') }}"></script>
        <!-- jQuery autocomplete -->
        <script src="{{ url_for('static', filename='vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js') }}"></script>
        <!-- starrr -->
        <script src="{{ url_for('static', filename='vendors/starrr/dist/starrr.js') }}"></script>



 <script>
  $(document).ready(function() {
  
    var chart_plot_01_settings = {
      series: {
      lines: {
        show: false,
        fill: true
      },
      splines: {
        show: true,
        tension: 0.4,
        lineWidth: 1,
        fill: 0.4
      },
      points: {
        radius: 4,
        show: true
      },
      shadowSize: 2
      },
      grid: {
      verticalLines: true,
      hoverable: true,
      clickable: true,
      tickColor: "#d5d5d5",
      borderWidth: 1,
      color: '#fff'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
      tickColor: "rgba(51, 51, 51, 0.06)",
      mode: "time",
      tickSize: [5, "minute"],
      //tickLength: 10,
      axisLabel: "Time",
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial',
      axisLabelPadding: 10
      },
      yaxis: {
      ticks: 8,
      tickColor: "rgba(51, 51, 51, 0.06)"
      },
      tooltip: {
      enabled: true
      }
    };  
  
    if ($("#chart_plot_01").length)
    {
      console.log('PLOTTT');
      $.plot( $("#chart_plot_01"), [{{sg_table_data}}],  chart_plot_01_settings );
    }
    
    if ($('#canvasRadar2').length ){ 
        
      var ctx = document.getElementById("canvasRadar2");
      var data = {
        //labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        labels: ['Weight','Duration','max_Cardio','Minutes_FatBurn','Sensor_Glucose'],
        datasets: [{
          label: "My First dataset",
          backgroundColor: "rgba(3, 88, 106, 0.2)",
          borderColor: "rgba(3, 88, 106, 0.80)",
          pointBorderColor: "rgba(3, 88, 106, 0.80)",
          pointBackgroundColor: "rgba(3, 88, 106, 0.80)",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          //data: [65, 59, 90, 81, 56, 55, 40]
          data: {{radar_value1}}
        }, {
          label: "My Second dataset",
          backgroundColor: "rgba(38, 185, 154, 0.2)",
          borderColor: "rgba(38, 185, 154, 0.85)",
          pointColor: "rgba(38, 185, 154, 0.85)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          //data: [28, 48, 40, 19, 96, 27, 100]
          data: {{radar_value2}}
        }]
      };

      var canvasRadar = new Chart(ctx, {
      type: 'radar',
      data: data,
      });
    }
  });
  
  
    
  </script>

      {% endblock %}
      <!-- Custom Theme Scripts -->
      <script src="{{ url_for('static', filename='build/js/custom.js') }}"></script>
 

    {% endblock body %}
  </body>
</html>
