OnClick aktualisieren Balkendiagramm mit neuen Daten Javascript (Morris-Diagramm)

Question

Ich habe Balkendiagramm eingerichtet. Daten für Standard/beim Laden der Seite bekomme ich über PHP. Dieser Teil ist es ok ist und funktioniert (ich habe einige Beispiel gefolgt, die auf der Bahn war.)

function init_morris_charts() { 

     if(typeof (Morris) === 'undefined'){ return; } 
     console.log('init_morris_charts'); 

     if ($('#graph_bar').length){ 
      morbar = Morris.Bar({ 
       element: 'graph_bar', 
       data: [ 
       <?php echo $tocke; ?> 
       ], 
       xkey: 'date', 
       ykeys: ['marketcap'], 
       labels: ['Market cap value USD'], 
       barRatio: 0.4, 
       barColors: ['#aa8400'], 
       xLabelAngle: 0, 
       hideHover: 'auto', 
       resize: true 
      }); 
     } 
    } 

Nun möchte Ich mag Funktionalität einrichten, die Klick jedes Mal Benutzer auf bestimmten Link, neues api-Aufruf erfolgt und mit Antwortdaten habe ich ein neues Diagramm erstellt. Grundsätzlich muss das Diagramm aktualisiert und neue Daten angezeigt werden.

Funktion wird aufgerufen, wenn ich bestimmte Verbindung drücke. URL für API si richtig zusammengesetzt. Ich schaffe auch String im Format, das ich denke, "Daten" in Diagramm es braucht ..

So:

{ date: '12-08-2016 03:08:56', marketcap: 0 }, { date: '13-08-2016 03:08:20', marketcap: 1029733 }, { date: '14-08-2016 05:08:30', marketcap: 1584452 }, { date: '15-08-2016 05:08:30', marketcap: 2460141 }, { date: '16-08-2016 05:08:31', marketcap: 2393176 }, { date: '17-08-2016 05:08:31', marketcap: 2752283 }, { date: '18-08-2016 05:08:31', marketcap: 2676743 }, { date: '19-08-2016 05:08:31', marketcap: 2268252 }, { date: '20-08-2016 05:08:31', marketcap: 2040360 }, { date: '21-08-2016 05:08:30', marketcap: 1999935 }, { date: '22-08-2016 05:08:31', marketcap: 2082395 }, .. etc 

Aber etwas nicht funktioniert. In Konsole sehe ich dies:

Typeerror: d morris.min.js

nicht definiert Kann jemand mir sagen, wo mein Code nicht korrekt ist. Tnx!

Answer 1

Das ist meine Version ..

$('.show_movement_icon').click(function() { 
    valuta_short = $(this).attr('id'); 
    $('#barchart_valuta').text(valuta_short); 

    // URL setup 
    url = 'http://www.coincap.io/history/365day/'+valuta_short; 

    var arr = []; 

    $.getJSON(url, function(data) { 
     //To get only market cap values. 
     var market_cap = data.market_cap; 

     for (var i = 0; i < market_cap.length; i++) { 
      datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s'); 

      // Fill array with data 
      arr.push({ 
       date: datum, 
       marketcap: market_cap[i][1] 
      }); 
     } 

     // Send array to chart for data update 
     morbar.setData(arr); 
    }); 

}); 

Answer 2

Sie müssen die setData-Methode innerhalb der getJSON-Funktion aufrufen. Ihr Code neu geschrieben, so wird:

$('.show_movement_icon').click(function() { 
    // ... copy lines from your code ... 
    $.getJSON(url, function(data) { 
    //To get only market cap values. 
    var market_cap = data.market_cap; 

    for(var i=0; i < market_cap.length; i++) 
    { 
     //example: 06-06-2017 07:04:13 
     datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s'); 

     novetocke += "{ date: '" + datum + "', marketcap: " + market_cap[i][1] + " }, "; 
    } 

    // I changed the following 3 lines 
    novetocke_edit = novetocke.substring(0, novetocke.length-2); 
    var chartData = JSON.parse(novetocke_edit); 
    morbar.setData(chartData); 
    }); 
}); 

I ersetzt auch Ihr String-Variable durch einen JS-Array (JSON.parse(novetocke_edit)), weil ich glaube, setData keine Strings verwenden kann, und ein Objekt benötigen.