title: How write SQL statement in controller to retrieve the data from user input (HTML) and do multiple filter in datatable?
body: <p>I need to do multiple search/filter the records in a datatable, but I do not know how start it. I tried to code the <code>GetSearchList()</code> function to get the user input (view-html), but I'm getting errors. I do not know how to fix them. The errors show:</p>
  <pre class="lang-none prettyprint-override"><code>Severity    Code    Description Project File    Line    Suppression State
  Error   CS0103  The name 'date' does not exist in the current context   MIMOS   C:\Users\aimi.zakaria\source\repos\MIMOS\MIMOS\Controllers\HomeController.cs    98  N/A
  Severity    Code    Description Project File    Line    Suppression State
  Error   CS0103  The name 'analytic_id' does not exist in the current context    MIMOS   C:\Users\aimi.zakaria\source\repos\MIMOS\MIMOS\Controllers\HomeController.cs    98  N/A
  Severity    Code    Description Project File    Line    Suppression State
  Error   CS0103  The name 'time_from' does not exist in the current context  MIMOS   C:\Users\aimi.zakaria\source\repos\MIMOS\MIMOS\Controllers\HomeController.cs    98  N/A
  Severity    Code    Description Project File    Line    Suppression State
  Error   CS0103  The name 'time_to' does not exist in the current context    MIMOS   C:\Users\aimi.zakaria\source\repos\MIMOS\MIMOS\Controllers\HomeController.cs    98  N/A
  </code></pre>
  <p>My code should display the charts based on the user input. For example, I have date, analytic id, time from, time to, and analysis period parameters. If the user chooses those items, the output should show the charts based on what user entered. My general idea is to retrieve the data from user input then pass it to the controller; do some queries in the controller, then display the output as I mentioned before. I have seen a few tutorials do the filtering record using AJAX, but I do not know how to implement the technique to code in my code.
  The example of output:</p>
  <p><a href="https://i.stack.imgur.com/F3QMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F3QMZ.png" alt="enter image description here" /></a></p>
  <h3>Model:</h3>
  <pre><code>using Microsoft.AspNetCore.Mvc.Rendering;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  
  namespace MIMOS.Models
  {
      public class Dropdownlist
      {
  
          public List&lt;Statistic_list&gt; statlist { get; set; }
          public List&lt;Analytic_list&gt; analyticlist { get; set; }
          public List&lt;Search_list&gt; searchlist { get; set; }
  
  }
  
  
  public class Statistic_list
  {
      public int id { get; set; }
      public int analytic_id { get; set; }
      public string date { get; set; }
      public string time { get; set; }
      public string counter { get; set; }
      public int camera_id { get; set; }
      public int vehi_1 { get; set; }
      public int vehi_2 { get; set; }
      public int vehi_3 { get; set; }
      public int vehi_4 { get; set; }
      public int vehi_5 { get; set; }
      public int vehi_6 { get; set; }
      public int total_vehicle { get; set; }
      public decimal avg_vehicle_speed { get; set; }
      public decimal avg_vehicle_gap { get; set; }
  }
  public class Analytic_list
  {
      public int analytic_id { get; set; }
  
  }
  
  public class Search_list
  {
      public int id { get; set; }
      public int analytic_id { get; set; }
      public string date { get; set; }
      public string time { get; set; }
      public string counter { get; set; }
      public int camera_id { get; set; }
      public int vehi_1 { get; set; }
      public int vehi_2 { get; set; }
      public int vehi_3 { get; set; }
      public int vehi_4 { get; set; }
      public int vehi_5 { get; set; }
      public int vehi_6 { get; set; }
      public int total_vehicle { get; set; }
      public decimal avg_vehicle_speed { get; set; }
      public decimal avg_vehicle_gap { get; set; }
  }
  }
  </code></pre>
  <h3>Home Controller:</h3>
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Diagnostics;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.Extensions.Logging;
  using MIMOS.Models;
  using Microsoft.Extensions.Configuration;
  using System.IO;
  using MySql.Data.MySqlClient;
  using Microsoft.AspNetCore.Mvc.Rendering;
  
  namespace MIMOS.Controllers
  {
      public class HomeController : Controller
      {
          private readonly ILogger&lt;HomeController&gt; _logger;
          public IConfigurationRoot Configuration { get; }
          public IConfigurationRoot GetConnection()
  
          {
  
              var builder = new ConfigurationBuilder().SetBasePath(Directory.GetCurrentDirectory()).AddJsonFile(&quot;appSettings.json&quot;).Build();
  
              return builder;
  
          }
          /*public HomeController(ILogger&lt;HomeController&gt; logger)
          {
              _logger = logger;
          }*/
  
          public IActionResult Index()
          {
              Dropdownlist multi_Dropdownlist = new Dropdownlist
              {
                  statlist = GetStatistics(),
  
                  analyticlist = GetAnalytic(),
  
                  //searchlist = GetSearchList()
  
  
              };
              return View(multi_Dropdownlist);
  
          }
  
  
          public List&lt;Search_list&gt; GetSearchList()
  
          {
  
              var connection = GetConnection().GetSection(&quot;ConnectionStrings&quot;).GetSection(&quot;DefaultConnection&quot;).Value;
  
              MySqlConnection con = new MySqlConnection(connection);
  
              MySqlCommand cmd = new MySqlCommand(&quot;SELECT time FROM statistics WHERE date = '&quot; + date + &quot;' and analytic_id =&quot; + analytic_id + &quot; and time&gt;='&quot; + time_from + &quot;' and time&lt;'&quot; + time_to + &quot;'; &quot;, con);
  
              con.Open();
              var reader = cmd.ExecuteReader();
  
  
              List&lt;Search_list&gt; searchlist = new List&lt;Search_list&gt;();
  
              if (reader.HasRows)
  
              {
  
                  while (reader.Read())
  
                  {
  
                      searchlist.Add(new Search_list()
  
                      {
                          vehi_1 = Convert.ToInt32(reader[&quot;vehi_1&quot;]),
                          date = reader[&quot;date&quot;].ToString(),
                          time = reader[&quot;time&quot;].ToString(),
                          analytic_id = Convert.ToInt32(reader[&quot;analytic_id&quot;]),
                          vehi_2 = Convert.ToInt32(reader[&quot;vehi_2&quot;]),
                          vehi_3 = Convert.ToInt32(reader[&quot;vehi_3&quot;]),
                          vehi_4 = Convert.ToInt32(reader[&quot;vehi_4&quot;]),
                          vehi_5 = Convert.ToInt32(reader[&quot;vehi_5&quot;]),
                          vehi_6 = Convert.ToInt32(reader[&quot;vehi_6&quot;]),
                          total_vehicle = Convert.ToInt32(reader[&quot;total_vehicle&quot;]),
                          avg_vehicle_speed = Convert.ToDecimal(reader[&quot;avg_vehicle_speed&quot;]),
                          avg_vehicle_gap = Convert.ToDecimal(reader[&quot;avg_vehicle_gap&quot;])
  
  
                      });
  
                  }
  
              }
  
              con.Close();
  
              return searchlist;
  
          }
      
          public List&lt;Statistic_list&gt; GetStatistics()
  
          {
  
              var connection = GetConnection().GetSection(&quot;ConnectionStrings&quot;).GetSection(&quot;DefaultConnection&quot;).Value;
  
              MySqlConnection con = new MySqlConnection(connection);
  
              MySqlCommand cmd = new MySqlCommand(&quot;Select * from statistics&quot;, con);
  
              con.Open();
  
              var reader = cmd.ExecuteReader();
  
              List&lt;Statistic_list&gt; list = new List&lt;Statistic_list&gt;();
  
              if (reader.HasRows)
  
              {
  
                  while (reader.Read())
  
                  {
                      list.Add(new Statistic_list()
  
                      {
                          time = reader[&quot;time&quot;].ToString(),
                          vehi_1 = Convert.ToInt32(reader[&quot;vehi_1&quot;]),
                          vehi_2 = Convert.ToInt32(reader[&quot;vehi_2&quot;]),
                          vehi_3 = Convert.ToInt32(reader[&quot;vehi_3&quot;]),
                          vehi_4 = Convert.ToInt32(reader[&quot;vehi_4&quot;]),
                          vehi_5 = Convert.ToInt32(reader[&quot;vehi_5&quot;]),
                          vehi_6 = Convert.ToInt32(reader[&quot;vehi_6&quot;]),
                          total_vehicle = Convert.ToInt32(reader[&quot;total_vehicle&quot;]),
                          avg_vehicle_speed = Convert.ToDecimal(reader[&quot;avg_vehicle_speed&quot;]),
                          avg_vehicle_gap = Convert.ToDecimal(reader[&quot;avg_vehicle_gap&quot;])
  
                      });
  
                  }
  
              }
  
              con.Close();
  
              return list;
  
          }
  
          public List&lt;Analytic_list&gt; GetAnalytic()
  
          {
  
              var connection = GetConnection().GetSection(&quot;ConnectionStrings&quot;).GetSection(&quot;DefaultConnection&quot;).Value;
  
              MySqlConnection con = new MySqlConnection(connection);
  
              MySqlCommand cmd = new MySqlCommand(&quot;Select distinct analytic_id from statistics;&quot;, con);
  
              con.Open();
  
              var reader = cmd.ExecuteReader();
  
              List&lt;Analytic_list&gt; list = new List&lt;Analytic_list&gt;();
  
              if (reader.HasRows)
  
              {
  
                  while (reader.Read())
  
                  {
                      list.Add(new Analytic_list()
  
                      {
                          analytic_id = Convert.ToInt32(reader[&quot;analytic_id&quot;])
  
                      });
  
                  }
  
              }
  
              con.Close();
  
              return list;
  
          }
  
         
  
          [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
          public IActionResult Error()
          {
              return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
          }
      }
  }
  </code></pre>
  <h3>View:</h3>
  <pre><code>&lt;p style=&quot;font-family:verdana;text-align:center;&quot;&gt;&lt;b&gt;Report Parameter&lt;/b&gt;&lt;/p&gt;&lt;hr&gt;
  &lt;form class=&quot;form-inline&quot; action=&quot;Index&quot; method=&quot;get&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;date&quot;&gt;Date:&lt;/label&gt;
          &lt;input type=&quot;date&quot; class=&quot;form-control&quot; id=&quot;date&quot; placeholder=&quot;Select date&quot; name=&quot;date&quot;&gt;
      &lt;/div&gt; &amp;nbsp;&amp;nbsp;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;analytic_id&quot;&gt;Analytics ID:&lt;/label&gt;
          @Html.DropDownListFor(model =&gt; model.analyticlist, new SelectList(Model.analyticlist, &quot;analytic_id&quot;, &quot;analytic_id&quot;))
      &lt;/div&gt; &amp;nbsp;&amp;nbsp;
       &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;time_from&quot;&gt;Time From:&lt;/label&gt;
          &lt;select name=&quot;time_from&quot; class=&quot;form-control&quot; id=&quot;time_from&quot;&gt;
              &lt;option value=&quot;0000&quot;&gt;12.00 am&lt;/option&gt;
              &lt;option value=&quot;0030&quot;&gt;12.30 am&lt;/option&gt;
              &lt;option value=&quot;0100&quot;&gt;1.00 am&lt;/option&gt;
              &lt;option value=&quot;0130&quot;&gt;1.30 am&lt;/option&gt;
              &lt;option value=&quot;0200&quot;&gt;2.00 am&lt;/option&gt;
              &lt;option value=&quot;0230&quot;&gt;2.30 am&lt;/option&gt;
              &lt;option value=&quot;0300&quot;&gt;3.00 am&lt;/option&gt;
              &lt;option value=&quot;0330&quot;&gt;3.30 am&lt;/option&gt;
              &lt;option value=&quot;0400&quot;&gt;4.00 am&lt;/option&gt;
              &lt;option value=&quot;0430&quot;&gt;4.30 am&lt;/option&gt;
              &lt;option value=&quot;0500&quot;&gt;5.00 am&lt;/option&gt;
              &lt;option value=&quot;0530&quot;&gt;5.30 am&lt;/option&gt;
              &lt;option value=&quot;0600&quot;&gt;6.00 am&lt;/option&gt;
              &lt;option value=&quot;0630&quot;&gt;6.30 am&lt;/option&gt;
              &lt;option value=&quot;0700&quot;&gt;7.00 am&lt;/option&gt;
              &lt;option value=&quot;0730&quot;&gt;7.30 am&lt;/option&gt;
              &lt;option value=&quot;0800&quot;&gt;8.00 am&lt;/option&gt;
              &lt;option value=&quot;0830&quot;&gt;8.30 am&lt;/option&gt;
              &lt;option value=&quot;0900&quot;&gt;9.00 am&lt;/option&gt;
              &lt;option value=&quot;0930&quot;&gt;9.30 am&lt;/option&gt;
              &lt;option value=&quot;1000&quot;&gt;10.00 am&lt;/option&gt;
              &lt;option value=&quot;1030&quot;&gt;10.30 am&lt;/option&gt;
              &lt;option value=&quot;1100&quot;&gt;11.00 am&lt;/option&gt;
              &lt;option value=&quot;1130&quot;&gt;11.30 am&lt;/option&gt;
              &lt;option value=&quot;1200&quot;&gt;12.00 pm&lt;/option&gt;
              &lt;option value=&quot;1230&quot;&gt;12.30 pm&lt;/option&gt;
              &lt;option value=&quot;1300&quot;&gt;1.00 pm&lt;/option&gt;
              &lt;option value=&quot;1330&quot;&gt;1.30 pm&lt;/option&gt;
              &lt;option value=&quot;1400&quot;&gt;2.00 pm&lt;/option&gt;
              &lt;option value=&quot;1430&quot;&gt;2.30 pm&lt;/option&gt;
              &lt;option value=&quot;1500&quot;&gt;3.00 pm&lt;/option&gt;
              &lt;option value=&quot;1530&quot;&gt;3.30 pm&lt;/option&gt;
              &lt;option value=&quot;1600&quot;&gt;4.00 pm&lt;/option&gt;
              &lt;option value=&quot;1630&quot;&gt;4.30 pm&lt;/option&gt;
              &lt;option value=&quot;1700&quot;&gt;5.00 pm&lt;/option&gt;
              &lt;option value=&quot;1730&quot;&gt;5.30 pm&lt;/option&gt;
              &lt;option value=&quot;1800&quot;&gt;6.00 pm&lt;/option&gt;
              &lt;option value=&quot;1830&quot;&gt;6.30 pm&lt;/option&gt;
              &lt;option value=&quot;1900&quot;&gt;7.00 pm&lt;/option&gt;
              &lt;option value=&quot;1930&quot;&gt;7.30 pm&lt;/option&gt;
              &lt;option value=&quot;2000&quot;&gt;8.00 pm&lt;/option&gt;
              &lt;option value=&quot;2030&quot;&gt;8.30 pm&lt;/option&gt;
              &lt;option value=&quot;2100&quot;&gt;9.00 pm&lt;/option&gt;
              &lt;option value=&quot;2130&quot;&gt;9.30 pm&lt;/option&gt;
              &lt;option value=&quot;2200&quot;&gt;10.00 pm&lt;/option&gt;
              &lt;option value=&quot;2230&quot;&gt;10.30 pm&lt;/option&gt;
              &lt;option value=&quot;2300&quot;&gt;11.00 pm&lt;/option&gt;
              &lt;option value=&quot;2330&quot;&gt;11.30 pm&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt; &amp;nbsp;&amp;nbsp;
       &lt;div class=&quot;form-group&quot;&gt;
           &lt;label for=&quot;time_to&quot;&gt;Time To:&lt;/label&gt;
           &lt;select name=&quot;time_to&quot; class=&quot;form-control&quot; id=&quot;time_to&quot;&gt;
               &lt;option value=&quot;0000&quot;&gt;12.00 am&lt;/option&gt;
               &lt;option value=&quot;0030&quot;&gt;12.30 am&lt;/option&gt;
               &lt;option value=&quot;0100&quot;&gt;1.00 am&lt;/option&gt;
               &lt;option value=&quot;0130&quot;&gt;1.30 am&lt;/option&gt;
               &lt;option value=&quot;0200&quot;&gt;2.00 am&lt;/option&gt;
               &lt;option value=&quot;0230&quot;&gt;2.30 am&lt;/option&gt;
               &lt;option value=&quot;0300&quot;&gt;3.00 am&lt;/option&gt;
               &lt;option value=&quot;0330&quot;&gt;3.30 am&lt;/option&gt;
               &lt;option value=&quot;0400&quot;&gt;4.00 am&lt;/option&gt;
               &lt;option value=&quot;0430&quot;&gt;4.30 am&lt;/option&gt;
               &lt;option value=&quot;0500&quot;&gt;5.00 am&lt;/option&gt;
               &lt;option value=&quot;0530&quot;&gt;5.30 am&lt;/option&gt;
               &lt;option value=&quot;0600&quot;&gt;6.00 am&lt;/option&gt;
               &lt;option value=&quot;0630&quot;&gt;6.30 am&lt;/option&gt;
               &lt;option value=&quot;0700&quot;&gt;7.00 am&lt;/option&gt;
               &lt;option value=&quot;0730&quot;&gt;7.30 am&lt;/option&gt;
               &lt;option value=&quot;0800&quot;&gt;8.00 am&lt;/option&gt;
               &lt;option value=&quot;0830&quot;&gt;8.30 am&lt;/option&gt;
               &lt;option value=&quot;0900&quot;&gt;9.00 am&lt;/option&gt;
               &lt;option value=&quot;0930&quot;&gt;9.30 am&lt;/option&gt;
               &lt;option value=&quot;1000&quot;&gt;10.00 am&lt;/option&gt;
               &lt;option value=&quot;1030&quot;&gt;10.30 am&lt;/option&gt;
               &lt;option value=&quot;1100&quot;&gt;11.00 am&lt;/option&gt;
               &lt;option value=&quot;1130&quot;&gt;11.30 am&lt;/option&gt;
               &lt;option value=&quot;1200&quot;&gt;12.00 pm&lt;/option&gt;
               &lt;option value=&quot;1230&quot;&gt;12.30 pm&lt;/option&gt;
               &lt;option value=&quot;1300&quot;&gt;1.00 pm&lt;/option&gt;
               &lt;option value=&quot;1330&quot;&gt;1.30 pm&lt;/option&gt;
               &lt;option value=&quot;1400&quot;&gt;2.00 pm&lt;/option&gt;
               &lt;option value=&quot;1430&quot;&gt;2.30 pm&lt;/option&gt;
               &lt;option value=&quot;1500&quot;&gt;3.00 pm&lt;/option&gt;
               &lt;option value=&quot;1530&quot;&gt;3.30 pm&lt;/option&gt;
               &lt;option value=&quot;1600&quot;&gt;4.00 pm&lt;/option&gt;
               &lt;option value=&quot;1630&quot;&gt;4.30 pm&lt;/option&gt;
               &lt;option value=&quot;1700&quot;&gt;5.00 pm&lt;/option&gt;
               &lt;option value=&quot;1730&quot;&gt;5.30 pm&lt;/option&gt;
               &lt;option value=&quot;1800&quot;&gt;6.00 pm&lt;/option&gt;
               &lt;option value=&quot;1830&quot;&gt;6.30 pm&lt;/option&gt;
               &lt;option value=&quot;1900&quot;&gt;7.00 pm&lt;/option&gt;
               &lt;option value=&quot;1930&quot;&gt;7.30 pm&lt;/option&gt;
               &lt;option value=&quot;2000&quot;&gt;8.00 pm&lt;/option&gt;
               &lt;option value=&quot;2030&quot;&gt;8.30 pm&lt;/option&gt;
               &lt;option value=&quot;2100&quot;&gt;9.00 pm&lt;/option&gt;
               &lt;option value=&quot;2130&quot;&gt;9.30 pm&lt;/option&gt;
               &lt;option value=&quot;2200&quot;&gt;10.00 pm&lt;/option&gt;
               &lt;option value=&quot;2230&quot;&gt;10.30 pm&lt;/option&gt;
               &lt;option value=&quot;2300&quot;&gt;11.00 pm&lt;/option&gt;
               &lt;option value=&quot;2330&quot;&gt;11.30 pm&lt;/option&gt;
           &lt;/select&gt;
       &lt;/div&gt;&amp;nbsp;&amp;nbsp;
          &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;analysis_period&quot; id=&quot;analysis_period&quot;&gt;Analysis Period:&lt;/label&gt;
          &lt;select name=&quot;analysis_period&quot; class=&quot;form-control&quot;&gt;
              &lt;option value=&quot;five_min&quot;&gt;5 mins&lt;/option&gt;
              &lt;option value=&quot;half_hour&quot;&gt;30 mins&lt;/option&gt;
              &lt;option value=&quot;one_hour&quot;&gt;1 hours&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
       &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot; id=&quot;search&quot;&gt;&lt;i class='fas fa-search' style='color:black'&gt;&lt;/i&gt;&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  &lt;/form&gt;
  </code></pre>
  <h3>The datatable (View):</h3>
  <pre><code>@model MIMOS.Models.Dropdownlist
  
  &lt;body&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color: #ffffff;&quot;&gt;
              &lt;figure class=&quot;highcharts-figure&quot;&gt;
                  &lt;div id=&quot;container_one&quot;&gt;&lt;/div&gt;
                  &lt;script src=&quot;~/js/chart_one.js&quot;&gt;&lt;/script&gt;
  
                  &lt;table id=&quot;datatable_one&quot; style=&quot;display:none&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Time&lt;/th&gt;
                          &lt;th&gt;C1&lt;/th&gt;
                          &lt;th&gt;C2&lt;/th&gt;
                          &lt;th&gt;C3&lt;/th&gt;
                          &lt;th&gt;C4&lt;/th&gt;
                          &lt;th&gt;C5&lt;/th&gt;
                          &lt;th&gt;C6&lt;/th&gt;
                      &lt;/tr&gt;
                      @foreach (var item in Model.statlist)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.time)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_1)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_2)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_3)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_4)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_5)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_6)&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  &lt;/table&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color:#ffffff;&quot;&gt;
              &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
              &lt;script src=&quot;~/js/chart_one.js&quot;&gt;&lt;/script&gt;
              &lt;figure class=&quot;highcharts-figure&quot;&gt;
                  &lt;table id=&quot;datatable&quot; style=&quot;display:none&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Time&lt;/th&gt;
                          &lt;th&gt;C1&lt;/th&gt;
                          &lt;th&gt;C2&lt;/th&gt;
                          &lt;th&gt;C3&lt;/th&gt;
                          &lt;th&gt;C4&lt;/th&gt;
                          &lt;th&gt;C5&lt;/th&gt;
                          &lt;th&gt;C6&lt;/th&gt;
                          &lt;th&gt;Total Vehicle&lt;/th&gt;
                      &lt;/tr&gt;
                      @foreach (var item in Model.statlist)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.time)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_1)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_2)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_3)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_4)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_5)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_6)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.total_vehicle)&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  &lt;/table&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color:#ffffff;&quot;&gt;
              &lt;div id=&quot;container_two&quot;&gt;&lt;/div&gt;
              &lt;script src=&quot;~/js/chart_two.js&quot;&gt;&lt;/script&gt;
              &lt;figure class=&quot;highcharts-figure&quot;&gt;
                  &lt;table id=&quot;datatable_two&quot; style=&quot;display:none&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Time&lt;/th&gt;
                          &lt;th&gt;Average Speed&lt;/th&gt;
  
                      &lt;/tr&gt;
                      @foreach (var item in Model.statlist)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.time)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.avg_vehicle_speed)&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  &lt;/table&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color:#ffffff;&quot;&gt;
              &lt;div id=&quot;container_two&quot;&gt;&lt;/div&gt;
              &lt;script src=&quot;~/js/chart_two.js&quot;&gt;&lt;/script&gt;
              &lt;figure class=&quot;highcharts-figure&quot;&gt;
                  &lt;table id=&quot;datatable_two&quot; style=&quot;display:none&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Time&lt;/th&gt;
                          &lt;th&gt;C1&lt;/th&gt;
                          &lt;th&gt;C2&lt;/th&gt;
                          &lt;th&gt;C3&lt;/th&gt;
                          &lt;th&gt;C4&lt;/th&gt;
                          &lt;th&gt;C5&lt;/th&gt;
                          &lt;th&gt;C6&lt;/th&gt;
                          &lt;th&gt;Total Vehicle&lt;/th&gt;
                      &lt;/tr&gt;
                      @foreach (var item in Model.statlist)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.time)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_1)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_2)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_3)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_4)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_5)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_6)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.total_vehicle)&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  &lt;/table&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color: #ffffff;&quot;&gt;
              &lt;figure class=&quot;highcharts-figure&quot;&gt;
                  &lt;div id=&quot;container_three&quot;&gt;&lt;/div&gt;
                  &lt;script src=&quot;~/js/chart_three.js&quot;&gt;&lt;/script&gt;
  
                  &lt;table id=&quot;datatable_three&quot; style=&quot;display:none&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Time&lt;/th&gt;
                          &lt;th&gt;Gap&lt;/th&gt;
                      &lt;/tr&gt;
                      @foreach (var item in Model.statlist)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.time)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.avg_vehicle_gap)&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  &lt;/table&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color:#ffffff;&quot;&gt;
              &lt;div id=&quot;container_two&quot;&gt;&lt;/div&gt;
              &lt;script src=&quot;~/js/chart_two.js&quot;&gt;&lt;/script&gt;
              &lt;figure class=&quot;highcharts-figure&quot;&gt;
                  &lt;table id=&quot;datatable_two&quot; style=&quot;display:none&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Time&lt;/th&gt;
                          &lt;th&gt;C1&lt;/th&gt;
                          &lt;th&gt;C2&lt;/th&gt;
                          &lt;th&gt;C3&lt;/th&gt;
                          &lt;th&gt;C4&lt;/th&gt;
                          &lt;th&gt;C5&lt;/th&gt;
                          &lt;th&gt;C6&lt;/th&gt;
                          &lt;th&gt;Total Vehicle&lt;/th&gt;
                      &lt;/tr&gt;
                      @foreach (var item in Model.statlist)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.time)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_1)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_2)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_3)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_4)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_5)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.vehi_6)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayTextFor(modelItem =&gt; item.total_vehicle)&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  &lt;/table&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>