Ankündigung

Einklappen
Keine Ankündigung bisher.

Chart.js Graph bei 0 anfangen lassen

Einklappen

Neue Werbung 2019

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

  • Chart.js Graph bei 0 anfangen lassen

    Hallo zusammen,

    ich schreibe gerade an einem Programm, um Werte aus einer DB in Balkendiagrammen umzusetzen.
    Das ganze realisiere ich über Chart.js, was eigentlich auch gut funktioniert.

    Mein Problem ist, dass der Graph nicht bei 0 anfängt zu zählen, und somit kleine Werte abschnitten werden.
    Dazu gibt es ja den Befehl "BeginAtZero", nur leider bekomme ich diesen nicht zum laufen...

    Mein Code sieht in etwa so aus:

    Code:
    $(document).ready(function(){
        $.ajax({
            url: "MeineURL.de/blabla.php",
            method: "GET",
    
            success: function(data) {
                console.log(data);
                var antwort = [];
                var count = [];
    
                for(var i in data) {
                    antwort.push("Antwort " + data[i].frage1);
                    count.push(data[i].Anzahl);
                }
    
                var chartdata = {
                    labels: antwort,
                    datasets : [
                        {
                            label: 'Anzahl',
                            backgroundColor: 'rgba(200, 200, 200, 0.75)',
                            borderColor: 'rgba(200, 200, 200, 0.75)',
                            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                            hoverBorderColor: 'rgba(200, 200, 200, 1)',
                            data: count
    
    
                        }
    
                    ]
    
                };
                var options = {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
    
              }    
            }]
          }
        };
    
                var ctx = $("#mycanvas");
    
                var barGraph = new Chart(ctx, {
                    type: 'bar',
                    data: chartdata
                    options: options
                } );
    
            },
    
            error: function(data) {
                console.log(data);
                        }
    
    
        });
    
    
    });
    Hat jemand vlt eine Idee? Ist vermutlich gar nichts schweres, aber stehe voll auf dem Schlauch :/

    Danke!

  • #2
    Hi minka,

    also irgendwie "bastelst" du das alles etwas konfus zusammen.

    Ich würde die Daten und Labels vorher initialisieren und die Variablen dem Chart übergeben,
    macht das Ganze etwas übersichtlicher. Das Beispiel aus der Webseite fängt bei Null an.

    PHP-Code:
    <canvas id="myChart" width="200" height="200"></canvas>
    <
    script>
    <!-- 
    Daten aus der Ajax-Funktion
    var daten_vorher_holen = new Array(293523);
    var 
    labels = new Array("Red""Blue""Yellow""Green""Purple""Orange");
    // Diagramm erstellen
    var ctx document.getElementById("myChart").getContext('2d');
    var 
    myChart = new Chart(ctx, {
        
    type'bar',
        
    data: {
            
    labelslabels,
            
    datasets: [{
                
    label'# of Votes',
                
    datadaten_vorher_holen,
                
    backgroundColor: [
                    
    'rgba(255, 99, 132, 0.2)',
                    
    'rgba(54, 162, 235, 0.2)',
                    
    'rgba(255, 206, 86, 0.2)',
                    
    'rgba(75, 192, 192, 0.2)',
                    
    'rgba(153, 102, 255, 0.2)',
                    
    'rgba(255, 159, 64, 0.2)'
                
    ],
                
    borderColor: [
                    
    'rgba(255,99,132,1)',
                    
    'rgba(54, 162, 235, 1)',
                    
    'rgba(255, 206, 86, 1)',
                    
    'rgba(75, 192, 192, 1)',
                    
    'rgba(153, 102, 255, 1)',
                    
    'rgba(255, 159, 64, 1)'
                
    ],
                
    borderWidth2
            
    }]
        },
        
    options: {
            
    scales: {
                
    yAxes: [{
                    
    ticks: {
                        
    beginAtZero:true
                    
    }
                }]
            }
        }
    });
    // -->
    </script> 
    Fehlt hier nicht ein Komma hinter "chartdata"?

    PHP-Code:
    var barGraph = new Chart(ctx, {
                    
    type'bar',
                    
    datachartdata
                    options
    options
                
    } ); 
    Gruß

    Kommentar


    • #3
      Hallo Günni,

      danke für deine ausführliche Antwort!

      das mit dem BeginAtZero habe ich durch ein globales Statement über
      PHP-Code:
      Chart.defaults.scale.ticks.beginAtZero true
      gelöst.
      Das klappt auch soweit, jedoch bin ich mit der Definition des Charts noch nicht zufrieden...

      Mit dem Array find ich gut, hab es mal an meine Gegebenheiten angepasst.

      Unbenannt.JPG

      Das sieht wirklich toll aus, so wie ich es haben wollte =)

      Jetzt fehlt nur noch ein Schritt...
      Ich möchte die nächsten Datensätze aus dem Array in ein neues Diagramm packen, um damit zu beginnen, statt diese an das jetzige dranzuhängen.

      Wie mache ich das am gechicktesten?

      Mein Code sieht nun wie folgt aus:

      PHP-Code:
      $(document).ready(function(){
          $.
      ajax({
              
      url"",
              
      method"GET",
              
      success: function(data) {
                  
      console.log(data);
                  var 
      antwort = [];
                  var 
      count = [];

                  for(var 
      i in data) {
                      
      antwort.push("Antwort " data[i].frage1);
                      
      count.push(data[i].Anzahl);
                  }

      var 
      labels = new Array("Antwort 1""Antwort 2""Antwort 3""Antwort 4");
      // Diagramm erstellen
      var ctx document.getElementById("mycanvas2").getContext('2d');
      var 
      mycanvas2 = new Chart(ctx, {
          
      type'bar',
          
      data: {
              
      labelslabels,
              
      datasets: [{
                  
      label'# of Votes',
                  
      datacount,
                  
      backgroundColor: [
                      
      'rgba(255, 99, 132, 0.2)',
                      
      'rgba(54, 162, 235, 0.2)',
                      
      'rgba(255, 206, 86, 0.2)',
                      
      'rgba(75, 192, 192, 0.2)'

                  
      ],
                  
      borderColor: [
                      
      'rgba(255,99,132,1)',
                      
      'rgba(54, 162, 235, 1)',
                      
      'rgba(255, 206, 86, 1)',
                      
      'rgba(75, 192, 192, 1)'

                  
      ],
                  
      borderWidth2
              
      }]
          },
          
      options: {
              
      scales: {
                  
      yAxes: [{
                      
      ticks: {
                          
      beginAtZero:true
                      
      }
                  }]
              }
          }
          });

              }}
                  )}
                      ); 
      Das Array zeigt mir folgendes:

      {Anzahl: "2", frage1: "1a", frage2: "2a", frage3: "3a", frage4: "4a"}
      {Anzahl: "1", frage1: "1b", frage2: "2b", frage3: "3b", frage4: "4b"}
      {Anzahl: "1", frage1: "1c", frage2: "2c", frage3: "3c", frage4: "4c"}
      {Anzahl: "1", frage1: "1d", frage2: "2d", frage3: "3d", frage4: "4d"}

      Danke schonmal!

      Kommentar


      • #4
        Hi minka,

        dann musst du in einer Schleife für jedes Unterarray ein neues Canvas-Element erzeugen.

        Allerdings erstellst du dann z.B. ein Div-Element, an welches die Canvas-Elemente angehangen werden.

        Code:
        <div id="myCharts"></div>
        PHP-Code:
        <!-- An dieses DIV werden die Canvas-Elemente angehangen -->
        <
        div id="myCharts"></div>
        <
        script type="text/javascript">
        <!--
        var 
        daten_vorher_holen = new Array(Array(253523), Array(573523),  Array(275521));
        var 
        labels = new Array("Red""Blue""Yellow""Green""Purple""Orange");
        /*
        * Für jedes Array ein neues Canvas-Element erzeugen und ans DIV anhängen
        */
        for(var i=0;i<daten_vorher_holen.length;i++){
        <!-- 
        Das Div-Element in einer Variablen ablegen -->
        var 
        charts document.getElementById('myCharts');
        <!-- 
        Ein neues Canvas-Element erzeugen -->
        var 
        canvas document.createElement('canvas');
        <!-- 
        Das neue Canvas-Element ans DIV anhängen -->
        charts.appendChild(canvas);
        <!-- 
        Über getElementsByTagName('Tagname')[nrkann jedes Tag gleichen Namens angesprochen werden -->
        var 
        ctx document.getElementsByTagName('canvas')[i].getContext('2d');
        var 
        myChart = new Chart(ctx, {
            
        type'bar',
            
        data: {
                
        labelslabels,
                
        datasets: [{
                    
        label'# of Votes',
                    
        datadaten_vorher_holen[i],
                    
        backgroundColor: [
                        
        'rgba(255, 99, 132, 0.2)',
                        
        'rgba(54, 162, 235, 0.2)',
                        
        'rgba(255, 206, 86, 0.2)',
                        
        'rgba(75, 192, 192, 0.2)',
                        
        'rgba(153, 102, 255, 0.2)',
                        
        'rgba(255, 159, 64, 0.2)'
                    
        ],
                    
        borderColor: [
                        
        'rgba(255,99,132,1)',
                        
        'rgba(54, 162, 235, 1)',
                        
        'rgba(255, 206, 86, 1)',
                        
        'rgba(75, 192, 192, 1)',
                        
        'rgba(153, 102, 255, 1)',
                        
        'rgba(255, 159, 64, 1)'
                    
        ],
                    
        borderWidth2
                
        }]
            },
            
        options: {
                
        scales: {
                    
        yAxes: [{
                        
        ticks: {
                            
        beginAtZero:true
                        
        }
                    }]
                }
            }
        });
        // End For
        // -->
        </script> 
        Gruß

        Kommentar

        Lädt...
        X