Variable von html in JS übergeben.

HolgerG

Grünschnabel
Hallo zusammen,

ich hoffe ihr könnt mir helfen.
Ich verwende das Skript für die Anzeige von Garfiken:
https://github.com/nnnick/Chart.js/blob/master/LICENSE.md

So schaut in der html Datei die Auswertung aus.
Code:
var rainData =
{
labels : ["18:30","","16:30","","14:30","",],
datasets : [

{
fillColor : "rgba(239,229,207,0.4)",
strokeColor : "#e2c78c",
pointColor : "#efe5cf",
pointStrokeColor : "#e2c78c",
data : [ 0.09, 0.09, 0.03, 0.09, 0.03 0.09,]
}
]
};
  var rainchart = document.getElementById('rainchart').getContext('2d');

new Chart(rainchart).Line(rainData, {
datasetStrokeWidth : 4,
pointHitDetectionRadius : 4,
scaleShowVerticalLines: false,
scaleGridLineWidth : 2,
scaleLabel: "  <%= value %>mm",
bezierCurveTension : 0.4,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>mm",
responsive: true,
maintainAspectRatio: false,
animation: false,
tooltipEvents: ["mousemove","touchstart"], 
tooltipFillColor: "rgba(0,0,0,0.6)",
pointDotRadius : 3,
});
Wie schaffe ich es, das die Werte momentan Statischen Werte
labels : ["18:30","","16:30","","14:30","",],
data : [ 0.09, 0.09, 0.03, 0.09, 0.03 0.09,]



Weiter oben habe ich im html Code
<td id="wetdata"></td>
In der Variable würden diese Werte schon stehen.
Wie stelle ich es an das ich das in den Code bekomme?
Wäre sehr Dankbar.


by Holger
 
Hm, ich verstehe dich nicht ganz:
Weiter oben habe ich im html Code
<td id="wetdata"></td>
In der Variable würden diese Werte schon stehen.
Meinst Du, dass die Werte von labels und data in dieser Tabellenzelle stehen? Wenn ja, wäre es kein Problem, sie heraus zu holen und in die Variablen zu schreiben. Dazu muss man aber das genaue Format kennen. Andererseits: Wie kommen die Werte in diese Zelle? Kannst Du nicht gleich an der Quelle, wo Du sie hinein schreibst (mit PHP?) die JS-Variablen vorbesetzen?
 
Hi,
das ist nicht php.

Die Datei heist chart.htm
Dort wird im Head bereich das Skript eingebunden.
<script type="text/javascript" src="lightman.js"></script>

