{% extends "basePage.html" %}
{% block content %}
<!-- inputs -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="L.Map.Sync.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>

<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<!-- end of inputs -->
<!-- write input data for the user to see -->

<hr>
<div>
  <h3><u> Application - Output Page </u><h3>
</div>

  <hr>
  <div class='container'  style="background-color: #e3f2fd;">
    <h4><u> User Input Data : </u></h4>

    <label><strong><u>Oil</u></strong></label>
    <br>
    <label>   Type : {{ myinput.oiltype }}</label>
    <br>
    <label>   Density : {{ myoutput.d_density_kgm3[0] }} kg/cu m</label>
    <br>
    <label>   Viscosity : {{ myinput.oilviscosity }} cStokes </label>

    <br>
    <label><strong><u>Wind</u></strong></label>
    <br>
    <label>  Speed : </label>
    <br>
    <label>  Day 1 : {{ myinput.windspeed[0] }}  {{ myinput.winddirection[0] }} </label>
    <br>
    <label>  Day 2 : {{ myinput.windspeed[1] }}  {{ myinput.winddirection[1] }} </label>
    <br>
    <label>  Day 3 : {{ myinput.windspeed[2] }}  {{ myinput.winddirection[2] }} </label>
    <br>
    <label>  Day 4 : {{ myinput.windspeed[3] }}  {{ myinput.winddirection[3] }} </label>
    <br>
    <label>  Day 5 : {{ myinput.windspeed[4] }}  {{ myinput.winddirection[4] }} </label>
    <br>


    <br>
    <label><strong><u>Water</u></strong></label>
    <br>
    <label>  Temperature : {{ myinput.watertemperature }}  {{ myinput.watertemperatureunits }}</label>
    <br>
    <label>  Density : {{ myinput.waterdensity }} kg / cu m</label>
    <br>
    <label>  Salinity : {{ myinput.watersalinity }} %</label>
    <br>
    <label>  Sediment Load : {{ myinput.watersedimentload }} mg / l</label>
    <br>
    <label>  Current Speed : </label>
    <br>
    <label>  Day 1 : {{ myinput.currentspeed[0] }} knots  {{ myinput.currentdirection[0] }}</label>
    <br>
    <label>  Day 2 : {{ myinput.currentspeed[1] }} knots  {{ myinput.currentdirection[1] }}</label>
    <br>
    <label>  Day 3 : {{ myinput.currentspeed[2] }} knots  {{ myinput.currentdirection[2] }}</label>
    <br>
    <label>  Day 4 : {{ myinput.currentspeed[3] }} knots  {{ myinput.currentdirection[3] }}</label>
    <br>
    <label>  Day 5 : {{ myinput.currentspeed[4] }} knots  {{ myinput.currentdirection[4] }}</label>
    <br>
    <label><strong><u>Release</u></strong></label>
    <br>
    <label>   Released Volume/Mass : {{ myinput.spillvolume }}  {{ myinput.spillunits }}</label>
    <br>
    <label>   Release Duration : {{ myinput.spillduration }}  {{ myinput.spilldurationunits }}</label>
    <br>
    <br>
    <label>   Spill Coordinates : {{ myinput.coordinates[0] }} lat, {{ myinput.coordinates[1] }} lon</label>
    <br>
    </div>
    <hr>
  <div class="container">
    <h4><u> Output Data :</u></h4>
    <div class="alert alert-primary" role="alert">
    Weathering results 120 hours ( 5 days ) after initial spill
    </div>
    <br>
    <h5> 1. Data Table </h5>
    <br>
    <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 1px solid "rgba(60,220,60,0.1)";
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: "rgba(60,220,60,0.1)";
    }
    </style>

  <table class="table table-striped">
  <thead>
    <tr class='table-primary'>
      <th scope="col"></th>
      <th scope="col">Day 1</th>
      <th scope="col">Day 2</th>
      <th scope="col">Day 3</th>
      <th scope="col">Day 4</th>
      <th scope="col">Day 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"  class='table-info'>Spilled Volume [cu.m]</th>
      <td>{{ myoutput.oilspilledtotal[24] }}</td>
      <td>{{ myoutput.oilspilledtotal[48] }}</td>
      <td>{{ myoutput.oilspilledtotal[72] }}</td>
      <td>{{ myoutput.oilspilledtotal[96] }}</td>
      <td>{{ myoutput.oilspilledtotal[120] }}</td>
    </tr>
    <tr>
      <th scope="row"  class='table-info'>Remaining Volume [cu.m]</th>
      <td>{{ myoutput.remaining_volume_m3[24] }}</td>
      <td>{{ myoutput.remaining_volume_m3[48] }}</td>
      <td>{{ myoutput.remaining_volume_m3[72] }}</td>
      <td>{{ myoutput.remaining_volume_m3[96] }}</td>
      <td>{{ myoutput.remaining_volume_m3[120] }}</td>
    </tr>
    <tr>
      <th scope="row"  class='table-info'>Remaining Percentage</th>
      <td>{{ myoutput.remaining_percentage[24] }}</td>
      <td>{{ myoutput.remaining_percentage[48] }}</td>
      <td>{{ myoutput.remaining_percentage[72] }}</td>
      <td>{{ myoutput.remaining_percentage[96] }}</td>
      <td>{{ myoutput.remaining_percentage[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Evaporated Volume [cu.m]</th>
      <td>{{ myoutput.evaporation_volume_m3[24] }}</td>
      <td>{{ myoutput.evaporation_volume_m3[48] }}</td>
      <td>{{ myoutput.evaporation_volume_m3[72] }}</td>
      <td>{{ myoutput.evaporation_volume_m3[96] }}</td>
      <td>{{ myoutput.evaporation_volume_m3[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Evaporated Percentage</th>
      <td>{{ myoutput.evaporation_percentage[24] }}</td>
      <td>{{ myoutput.evaporation_percentage[48] }}</td>
      <td>{{ myoutput.evaporation_percentage[72] }}</td>
      <td>{{ myoutput.evaporation_percentage[96] }}</td>
      <td>{{ myoutput.evaporation_percentage[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Dispersed Volume [cu.m]</th>
      <td>{{ myoutput.dispersed_volume_m3[24] }}</td>
      <td>{{ myoutput.dispersed_volume_m3[48] }}</td>
      <td>{{ myoutput.dispersed_volume_m3[72] }}</td>
      <td>{{ myoutput.dispersed_volume_m3[96] }}</td>
      <td>{{ myoutput.dispersed_volume_m3[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Dispersed Percentage</th>
      <td>{{ myoutput.dispersed_percentage[24] }}</td>
      <td>{{ myoutput.dispersed_percentage[48] }}</td>
      <td>{{ myoutput.dispersed_percentage[72] }}</td>
      <td>{{ myoutput.dispersed_percentage[96] }}</td>
      <td>{{ myoutput.dispersed_percentage[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Sedimentation Volume [cu.m]</th>
      <td>{{ myoutput.sedimentation_volume_m3[24] }}</td>
      <td>{{ myoutput.sedimentation_volume_m3[48] }}</td>
      <td>{{ myoutput.sedimentation_volume_m3[72] }}</td>
      <td>{{ myoutput.sedimentation_volume_m3[96] }}</td>
      <td>{{ myoutput.sedimentation_volume_m3[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Emulsification Volume [cu.m]</th>
      <td>{{ myoutput.emulsification_volume_m3[24] }}</td>
      <td>{{ myoutput.emulsification_volume_m3[48] }}</td>
      <td>{{ myoutput.emulsification_volume_m3[72] }}</td>
      <td>{{ myoutput.emulsification_volume_m3[96] }}</td>
      <td>{{ myoutput.emulsification_volume_m3[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Emulsification Percentage</th>
      <td>{{ myoutput.emulsification_percentage[24] }}</td>
      <td>{{ myoutput.emulsification_percentage[48] }}</td>
      <td>{{ myoutput.emulsification_percentage[72] }}</td>
      <td>{{ myoutput.emulsification_percentage[96] }}</td>
      <td>{{ myoutput.emulsification_percentage[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Spreading Area [sq.km]</th>
      <td>{{ myoutput.area_fay_km2[24] }}</td>
      <td>{{ myoutput.area_fay_km2[48] }}</td>
      <td>{{ myoutput.area_fay_km2[72] }}</td>
      <td>{{ myoutput.area_fay_km2[96] }}</td>
      <td>{{ myoutput.area_fay_km2[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Drift Movement Distance [km]</th>
      <td>{{ myoutput.distance_moved[24] }}</td>
      <td>{{ myoutput.distance_moved[48] }}</td>
      <td>{{ myoutput.distance_moved[72] }}</td>
      <td>{{ myoutput.distance_moved[96] }}</td>
      <td>{{ myoutput.distance_moved[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Thickness [m]</th>
      <td>{{ myoutput.thickness[23] }}</td>
      <td>{{ myoutput.thickness[47] }}</td>
      <td>{{ myoutput.thickness[71] }}</td>
      <td>{{ myoutput.thickness[95] }}</td>
      <td>{{ myoutput.thickness[119] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Density [kg/cu.m]</th>
      <td>{{ myoutput.d_density_kgm3[24] }}</td>
      <td>{{ myoutput.d_density_kgm3[48] }}</td>
      <td>{{ myoutput.d_density_kgm3[72] }}</td>
      <td>{{ myoutput.d_density_kgm3[96] }}</td>
      <td>{{ myoutput.d_density_kgm3[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Viscosity [cStokes]</th>
      <td>{{ myoutput.d_viscosity_cst[24] }}</td>
      <td>{{ myoutput.d_viscosity_cst[48] }}</td>
      <td>{{ myoutput.d_viscosity_cst[72] }}</td>
      <td>{{ myoutput.d_viscosity_cst[96] }}</td>
      <td>{{ myoutput.d_viscosity_cst[120] }}</td>
    </tr>
    <tr>
      <th scope="row" class='table-info'>Shore Stranding Maximum Volume [cu.m.]</th>
      <td></td>
      <td></td>
      <td>{{ myoutput.oilshorestring }}</td>
      <td></td>
      <td></td>
    </tr>
    </tbody>
    </table>
    <hr>
    <br>
    <h5> 2. Map Preview </h5>
    <br>
    <!-- map diagramm creation -->
    <p> The spill is plotted as a circle with initial center the oil spill coordinates (marker location)
      and radius as it occurs from Fay's spreading area for every half or quarter of hour for the five days we study. </p>
    </div>

  <div id="mapid" style="width: 100%; height: 550px;"></div>
  <script type="text/javascript" src="10mcoastline01.js"></script>
  <script>

   	var mymap = L.map('mapid').setView([{{ myoutput.latitude[0] }}, {{ myoutput.longitude[0] }}], 5.5);
    //L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
   	//	maxZoom: 18,
   	//	id: 'mapbox.streets'
   //	}).addTo(mymap);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
    //L.Shapefile('templates\Europe_coastline_shapefile.zip').addTo(map);
   	L.marker([{{ myoutput.latitude[0] }}, {{ myoutput.longitude[0] }}]).addTo(mymap)
    .bindPopup("Initial Spill");
    //Variables for surface plotting
    var i;
    var latitude = {{ myoutput.latitudefull }};
    var longitude = {{ myoutput.longitudefull}};
    var radius = {{ myoutput.radiusfull}};
    var area = {{ myoutput.area_fay }};
    var hourofstranding = {{ myinput.hourofstranding }};
    for (i = 0; i < (4*hourofstranding+1); i++) {
      //strintg variables for map pop-up
      var ii = i /4
      var str1 = "Hour ";
      var str2 = str1.concat(ii);
      var str3 = "Oil Area = "
      var str4 = area[i];
      var str6 = str3.concat(str4," sq.km.")
      var str7 = str2.concat(" / ",str6)
      L.circle([latitude[i], longitude[i]], {
     		color: "rgba(20,20,20,1)",
     		fillColor: '#f03',
     		fillOpacity: 0.2,
     		radius: radius[i]
     	}).addTo(mymap).bindPopup(str7);

    //  L.circle([latitudehalf[i], longitudehalf[i]], {
    // 		color: "rgba(20,20,20,1)",
    // 		fillColor: '#f03',
    // 		fillOpacity: 0.2,
    // 		radius: radiushalf[i]
    // 	}).addTo(mymap).bindPopup(str7);

    }
   </script>
<hr>
<div class="container">
  <h5> 3. Data Graphs </h5>
  <br>
  <br>
<canvas id="allvolumeChart" width="200" height="100"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("allvolumeChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'Remaining Volume',
					backgroundColor: "rgba(60,220,60,0.1)",
          borderColor: "rgba(60,220,60,0.5)",
					data: {{ myoutput.remaining_volume_m3 }},
          fill: false,
				}, {
					label: 'Evaporated Volume',
					backgroundColor:"rgba(75,192,192,0.2)",
          borderColor: "rgba(75,192,192,1)",
					data: {{ myoutput.evaporation_volume_m3 }},
          fill: false,
        }, {
					label: 'Dispersed Volume',
					backgroundColor: "rgba(180,20,100,0.1)",
          borderColor: "rgba(180,20,100,1)",
					data: {{ myoutput.dispersed_volume_m3 }},
          fill: false,
        }, {
					label: 'Total Spilled Volume',
					backgroundColor: "rgba(10,10,10,0.1)",
          borderColor: "rgba(10,10,50,1)",
					data: {{ myoutput.oilspilledtotal }},
          fill: false,
        }, {
					label: 'Sedimentation Volume',
					backgroundColor: "rgba(10,200,200,0.1)",
          borderColor: "rgba(10,200,200,1)",
					data: {{ myoutput.sedimentation_volume_m3 }},
          fill: false,
        }]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Volume - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Cubic Meters'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>
<canvas id="allpercentageChart" width="200" height="100"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("allpercentageChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'Remaining Volume Percentage',
          backgroundColor: "rgba(60,220,60,0.1)",
          borderColor: "rgba(60,220,60,1)",
          data: {{ myoutput.remaining_percentage }},
          fill: false,
        }, {
          label: 'Evaporation Volume Percentage',
          backgroundColor:"rgba(75,192,192,0.2)",
          borderColor: "rgba(75,192,192,1)",
					data: {{ myoutput.evaporation_percentage }},
          fill: false,
				}, {
					label: 'Dispersed Volume Percentage',
					backgroundColor: "rgba(180,20,100,0.1)",
          borderColor: "rgba(180,20,100,1)",
					data: {{ myoutput.dispersed_percentage }},
          fill: false,
        }]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Percentage - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: '%'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>

<canvas id="emulsificationvolumeChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("emulsificationvolumeChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'Emulsification Volume',
					backgroundColor: "rgba(232,135,135,0.1)",
          borderColor: "rgba(232,135,135,1)",
					data: {{ myoutput.emulsification_volume_m3 }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Emulsification Volume - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'cubic meters'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>

<canvas id="emulsificationpercentageChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("emulsificationpercentageChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'Emulsification Percentage',
					backgroundColor: "rgba(232,135,135,0.1)",
          borderColor: "rgba(232,135,135,1)",
					data: {{ myoutput.emulsification_percentage }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Emulsification Percentage - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: '%'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>

<canvas id="densityChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("densityChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'Density',
          backgroundColor:"rgba(228,15,228,0.1)",
          borderColor: "rgba(75,192,192,1)",
					data: {{ myoutput.d_density_kgm3 }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Density - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'kg / cubic meters'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>
<canvas id="viscocityChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("viscocityChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'viscocity',
          backgroundColor:"rgba(56,142,229,0.1)",
          borderColor: "rgba(56,142,229,1)",
					data: {{ myoutput.d_viscosity_cst }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Viscosity - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'cStokes'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>

<canvas id="areaChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("areaChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'Spreading Area',
					backgroundColor: "rgba(103,212,212,0.1)",
          borderColor: "rgba(103,212,212,1)",
					data: {{ myoutput.area_fay_km2 }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Spreading Area - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'square kilometers'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>

<canvas id="radiusChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("radiusChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'radius',
					backgroundColor: "rgba(103,212,212,0.1)",
          borderColor: "rgba(103,212,212,1)",
					data: {{ myoutput.radius }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Oil Spill Radius - Time'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'm'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>

<canvas id="distanceChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("distanceChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'distance moved',
          backgroundColor:"rgba(10,102,193,0.1)",
          borderColor: "rgba(10,102,193,1)",
					data: {{ myoutput.distance_moved }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Drift Distance for Spill Center'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'km'
    						}
    					}]
    				}
    			}
    });
</script>
<hr>
<canvas id="thicknessChart" width="200" height="100"></canvas>

<script type="text/javascript">
var ctx = document.getElementById("thicknessChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
      '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
      '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
      '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56',
      '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68',
      '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
      '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92',
      '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103',
       '104', '105', '106', '107', '108', '109', '110', '111', '112', '113',
       '114', '115', '116', '117', '118', '119', '120'],
      datasets: [{
          label: 'thickness',
					backgroundColor: "rgba(193,193,10,0.1)",
          borderColor: "rgba(193,193,10,1)",
					data: {{ myoutput.thickness }},
          fill: true,
				}]
      },
      options: {
    				responsive: true,
    				title: {
    					display: true,
    					text: 'Oil Spill Thickness'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'Time(Hours)'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: 'm'
    						}
    					}]
    				}
    			}
    });
</script>
<br>
<hr>
<div class="container">
 <div class="row">
   <div class="col-sm">
     <a href="application" class="btn btn-info btn-lg">New Project</a>
   </div>
   <div class="col-sm">
     <a href="/home" class="btn btn-danger btn-md">Home Page</a>
   </div>
   <div class="col-sm">
     <a href="/about" class="btn btn-success btn-md">About Spill Solver</a>
   </div>
 </div>
</div>
<br>
<hr>
</div>


{% endblock content %}