title: JavaScript not running after SignalR connection
body: <p>I am using <code>SignalR</code> for the first time, alongside <code>mdb charts</code>. I am using an alert to prove that <code>SignalR</code> is working and it successfully gets my data. </p>
  
  <p>I tried adding some example chart code and it just doesn't display the graph. The code works fine when called using a <code>click</code> function.</p>
  
  <p>I was thinking it could be a timing issue, as the current update is from OnGetAsync, and it might be received before the document loads?</p>
  
  <p>I basically want to send live graph data to the page and have it update in real time.</p>
  
  <p><strong>Razor Page:</strong></p>
  
  <pre><code>&lt;div class="col"&gt;
     &lt;canvas id="myGraph" style="max-width: 500px" class="mr-2"&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong>:</p>
  
  <pre><code>var connection = new signalR.HubConnectionBuilder().withUrl("/graphs").build();
  
  (function ($) {
      "use strict"; // Start of use strict
  
      $(document).ready(function () {
  
     var ctxL2 = document.getElementById("myGraph").getContext('2d');
      var openTick = new Chart(ctxL2, {
          type: 'line',
          data: {
              labels: ["Monday", "February", "March", "April", "May", "June", "July"],
              datasets: [{
                  label: "New User Requests",
                  data: [65, 59, 80, 81, 56, 55, 40],
                  backgroundColor: [
                      'rgba(105, 0, 132, .7)',
                  ],
                  borderColor: [
                      'rgba(200, 99, 132, .9)',
                  ],
                  borderWidth: 2
              }
              ]
          },
          options: {
              responsive: true
          }
      });
  
      connection.on("sendGraphData", function (graphdata) {
          alert(graphdata);
          openTick.data = {
              labels: ["Monday", "February", "March", "April", "May", "June", "July"],
              datasets: [{
                  label: "New User Requests",
                  data: [1, 2, 3, 4, 5, 6, 7],
                  backgroundColor: [
                      'rgba(23,208,206,0.69)',
                  ],
                  borderColor: [
                      'rgba(200, 99, 132, .9)',
                  ],
                  borderWidth: 2
              }]
          };
          openTick.update();
      });
  
  
      $("#test-two").click(function () {
          openTick.data = {
              labels: ["Monday", "February", "March", "April", "May", "June", "July"],
              datasets: [{
                  label: "New User Requests",
                  data: [1, 2, 3, 4, 5, 6, 7],
                  backgroundColor: [
                      'rgba(23,208,206,0.69)',
                  ],
                  borderColor: [
                      'rgba(200, 99, 132, .9)',
                  ],
                  borderWidth: 2
              }]
          };
          openTick.update();
      });
  
          connection.start().catch(function (err) {
              return console.error(err.toString());
          });
  
       });
  })(window.jQuery);  //Update from post below.
  </code></pre>
  
  <p><strong>cshtml.cs:</strong></p>
  
  <pre><code>    public async Task OnGetAsync()
       {
          var hubConnection = new HubConnectionBuilder()
              .WithUrl("https://localhost:5001/graphs",options =&gt; {
                  options.UseDefaultCredentials = true;
              })
              .ConfigureLogging(logging =&gt; {
                  logging.SetMinimumLevel(LogLevel.Information);
                  logging.AddConsole();
              })
              .AddJsonProtocol(options =&gt; {
                  options.PayloadSerializerSettings.ContractResolver =
                      new DefaultContractResolver();
              })
              .Build();
  
          await hubConnection.StartAsync();
  
          await hubConnection.InvokeAsync("sendGraphData", mydata);
  
          await hubConnection.DisposeAsync();
  </code></pre>
  
  <p>}</p>