title: MVC5 Live refresh Chart.js
body: <p>I'm currently creating a dashboard to display information obtained from Google Analytics via Chart.js. The goal is to allow the user to choose metrics, dates, and an interval to graph, and the dashboard will call to Google and update the graph upon clicking a button. The dashboard is being created in Visual Studio 2013 in an MVC Application. The dashboard currently looks like this:<img src="https://i.stack.imgur.com/Sx4TM.png" alt="Dashboard Sample">
  The poorly-drawn box on the right is where I plan to put the button. The problem I'm having is creating the functionality for the button. I'm very very new to MVC, and I'm relatively certain that I've broken the logic, as I don't have a view. This app has basically become Controller to View. (This is what happens after dozens of MVC tutorials.</p>
  
  <p>The Controller currently looks like so:</p>
  
  <pre><code>public enum Metrics{users, newUsers, percentNewSessions,  sessionsPerUser, sessions, bounces, bounceRate, sessionDuration, hits}
  
  public enum Interval{Today, Yesterday, LastWeek, LastTwoWeeks, Daily, Weekly, Monthly, Yearly}
  
  public class HomeController : Controller
  {
      public ActionResult Index()
      {
          string accountEmailAddress = "email@thing.com";
          string keyPath = Server.MapPath("path");
          var certificate = new X509Certificate2(keyPath, "blah", X509KeyStorageFlags.Exportable);//Creates certificate
  
          var credentials = new ServiceAccountCredential(
             new ServiceAccountCredential.Initializer(accountEmailAddress)
             {
                 Scopes = new[] { AnalyticsService.Scope.AnalyticsReadonly }
             }.FromCertificate(certificate));//Creates credentials ot GA server
  
          AnalyticsService service = new AnalyticsService(new BaseClientService.Initializer()
          {
              HttpClientInitializer = credentials,
              ApplicationName = "Dash"
          });//Starts the service up.
  
          string profileId = "ga:59346790";
          string startDate = "2012-06-07";
          string endDate = "2015-02-17";
          string timing = "Yearly";
          string metrics = "ga:users";
          string[] dates = DateList(startDate, endDate, timing);
          List&lt;string&gt; ColumnName = new List&lt;string&gt;();
          List&lt;double&gt; values = new List&lt;double&gt;();
          if (timing.Equals("Daily"))
          {
              for (int i = 0; i &lt; dates.Length - 1; i++)
              {
                  DataResource.GaResource.GetRequest request = service.Data.Ga.Get(profileId, dates[i], dates[i], metrics);
                  GaData data = request.Execute();
                  ColumnName.Add(DateLabel(dates[i]));
                  if (data.Rows == null)
                  {
                      values.Add(0);
                  }
                  else
                  {
                      foreach (var row in data.Rows)
                      {
                          foreach (var item in row)
                          {
                              values.Add(Convert.ToDouble(item));
                          }
                      }
                  }
              }
          }
          else
          {
              for (int i = 0; i &lt; dates.Length - 2; i+=2)
              {
                  DataResource.GaResource.GetRequest request = service.Data.Ga.Get(profileId, dates[i], dates[i + 1], metrics);
                  GaData data = request.Execute();
                  ColumnName.Add(DateLabel(dates[i]));
                  if (data.Rows == null)
                  {
                      values.Add(0);
                  }
                  else
                  {
                      foreach (var row in data.Rows)
                      {
                          foreach (var item in row)
                          {
                              values.Add(Convert.ToDouble(item));
                          }
                      }
                  }
              }
          }
          List&lt;Metrics&gt; metricList = Enum.GetValues(typeof(Metrics)).Cast&lt;Metrics&gt;().ToList();
          List&lt;Interval&gt; intervalList = Enum.GetValues(typeof(Interval)).Cast&lt;Interval&gt;().ToList();
          ViewBag.Metrics = new SelectList(metricList);            
          ViewBag.Intervals = new SelectList(intervalList);
          values.OrderByDescending(m =&gt; values.Min());
          ViewBag.ColumnName = ColumnName.ToArray();
          ViewBag.Values = values.ToArray();
          int[] test = { 3, 5, 6, 7, 3, 8, 9 };
          ViewBag.intArray = test;
          string[] testLabel = { "This", "Is", "A", "Test", "You", "Got", "It?" };
          ViewBag.strArray = testLabel;
          return View();
      }
  
      private static string DateLabel(string date){ ....code}
      private static string[] DateList(string startDate, string endDate, string timing){...code}
  }
  </code></pre>
  
  <p>This is my view:
      @{
      ViewBag.Title = "Home Page";</p>
  
  <pre><code>double[] result = ViewBag.Values;
  string[] labels = ViewBag.ColumnName;
  string test = "";
  string label = "";
  
  for(int i =0; i&lt;= result.Length - 1; ++i)
  {
      if(i==0)
      {
          test = test + result[i].ToString();
      }
      else
      {
          test = test + "," + result[i].ToString();
      }
  }
  
  for (int i = 0; i &lt;= labels.Length - 1; ++i)
  {
      if (i == 0)
      {
          label = label + labels[i].ToString();
      }
      else
      {
          label = label + "," + labels[i].ToString();
      }
  }
  }
  &lt;label for="myChart"&gt;
      Google Analytics&lt;br /&gt;
       &lt;canvas id="myChart" width="800" height="400"&gt;&lt;/canvas&gt;
   &lt;/label&gt;
  &lt;div&gt;
      &lt;label for="Metrics"&gt;
          Metrics &lt;br /&gt;
          @Html.DropDownList("Metrics", (SelectList)ViewBag.Metrics, new { @class = "form-control" })
      &lt;/label&gt;
      &lt;label for="Intervals"&gt;
          Interval&lt;br /&gt;
          @Html.DropDownList("Intervals", (SelectList)ViewBag.Intervals, new { @class = "form-control" })
      &lt;/label&gt;
      &lt;label for="StartDate"&gt;
           Start Date&lt;br /&gt;
          @Html.TextBox("StartDate")
      &lt;/label&gt;
       &lt;label for="EndDate"&gt;
          End Date&lt;br /&gt;
          @Html.TextBox("EndDate")
      &lt;/label&gt;
   &lt;/div&gt;
  
  &lt;script&gt;
  var result = "@test";
  var resultsArray = result.split(',');
  var newLabels = "@label";
  var labelsArray = newLabels.split(',');
  var context = $("#myChart").get(0).getContext("2d");
  var data = {
      labels: labelsArray,
  
      datasets: [{
  
          label: "My First dataset",
          fillColor: "rgba(220,220,220,0,2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: resultsArray
  
      }]
  }
  var options = {
      ///Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines: true,
      //String - Colour of the grid lines
      scaleGridLineColor: "rgba(0,0,0,.05)",
      //Number - Width of the grid lines
      scaleGridLineWidth: 1,
      //Boolean - Whether the line is curved between points
      bezierCurve: true,
      //Number - Tension of the bezier curve between points
      bezierCurveTension: 0.4,
      //Boolean - Whether to show a dot for each point
      pointDot: true,
      //Number - Radius of each point dot in pixels
      pointDotRadius: 4,
      //Number - Pixel width of point dot stroke
      pointDotStrokeWidth: 1,
      //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
      pointHitDetectionRadius: 20,
      //Boolean - Whether to show a stroke for datasets
      datasetStroke: true,
      //Number - Pixel width of dataset stroke
      datasetStrokeWidth: 2,
      //Boolean - Whether to fill the dataset with a colour
      datasetFill: true,
  
  }
  var myLineChart = new Chart(context).Line(data, options)
  
  $(document).ready(function () {
      $('#StartDate').datepicker();
      $('#EndDate').datepicker();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>If someone could show me how, with my current code, I could accomplish creating a button to live refresh the dashboard that would be great, although the code is kind of FUBAR as far as MVC standards go. I'm willing to accept gentle(or not so) nudges int he right direction.</p>