Javascript Problem

[Kilian K. (kellermaaan)]

Hallo zusammen,

da ich noch nicht so wirklich mit Javascript gearbeitet habe, komme ich 
bei einem möglichen einfachen Problem nicht weiter und hoffe hier könnte 
mir jemand helfen!

<script language="JavaScript">
    <!--
        var mylabels = new Array();
        var myvalues = new Array();
        function getMeasureVal() {
        var request = false;
        function measureComplete() {
            if (request.readyState == 4) {
                if (request.status == 200) {
                    alert(request.responseText);
                }
            }
        }
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (request) {
            request.open("GET", "/measuervaluesget?id=" + Math.random(), true);
            request.onreadystatechange = measureComplete;
            request.send(null);
        }
    }
    
    var lineChartData = {
        labels : mylabels,
        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 : myvalues
            }
        ]

    }
    
    window.onload = function {
        var ctx = document.getElementById("diagrammMessung").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    }
    //-->
    </script>

Die Daten die ich haben möchte bekomme ich auch, da ich diese oben mit 
alert() auch ausgeben kann. Jetzt weiß ich nur nicht wie ich die Daten 
in die beiden Arrays myvalues und mylabels bekommen soll... Habs mit 
push etc. probiert aber es wollte nicht so wie ich es wollte! Hoffe 
jemand könnte mir helfen. :-)

Gruß KK

[Peter II (Gast)]

Kilian K. schrieb:
> Jetzt weiß ich nur nicht wie ich die Daten
> in die beiden Arrays myvalues und mylabels bekommen soll... Habs mit
> push etc. probiert aber es wollte nicht so wie ich es wollte! Hoffe
> jemand könnte mir helfen. :-)

dafür müssen man wissen was in responseText drin steht.

[Kilian K. (kellermaaan)]

Also in dem String ist einmal eine Zeit und der Messwert zu der Zeit.

[[zeit, messwert], [zeit,messwert],...]

Dies könnte allerdings noch verändert oder angepasst werden wenn es 
besser geht!

[Peter II (Gast)]

Kilian K. schrieb:
> Dies könnte allerdings noch verändert oder angepasst werden wenn es
> besser geht!

dann würde ich vorschlagen, mache ein json daraus.

https://de.wikipedia.org/wiki/JavaScript_Object_Notation

Darauf kann dann javasscript besser zugreifen.

[Kilian K. (kellermaaan)]

Peter II schrieb:
> dann würde ich vorschlagen, mache ein json daraus.

Wie stelle ich das denn am besten an?
Zur Info: das Projekt läuft auf einem Arduino Taijiuino mit dem lwIP 
Stack und einem Webserver. Und die Programmiersprache ist C.

[Peter II (Gast)]

Kilian K. schrieb:
> Wie stelle ich das denn am besten an?

seht doch im link wie der String dann aussehen soll.

[Daniel A. (daniel-a)]

Kilian K. schrieb:
> window.onload = function {

Syntaxfehler. Korrekt wäre:
window.onload = function(){

Kilian K. schrieb:
> [[zeit, messwert], [zeit,messwert],...]

Sieht nach gültigen json arrays aus. Welche lib wird für die charts 
Verwendet?

Ich würde volgendes Versuchen:

var chart,myLine,myLine2;
       function measureComplete() {
            if (request.readyState == 4) {
                if (request.status == 200) {
                    myLine2 = chart.Line(JSON.parse(request.responseText), {
                      responsive: true
                    });
                }
            }
        }

// ....

    window.onload = function {
        var ctx = document.getElementById("diagrammMessung").getContext("2d");
        chart = new Chart(ctx);
        myLine = chart.Line(lineChartData, {
            responsive: true
        });
    }

[Daniel A. (daniel-a)]

PS: Das Codedesign ist ausbaufähig. Das ganze könnte in OOP verpackt 
werden, es gibt ünnötige verwendungen von Globalen und window. Der 
compatiblity code beim XMLHttpRequest ist nutzlos, weil das verwendete 
canvas mit den alten briwsern sowisonicht geht, un window.onload kann 
durch addEventListener("load"  ersetzt werden.

[Kilian K. (kellermaaan)]

Für die Charts verwende ich die chart.js lib.
Aber danke schon mal für deine Hilfe. Werde deine Verbesserungen mal 
ausprobieren!

[Kilian K. (kellermaaan)]

Also die Werte schicke ich jetzt z.B. so weg

{ 
"Zeit": [ 6.00,24.00,40.00,58.00,76.00,92.00,110.00,128.00,144.00,162.00],
 "Messwert": [ 992.00,991.00,991.00,991.00,992.00,992.00,991.00,991.00,992.00,992.00]
}

Wie bekomme ich jetzt in Javascript meine Werte daraus gefiltert damit 
ich sie in meine Arrays schreiben kann?

<script language="JavaScript">
    <!--
        function getMeasureVal(){
            var request = false;
            function measureComplete() {
                if (request.readyState == 4) {
                    if (request.status == 200) {
                       alert(request.responseText);
                    }
                }
            }
            request = new XMLHttpRequest();
        
            if (request) {
                request.open("GET", "/measurevaluesget?id=" + Math.random(), true);
                request.onreadystatechange = measureComplete;
                request.send(null);
            }
            else{
                alert("no request");
            }
        }
        

        var lineChartData = {
            labels : [1,2,3,4,5,6,7,8,9],
            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 : [0.6,5,3,8,9,5,0.6,10,7,1]
                }
            ]
        }
            
        window.onload = function() {
            var ctx = document.getElementById("diagrammMessung").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: true
            });
        }
    //-->
    </script>

