Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.01.2015, 13:12
Shojo Shojo ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.01.2015
Beiträge: 1
Shojo befindet sich auf einem aufstrebenden Ast
Standard Problem eine canvas richtig zu leeren bzw neu zu laden..

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:
http://www.youtube.com/watch?v=Ok9cvwXZjEU&hd=1

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.
http://www.youtube.com/watch?v=Ru9Ms3Cm_zw&hd=1


Verwendet wurde hier Chartjs.org


und so befeuere ich die Canvas:
Code:
// 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
                })
        });
};
Gruß
Shojo
Mit Zitat antworten
Sponsored Links