Ankündigung

Einklappen
Keine Ankündigung bisher.

Ergebniswert an weiteres Javascript weitergeben (+Ajax?)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ergebniswert an weiteres Javascript weitergeben (+Ajax?)

    Hallo zusammen,

    ich habe folgenden JS um eine einfache mathematische Berechnung durchzuführen. Es werden zwei Zahlen in die Input-Felder eingegeben und dann wird das Ergebnis im dritten Input-Feld ausgegeben. Das ganze sieht so aus:

    Code:
    <script type="text/javascript">
      function calculateErgebnis() {
        var weight = document.getElementById('x_weight').value;
        var height = document.getElementById('x_height').value;
        document.getElementById('x_result').value = Math.round((weight / height));
      }  
      </script>
    
    <input type="text" name="x_weight" id="x_weight" onkeyup="calculateErgebnis();" value="0" />
    <input type="text" name="x_height" id="x_height" onkeyup="calculateErgebnis();" value="0" />
    <input type="text" name="x_result" id="x_result" disabled="disabled" />
    Soweit so gut.

    Jetzt möchte ich das Ergebnis aber NICHt mehr in dem dritten Input-Feld ausgeben, sondern das Ergebnis an einen Google Chart übergeben. Und zwar an so einen: Visualization: Gauge - Google Chart Tools / Interactive Charts (aka Visualization API) - Google Code

    Mein Code dafür lautet bisher:

    Code:
        <script type='text/javascript' src='http://www.google.com/jsapi'></script>
        <script type='text/javascript'>
          google.load('visualization', '1', {packages:['gauge']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            data.addRows(1);
            data.setValue(0, 0, 'Test');
            data.setValue(0, 1, 22);
    
    
            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
            var options = {width: 150, height: 150, redFrom: 25, redTo: 30,
                yellowFrom:15, yellowTo: 18, greenFrom: 18, greenTo: 25, minorTicks: 5, max: 30, min: 15};
            chart.draw(data, options);
          }
        </script>
    
        <div id='chart_div'></div>

    Beide Scripts sind in der selben Seite eingebunden. Jetzt meine Frage: Wie bekomme ich das x_result in die Zeile data.setValue(0, 1, 22); des anderen Scripts? In diesem Fall hier ist x_result => 22

    Ich gehe davon aus, dass ich hier einen Ajax Loader verwenden muss, da der Google Chart mit dem Wer aus der Berehcnung ja erst "neu geladen" werden muss, oder? Ich weiß momentan aber nicht so richtig, wie ich das umsetzen soll..

    Schon mal danke für alle Hilfestellungen!

    Sebastian


  • #2
    Zitat von fryswe Beitrag anzeigen
    Jetzt meine Frage: Wie bekomme ich das x_result in die Zeile data.setValue(0, 1, 22); des anderen Scripts?
    In dem du die entsprechende Variable einfach als Parameter einsetzt ...?

    Ich gehe davon aus, dass ich hier einen Ajax Loader verwenden muss
    Wozu - willst du dynamisch Daten nachladen?

    da der Google Chart mit dem Wer aus der Berehcnung ja erst "neu geladen" werden muss, oder?
    Dafür scheint doch draw_chart zuständig zu sein, oder?

    Kommentar

    Lädt...
    X