[xhtml]Eine in .js Datei ausgelagerte Funktion Benutzen.

Padawan

Erfahrenes Mitglied
Hallo Leute,

ich benutze Highcharts, um Graphen zichnen zu lassen. Die JavaScript Funktion, in der ich den Graph zeichne, habe ich in eine .js datei gepackt und die externe Datei folgendermaßen eingebunden:
HTML:
<script type="text/javascript" src="javaScript/chartDrawer.js"></script>

Auf drücken des folgenden Buttons:
CSS:
<input type="submit" name="action" onclick='InitHighChart()' value="Darstellen" />

Soll der Graph auf folgenden div-Block gezeichnetwerden:
Code:
<div id="chart"></div>

Der javaScript-Code sieht folgendermaßen aus:
Javascript:
function InitHighChart()
{
  
    var checkbox_value = "";
       $(":checkbox").each(function () {
           var ischecked = $(this).is(":checked");
           if (ischecked) {
               checkbox_value += "ch"+$(this).val()+"=true" + "&";
           }else{
             checkbox_value += "ch"+$(this).val()+"=false" + "&";
           }
       });
      
  
   $("#chart").html("Wait, Loading graph...");
  
   var options = {
      chart: {
         renderTo: 'chart',
      },
      credits: {
         enabled: false
      },
      title: {
         text: 'Timestmp Overview',
         x: -20
      },
      xAxis: {
         categories: [{}]
      },
      tooltip: {
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';
               
                $.each(this.points, function(i, point) {
                    s += '<br/>'+point.series.name+': '+point.y;
                });
               
                return s;
            },
            shared: true
        },
      series: [{},{},{},{}]
   };
  
   $.ajax({
      url: "../php/getgraph.php",
      data: checkbox_value,
      type:'post',
      dataType: "json",
      success: function(data){
         options.xAxis.categories = data.categories;
         options.series[0].name = 'Kanal 1';
         options.series[0].data = data.ch1;
         options.series[1].name = 'Kanal 2';
         options.series[1].data = data.ch2;
         options.series[2].name = 'Kanal 3';
         options.series[2].data = data.ch3;
         options.series[3].name = 'Kanal 4';
         options.series[3].data = data.ch4;
         var chart = new Highcharts.Chart(options);        
      }
   });
  
}

Mein Problem ist, dass der Graph nicht meht nicht mehr zeichnet. Als es in der HTML Datei eingebettet war, hat es geklappt.
Die Url in der Funktion(?)
Javascript:
$.ajax
habe ich auch entsprechend geändert, da die js und PHP Dateien eine Ebene unter der HTML Datei befindet.

Ich hoffe ihr könnt mir helfen.

Lg
Padawan
 
Javascript:
$.ajax({
    url: "../php/getgraph.php",
    ...
});

Die Url in der Funktion(?)
Javascript:
$.ajax
habe ich auch entsprechend geändert, da die js und PHP Dateien eine Ebene unter der HTML Datei befindet.
Der enthaltene URL in der *.js-Datei wird weiterhin aus der Sicht des HTML-Dokuments gesetzt, von wo aus das Script tatsächlich ausgeführt wird :)
Javascript:
$.ajax({
    url: "php/getgraph.php",
    ...
});
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
habs zwar auf
Javascript:
$.ajax({
    url: "php/getgraph.php",
    ...
    }
});
geändert, dennoch kommt folgendes herraus:
Code:
Wait, Loading graph...
 
habs zwar auf
Javascript:
$.ajax({
    url: "php/getgraph.php",
    ...
    }
});
geändert, dennoch kommt folgendes herraus:
Code:
Wait, Loading graph...
Die korrekte Verzeichnisstruktur vorausgesetzt, kann es am Pfad nicht mehr liegen.

"..." hast du aber nicht ins Script mitkopiert? :D

Ansonsten mal den Browsercache leeren und die Seite neu laden.
 
hab den "..." mitkopiert, bei mir steht der drin. Cache hatte ich auch geleert.
Kanns mir halt nicht wirklich erklären.
Ich weiss nicht, in wie weit es hilft, die "(Ordner)Struktur" sieht folgendermaßen aus.

./index.html
|
+/php/+-getgraph.php
|
+-javaScript/chartDrawer.js
 
Zuletzt bearbeitet:
ich habs mit "..." und ohne probiert. Den Cache geleert und dennoch klapts nicht.
Die ganze Webseite liegt im Ordner "Visualisierung". In diesem Ordner sind dann der index.html und die Ordner php und javaScript. Der im php Ordner liegende php script liefert die Daten. Die JavaSript Datai liegt im ordner javaScript. Kanns daran liegen, dass es kein absoluter pfad angegeben wurde oder am ordnerstruktur an sich?

lg padawan
 