Dort in dem Skript wird dann eine params.htm Datei eingelesen:
Ausschnitt:
Code:
function updateParams()
{     
    $.ajax({
      url: "params.htm",
    type: "POST",
    success: function(response)
    {
            var myPar = response.split("/");
            $("#temp").html(myPar[0]);
            $("#otemp").html(myPar[11]);
            $("#owind").html(myPar[12]);

Dann sind die variablen
temp
otemp
owind
usw. verfügbar und werden in der chart.htm weiter unten im Body dann ausgegeben
Code:
        <table class="ttab">
            <tr><td rowspan="2" id="temp"></td><td id="otemp"></td></tr>
            <tr><td id="owind"></td></tr>
            <tr><td colspan="2" id="timedate"></td></tr>
        </table>

Dann noch weiter unten in der chart.htm ist dann ein neues skript mit der Grafikfunktion

Mir geht es jetzt darum, wie ich die Werte die in der Variable z.B. otemp steht in das Skript einfügen kann.

Code:
    var tmodata =
        {
            labels : [~hier muss eine Variable mit Daten rein~],
            datasets : [
                {
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "#97BBCD",
                    pointColor : "#e0f6f1",
                    pointStrokeColor : "#97BBCD",
                    data : [~hier muss eine Variable mit Daten rein~],
                }
            ]
        };

ich hoffe das ist verstädlich erklärt.

------------------

data : $("#otemp")

so geht es z.B nicht
 
Zuletzt bearbeitet:
Glaube, jetzt verstehe ich es besser. Wenn Du von Variablen sprichst, meinst Du HTML-Elemente. Auf deren Inhalt kannst Du mit den jQuery-Funktionen html() oder text() zugreifen, so wie Du es oben schon tust:
Code:
data : $("#otemp").text()
Dieser Aufruf liefert dann einen String.
Einen anderen wichtigen Gesichtspunkt musst Du noch berücksichtigen: Die Variablen bzw. HTML-Elemente, die Du in der Callback-Funktion des Ajax-Aufrufes setzt, sind erst verfügbar, wenn die Antwort vom Server eingetroffen ist. D. h. Du müsstest jede Bearbeitung, die davon abhängt, in der Callback-Funktion machen. U. U. erübrigt sich dann das Auslesen aus den HTML-Elementen, weil dort direkt die Javascript-Variablen zur Verfügung stehen.
 
Was heißt, es funktioniert nicht? Hast Du meinen Hinweis bzgl. Ajax und der Verfügbarkeit der Variablen beachtet? Wenn nicht, sind die HTML-Elemente leer, weil die Antwort vom Server noch nicht da ist.
Wenn die Seite online ist, dann poste doch mal die URL.
 
Sieht ziemlich genau so aus, wie ich es mir vorgestellt habe. Du rufst dein Javascript nicht innerhalb des Callbacks auf. Außerdem ist das Array fehlerhaft, das Du hier aufbaust:
Code:
$("#para_005").html("[" + myPar[0] + ", " + myPar[11] + ", " + myPar[12] + ", " + myPar[1] + ", " + myPar[11]+ ",]");
Das Komma vor dem "]" ist zuviel. Diesen Fehler hast Du noch an anderen Stellen gemacht.
Wenn Du das Javascript vom Ende des Dokumentes in den Callback übernimmst, kannst Du auch auf den Umweg über das HTML-Element verzichten:
Code:
function updateParams()
{
$.ajax({
url: "params.htm",
type: "POST",
success: function(response)
{
var myPar = response.split("/");
$("#temp").html(myPar[0]);
$("#otemp").html(myPar[11]);
$("#owind").html(myPar[12]);

$("#timedate").html(myPar[9] + " " + myPar[8] + " " + myPar[3]);

chartdata ="[" + myPar[0] + ", " + myPar[11] + ", " + myPar[12] + ", " + myPar[1] + ", " + myPar[11]+ "]";

var rainData1 =
{
labels : ["18:30","","16:30","","14:30","","12:30","","10:30","","08:30","","06:30","","04:30","","02:30","","00:30","","23:30","","21:30","","19:30","","17:30","","15:30","","13:30","","11:30","","09:30","","07:30","","05:30","","03:30","","01:30","","23:30","","21:30","",],
datasets : [
{
fillColor : "rgba(239,229,207,0.4)",
strokeColor : "#e2c78c",
pointColor : "#efe5cf",
pointStrokeColor : "#e2c78c",
data : chartdata // hier war ein Komma zuviel
}
]
};
var rainchart1 = document.getElementById('rainchart1').getContext('2d');
new Chart(rainchart1).Line(rainData1, {
datasetStrokeWidth : 4,
pointHitDetectionRadius : 4,
scaleShowVerticalLines: false,
scaleGridLineWidth : 2,
scaleLabel: " <%= value %>mm",
bezierCurveTension : 0.4,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>mm",
responsive: true,
maintainAspectRatio: false,
animation: false,
tooltipEvents: ["mousemove","touchstart"],
tooltipFillColor: "rgba(0,0,0,0.6)",
pointDotRadius : 3 // Hier war ein Komma zuviel
});

if (myPar[1] == "1")
if ($("#logout").css("display") == "none")
$("#logout").fadeIn(500);

$("#marker td").each(function(index)
{
if (myPar[6][index] == "1")
{
if ($(this).hasClass("moff")) $(this).removeClass("moff");
$(this).addClass("mon");
}
else
{
if ($(this).hasClass("mon")) $(this).toggleClass("mon moff");
}
})

if ($("#tt").css("display") == "none")
$("#tt").fadeIn(500);
},
timeout: 5000
});
}
(Leider sind mir im Code die Einrückungen verloren gegangen.)
 
Hi,
also erstmal danke. Nach langem tüftel geht es jetzt.
Ich habe es wie du geschrieben hast direkt in das Skript gebettet.
Aber mit dem Array ist es doch anders als du sagtest, die , werden benötigt sonst geht es nicht. Komisch,

Jetzt mache ich es so:
Code:
function updatewetter()
{      
    $.ajax({
      url: "wetter_01.htm",
    type: "POST",
    success: function(response)
    {
            var myParw = response.split(",");
      $("#para_004").html(myParw[0]);  
      chartdata1 = [myParw[0],myParw[1],myParw[2],myParw[3],myParw[4],myParw[5],myParw[6],myParw[7],myParw[8],myParw[9],];
  
  
    //-------------------------------------------------------- 
        var outData =
        {
            labels : ["18:30","","16:30","","14:30","","12:30","","10:30","","08:30","","06:30","","04:30","","02:30","","00:30","","23:30","","21:30","","19:30","","17:30","","15:30","","13:30","","11:30","","09:30","","07:30","","05:30","","03:30","","01:30","","23:30","","21:30","",],
            datasets : [

                {
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "#97BBCD",
                    pointColor : "#e0f6f1",
                    pointStrokeColor : "#97BBCD",
                    data : chartdata1
                }          
            ]
        };
     var outchart = document.getElementById('outchart').getContext('2d');

        new Chart(outchart).Line(outData, {
        datasetStrokeWidth : 4,
        pointHitDetectionRadius : 4,
        scaleShowVerticalLines: false,
        scaleGridLineWidth : 2,
        scaleLabel: "   <%= value %>°",
        bezierCurveTension : 0.4,
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= value %>C",              
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        tooltipEvents: ["mousemove","touchstart"],       
        tooltipFillColor: "rgba(0,0,0,0.6)",      
        pointDotRadius : 3,  
        });
    //--------------------------------------------------------       
    
    },
    timeout: 5000
    });          
}

Ich benötige 96 Daten im chartdata1 Array.
Wie bekomme ich die per Schleife rein in javaskript?

in PHP mache ich es so:
Code:
$c_anzahl = 96;
$c_max = $c_anzahl + 1;
$c_zaehler = 1;    //Array soll bei 1 beginnen
$c_increment = 1;
$daten = "";

while($c_zaehler < $c_max) {
   if($c_zaehler == $c_anzahl) {
      //echo "abbrechen";
      break;
   }
//mysqlausgabe
  $row = mysql_fetch_array($ausgabe);
$c_zaehler += $c_increment; //Erhöht den $zaehler um den Wert $increment 
  $temp01_ar[$c_zaehler] = round($row['Temp'] , 2);
   $daten = $daten . $temp01_ar[$c_zaehler] . ", ";
}
 
Aber mit dem Array ist es doch anders als du sagtest, die , werden benötigt sonst geht es nicht.
Mir unerklärlich. Mein Editor zeigt dann Fehler an.

Ich benötige 96 Daten im chartdata1 Array.
Wie bekomme ich die per Schleife rein in javaskript?
Das lässt sich sicher machen, es hängt davon ab, wo die Daten her kommen sollen. Wahrscheinlich auch über Ajax? Heißt das, dass dieses Array:
Code:
[myParw[0],myParw[1],myParw[2],myParw[3],myParw[4],myParw[5],myParw[6],myParw[7],myParw[8],myParw[9],]
96 Datensätze haben soll? Ich hatte mich schon gewundert, weil es zu wenige Daten sind, um einen vollständigen Chart zu zeichnen.
 
Zurück