title: Chart JS not reloading in Partial View
body: <p>I am using Chart JS. <a href="http://www.chartjs.org/docs/" rel="nofollow noreferrer">http://www.chartjs.org/docs/</a> </p>
  
  <p>in MVC C# I have a Partial View with Data and Graph:</p>
  
  <pre><code>&lt;div style="width: 700px; height: 450px; float: left"&gt;
      &lt;canvas id="fuelGraph" style="width: 700px; height: 450px;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
     var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      var items = @Html.Raw(Json.Encode(fuelValues));
      var itemLabel = @Html.Raw(Json.Encode(dateValues));
      console.log(items);
      console.log(itemLabel);
  
      var lineChartData = {
          labels: itemLabel,
          datasets: [
  
              {
                  label: "My Second dataset",
                  fillColor: "rgba(151,187,205,0.2)",
                  strokeColor: "rgba(151,187,205,1)",
                  pointColor: "rgba(151,187,205,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(151,187,205,1)",
                  data: items
              }
         ]
  
      }
  
      $(document).ready(function() {
          var ctx = document.getElementById("fuelGraph").getContext("2d");
  
          window.myLine = new Chart(ctx).Line(lineChartData, {
              responsive: true
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I load this Partial View the First Time the Chart Loads as expected:</p>
  
  <p><img src="https://i.stack.imgur.com/reCjZ.png" alt="enter image description here"></p>
  
  <p>But when I load this partial view again after closing partial view the Canvas is Blank:</p>
  
  <p>There are no Errors in Console. and I am loading this Partial View in Modal Dialogue.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is the Partial View:</p>
  
  <pre><code>@model xPTCommon.DTO.AssetsDTO.FuelReadingsDTO
  
  
  @{
      var fuelValues = Model.Readings.Select(s =&gt; s.FuelReading).ToArray();
      var dateValues = Model.Readings.Select(s =&gt; s.ReadingDateTime.ToString("dd/MM/yyyy HH:mm")).ToArray();
  }
  &lt;div id="fuelGraphArea" style="width: 700px; height: 450px; float: left"&gt;
      &lt;canvas id="fuelGraph" style="width: 700px; height: 450px;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var customLine;
  
      var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      var items = @Html.Raw(Json.Encode(fuelValues));
      var itemLabel = @Html.Raw(Json.Encode(dateValues));
  
      var lineChartData = {
          labels: itemLabel,
          datasets: [
  
              {
                  label: "My Second dataset",
                  fillColor: "rgba(151,187,205,0.2)",
                  strokeColor: "rgba(151,187,205,1)",
                  pointColor: "rgba(151,187,205,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(151,187,205,1)",
                  data: items
              }
          ]
  
      }
  
      $(document).ready(function() {
  
          $('#fuelGraph').remove(); // this is my &lt;canvas&gt; element
          $('#fuelGraphArea').append('&lt;canvas id="fuelGraph"&gt;&lt;canvas&gt;');
          var ctx = document.getElementById("fuelGraph").getContext("2d");
          ctx.canvas.width = 700; 
          ctx.canvas.height = 450;
  
          customLine = new Chart(ctx).Line(lineChartData, {
              responsive: true
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller: This is the method I call from Ajax,</p>
  
  <pre><code>public ActionResult AssetFuelDisplay(int assetId, int companyId)
  {
      var model = DALProvider.GetFuelReadings(assetId, companyId);
  
      return PartialView(model);
  }
  </code></pre>
  
  <p>And it is a simple Ajax Request:</p>
  
  <pre><code>$.ajax({
  
  method: 'GET',
  url: @Url.Action("AssetFuelDisplay", "Controller"),
  success: function(data){
  
  $('partial-view').html(data);
  $('partial-view').ShowModal();
  }
  })
  </code></pre>