Hi,
schau doch mal in der Konsole/Developer Tools nach was du für eine Fehlermeldung bekommst bzw. was mit deinem Post übergeben wird.
Ansonsten sind Dateien immer relativ anzugeben und nicht absolut. Das macht man nur mal so zum testen ob es am falschen relativen Pfad liegt.
Auch ist es egal was du für eine Ordnerstruktur du hast, solange die relativen Pfade dieser angepasst sind.
 
ich habs mit "..." und ohne probiert.
Mit "..." war ja mal sowas von sinnfrei :D

Die funktionstüchtige "Vollversion" der .ajax()-Methode lautet noch immer:
Javascript:
   $.ajax({
      url: "php/getgraph.php",
      data: checkbox_value,
      type:'post',
      dataType: "json",
      success: function(data){
         options.xAxis.categories = data.categories;
         options.series[0].name = 'Kanal 1';
         options.series[0].data = data.ch1;
         options.series[1].name = 'Kanal 2';
         options.series[1].data = data.ch2;
         options.series[2].name = 'Kanal 3';
         options.series[2].data = data.ch3;
         options.series[3].name = 'Kanal 4';
         options.series[3].data = data.ch4;
         var chart = new Highcharts.Chart(options);    
      }
   });
Als es in der HTML Datei eingebettet war, hat es geklappt.
Kann es sein, dass im Zuge der Script-Auslagerung die benötigte jQuery-Bibliothek aus dem HTML-Quellcode verschwunden ist?

Ansonsten, ist die Seite online verfügbar, um darauf einen Blick werfen zu können?
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Hi,

ich habe den JavaScript-Code in die .html-Code wieder eingelagert. jetzt funktionert es auch in der HTML-Datei nicht.

Die PHP-Datei, die die Daten an den javaScript-Code sendet, ist der folgende Code:

PHP:
<?php

$categories = array('11:40', '12:41', '13:42', '14:43', '15:44', '16:45', '17:46', '18:47', '19:48', '20:49', '21:50', '22:51');
$graph_data['categories']= $categories;

if  ($_POST['ch1'] == "true") {
  
    $ch1 = array(23.87, 25.23, 100.23, 58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43);
    $graph_data['ch1']= $ch1;
}

if  ($_POST['ch2']== "true") {
  
    $ch2 = array( 25.23, 100.23, 58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43 ,34.56);
    $graph_data['ch2']= $ch2;
}

if  ($_POST['ch3']== "true") {

        $ch3 = array( 100.23, 58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43,34.23,23.23);
    $graph_data['ch3']= $ch3;

}
if  ($_POST['ch4']== "true") {
    $ch4 = array(58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43,23.90,23.04,23);
    $graph_data['ch4']= $ch4;
}

echo json_encode($graph_data);
exit;
?>


im html-Datei befindet sich im body-Tag, ein div-Container, das den Folgenden Code beinhaltet:
HTML:
<!--<form method="post">-->
         <fieldset> <!-- Zeit Auswählen -->
            <legend>Art der Verbrauchsdatendarstellung:</legend>
            <input type="radio" id="zeitraum" name="art" value="VerbrauchsZeitraum">
            <label for="mc">Für einen bestimmten Zeitraum</label><br>
           
            <input type="radio" id="aktuell" name="art" value="aktuellerVerbrauch">
            <label for="vi"> aktuellen Verbrauch Anzeigen</label><br>
         </fieldset>
        
         <fieldset>  <!-- Kanal Auswählen -->
            <legend>Verbrauchskanal auswählen:</legend>
           
            <input name="zaeler" type="checkbox" value="A" id="ch1" />                   
            <label for="KanalA">Kanal 1</label><br />
           
            <input name="zaeler" type="checkbox" value="B" id="ch2" />             
            <label for="KanalB">Kanal 2</label><br />
           
            <input name="zaeler" type="checkbox" value="C" id="ch3" />
            <label for="KanalC">Kanal 3</label><br />
           
            <input name="zaeler" type="checkbox" value="D" id="ch4" />
            <label for="KanalD">Kanal 4</label><br />
           
         </fieldset>   
        
         <fieldset>
            <legend>Zeitraum</legend>
           
            <label for="beginDatum">Begin</label><br />
            <input type="text" name="zeitraumBegin" id="beginDatum" />
           
            <label for="lastname">Ende</label><br />
            <input type="text" name="zeitraumEnde" id="endDatum" />
         </fieldset>
        
               <p>
            <input type="submit" name="action" onclick='InitHighChart()' value="Register" />
            <input type="reset" value="Reset Form" />
            <input type="hidden" name="session" value="A398DF991" />
         </p>
         <div id="chart"></div>

Jenachdem, Welcher Checkbox gewählt wurde, sollen die entsprechende Daten an den JavaScript Code gesendet werden. Was jeoch nicht klapt.
Es wird ständig
Code:
Wait, Loading graph...
ausgegeben.

ich hoffe ihr könnt mir weiter helfen.

Viele Grüße
Dogan
 
Zurück