XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Problem eine canvas richtig zu leeren bzw neu zu laden.. (http://xhtmlforum.de/showthread.php?t=71642)

Shojo 10.01.2015 13:12

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020