js Chart neu laden

  • Hi,


    ich habe ein Chart das bei Fensteraufruf funktioniert:

    wenn ich in einer Selectbox die Auswahl ändere soll das Chart aktualisiert werden:

    Code
    $(document).ready(function() {
    
      $("#auswahlFbSeiteOffen4").change(function(){
            ...
      } );
    } );

    wenn ich den selben Code wie oben nutze, wird zwar die Ansicht aktualisiert aber wenn ich mit der Maus über Canvas fahre werden die Werte aus dem ersten Aufruf im Chart angezeigt. Die Aktualisierung erfolgt nicht vollständig.


    Wer kann mir helfen?

  • Ah so. Du hast ja dieses, um den Chart aufzubauen:

    Code
    var barGraph = new Chart(ctx, {

    Die Variable barGraph ist dabei im success-Handler deines Ajax-Aufrufes gekapselt und Du kannst später nicht darauf zugreifen. Daher muss Du sie zunächst global machen, indem Du das var wegnimmst und sie stattdessen außerhalb des Dokument-Ready definierst:

    var barGraph;


    Anscheinend ist es nicht möglich, einfach die Daten zu überschreiben; an dieser Stelle merke ich, dass es einfacher ist, den Chart neu anzulegen, anstatt ihn zu aktualisieren. Damit dann nicht alte Daten herum geistern, wie Du es bei dem Mouseover hast, musst Du den alten Chart vorher löschen. Auch dafür gibt es eine Funktion:

    https://www.chartjs.org/docs/latest/developers/api.html

    Also barGraph.destroy();

    Dann kannst Du den neuen Chart genau so neu erzeugen wie beim ersten Mal.

  • Wie ich gerade sehe, habe ich da ein wenig daneben gelegen: Es ist sehr einfach, die Daten einfach zu überschreiben, wie dieses Beispiel aus dem Handbuch zeigt:

    Code
    myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
    myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
  • Bei dir heißen die Daten ja chartdata. Willst Du diese komplett austauschen, müsste es so aussehen:

    barGraph.data = chartdata;

    Willst Du die Labels beibehalten, so:

    barGraph.data.datasets = chartdata.datasets;

    alles ungetestet.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!