[Daniel A. (daniel-a)]

Ich halte die chart.js lib hier für ungeeignet. Du hast Zeitpunkte 
(X-Achse) und Messwerte (Y-Achse) dazu. charts.js erwartet bei line 
charts jedoch nur die werte für die Y-Achse, wobei alle Punkte auf der 
X-Achse gleichweit entfernt sind. Einen geeigneten Charttyp gibt es in 
chart.js noch nicht (wobei man einen erstellen könnte, aber das wird zu 
aufwendig).

[Kilian K. (kellermaaan)]

Mein Problem momentan ist, wenn ich das so mache wie in meinem Post 
darüber, bekomme ich immer das ausgegeben:

婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚婚

Woran könnte das liegen?

[Kilian K. (kellermaaan)]

So, momentan bin ich soweit, dass ich diesen Text

{ 
"Zeit": [ 42.00,60.00,77.00,95.00,112.00,129.00,147.00,164.00,181.00,199.00],
"Messwert": [ 995.00,995.00,995.00,995.00,994.00,995.00,995.00,995.00,995.00,995.00]
}

 mit alert() ausgeben kann.

Da ich aber noch nicht viel mit JavaScript gearbeitet habe, weiß ich 
jetzt nicht wie ich jeweils die Zeitwerte und die Messwerte in zwei 
Arrays schreiben aufteilen kann. Vielleicht hat das jemand schon mal 
gemacht und könnte mir helfen? :-D

[Bastler (Gast)]

das Geheimnis ist:

var Data = JSON.parse( json_string );

Die Funktion liefert ein JavaScript Objekt mit 2 Attributen, die beide 
Arrays sind.

[Kilian K. (kellermaaan)]

Bastler schrieb:
> das Geheimnis ist:var Data = JSON.parse( json_string );Die Funktion
> liefert ein JavaScript Objekt mit 2 Attributen, die beide
> Arrays sind.

Ich danke Dir! Hab es hinbekommen. :-D

[Kilian K. (kellermaaan)]

Hallo, ich habe leider noch ein weiteres Problem entdeckt!

Hier erst nochmal ein Teil meines Codes:

function getValues() {
  "use strict";
    var request = false,
    mylabels = [],
    myvalues = [];
  
    function measureComplete() {
        if (request.readyState === 4) {
            if (request.status === 200) {
        var data = JSON.parse(request.responseText),
          i = 0,
          anzahlWerte = 0;
        
        anzahlWerte = data.Anzahl;
        
        for (i = 0; i < anzahlWerte; i += 1) {
          mylabels.push(data.Zeit[i]);
          myvalues.push(data.Messwert[i]);
        }
        
        drawDiagramm(mylabels, myvalues);
        
        document.getElementById("DruckMittelwert").firstChild.nodeValue = data.Mittelwert;
        document.getElementById("DruckFlaeche").firstChild.nodeValue = data.Flaeche;
        document.getElementById("DruckMax").firstChild.nodeValue = data.Max;
        document.getElementById("DruckZeit").firstChild.nodeValue = data.ZeitGesamt;
        document.getElementById("DruckStoesselZeit").firstChild.nodeValue = data.StoesselZeit;
            }
        }
    }
    request = new XMLHttpRequest();
        
    if (request) {
        request.open("GET", "/getvalues?id=" + Math.random(), true);
        request.onreadystatechange = measureComplete;
        request.send(null);
    }
}

function startMeasure() {
  "use strict";
  var request = false;
  
  window.myLine.destroy();
  
  request = new XMLHttpRequest();
  
  if (request) {
    request.open("GET", "/startmeasure?id=" + Math.random(), true);
    request.send(null);
    
    getValues();
  }
}

Also "startMeasure()" soll nur ausgeführt werden wenn ich einen Button 
betätige und "getValues()" wird einmal beim laden der Seite und von 
"startMeasure()" ausgeführt.

Allerdings tritt manchmal der Fall ein, dass wenn ich auf den Button 
klicke, "startMeasure()" aufgerufen wird, danach dann "getValues()" und 
danach dann "startMeasure()" ein weiteres mal. Dies sollte eigentlich 
nicht passieren. Es ist auch nicht jedesmal. Ich finde aber auch nicht 
den Fehler, deshalb hoffe ich, dass hier vielleicht jemand den Fehler 
findet.

MfG Kilian

[Sascha W. (sascha-w)]

Hallo,

anhand des gezeigten Codes ist dieses Verhalten nicht erklärbar. Wie 
sieht die HTML aus?

Sascha

[Kilian K. (kellermaaan)]

Hier ist der HTML-Code. Da ist mir aber auch nichts aufgefallen woran es 
liegen könnte...