Problem eine canvas richtig zu leeren bzw neu zu laden..

[shojo]

Hallo liebe Gemeinde,

ich habe mit einer canvas paar Probleme.

Dazu habe ich mal 2 Videos gemacht da ich nicht so recht weiß wie ich das umschreiben soll....

Hier das erste Video:
YouTube Video


Hier ist zu sehen wenn ich das canvas Hide setzte und dann wieder den Tag entferne habe, ist es nicht mehr "da".

Und hier das andere Problem das sich zwei Auswertungen wohl in die Quere kommen.
YouTube Video


Verwendet wurde hier Chartjs.org

und so befeuere ich die Canvas:

// Async Chart
function GetChart(_pid) {
    document.getElementById('ChartHeader').innerHTML = 'Auswertung der heutigen Messungen <span class="pull-right"><i class="fa fa-refresh fa-spin"></i></span>';

    AsyncGetChart(_pid).done(function (data) {
        var temp = $.parseJSON(data);
        var _labels = [];
        var _Temperatur = [];
        var _Luftfeuchtigkeit = [];
        var _Helligkeit = [];


        for (i in temp) {
            _labels.push(temp[i].TIME + ' Uhr');
            _Temperatur.push(temp[i].TEMP);
            _Helligkeit.push(temp[i].BRIGHTNESS);
            _Luftfeuchtigkeit.push(temp[i].HUMIDITY);
        }
        document.getElementById('ChartHeader').innerHTML = 'Auswertung der heutigen Messungen';
        var lineChartData = {
            labels: _labels,
            datasets: [
                            {
                                label: "Temperatur",
                                fillColor: "rgba(255,0,0,0.2)",
                                strokeColor: "rgba(255,0,0,1)",
                                pointColor: "rgba(255,0,0,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(255,0,0,1)",
                                data: _Temperatur,
                            },
                            {
                                label: "Luftfeuchtigkeit",
                                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: _Luftfeuchtigkeit,
                            },
                            {
                                label: "Helligkeit",
                                fillColor: "rgba(255,215,0,0.2)",
                                strokeColor: "rgba(255,215,0,1)",
                                pointColor: "rgba(255,215,0,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(151,187,205,1)",
                                data: _Helligkeit
                            }
            ]
        }
        var canvas = document.getElementById('Chart');
        var ctx = document.getElementById("Chart").getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var myLine = new Chart(ctx).Line(lineChartData,
            {
                responsive: true,
                animation: false
            });
    });
};

function AsyncGetChart(_pid) {
    return $.ajax
        ({
            type: 'GET',
            async: true,
            url: 'function.php',
            data:
                ({
                    Function: "GetChart",
                    pid: _pid
                })
        });
};

Ps: Das sind meine ersten versuche mit Javascript habt bitte Nachsicht!

Gruß
Shojo