Chart JS not reloading in Partial View

Question

I am using Chart JS. http://www.chartjs.org/docs/

in MVC C# I have a Partial View with Data and Graph:

<div style="width: 700px; height: 450px; float: left">
    <canvas id="fuelGraph" style="width: 700px; height: 450px;"></canvas>
</div>



<script type="text/javascript">
   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
        });

    });
</script>

When I load this Partial View the First Time the Chart Loads as expected:

But when I load this partial view again after closing partial view the Canvas is Blank:

There are no Errors in Console. and I am loading this Partial View in Modal Dialogue.

EDIT:

This is the Partial View:

@model xPTCommon.DTO.AssetsDTO.FuelReadingsDTO


@{
    var fuelValues = Model.Readings.Select(s => s.FuelReading).ToArray();
    var dateValues = Model.Readings.Select(s => s.ReadingDateTime.ToString("dd/MM/yyyy HH:mm")).ToArray();
}
<div id="fuelGraphArea" style="width: 700px; height: 450px; float: left">
    <canvas id="fuelGraph" style="width: 700px; height: 450px;"></canvas>
</div>

<script type="text/javascript">
    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 <canvas> element
        $('#fuelGraphArea').append('<canvas id="fuelGraph"><canvas>');
        var ctx = document.getElementById("fuelGraph").getContext("2d");
        ctx.canvas.width = 700; 
        ctx.canvas.height = 450;

        customLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    });
</script>

Controller: This is the method I call from Ajax,

public ActionResult AssetFuelDisplay(int assetId, int companyId)
{
    var model = DALProvider.GetFuelReadings(assetId, companyId);

    return PartialView(model);
}

And it is a simple Ajax Request:

$.ajax({

method: 'GET',
url: @Url.Action("AssetFuelDisplay", "Controller"),
success: function(data){

$('partial-view').html(data);
$('partial-view').ShowModal();
}
})

Answer 1

Try to initialize the chart object when opening the jQueryUI dialog, and .destroy() it on the closing dialog event.
Also you can try setting maintainAspectRatio: false if it still doesn't work the second time.