Google Charts - Il grafico è vuoto

Question

Utilizzare mysql/php/js per provare a visualizzare un grafico di curve - attualmente il grafico viene visualizzato ma è vuoto.

downloadURL è un metodo che recupera le informazioni dal mio database, cercando di recuperare l'altitudine e semplicemente di tracciarlo. Il metodo funziona sicuramente ok anche perché lo sto usando per aggiungere marcatori su una mappa di google ...

Answer 1

Ci sono diverse questioni (in aggiunta alla risposta da Henrik)

1. è necessario disegnare il grafico nella callback di downloadURL
2. getAttribute è un metodo, deve essere markers[i].getAttribute("alt")
3. devi convertire l'altitudine in numero, attualmente è una stringa (gli attributi xml sono sempre ays di tipo stringa)
4. si sta utilizzando push nel modo sbagliato, per ogni indicatore si aggiungono 2 file, 1 per l'id di un 1 per l'altitudine

codice fisso:

function drawChart() { 

    var graph = []; 
    downloadUrl("map.php", function (data){ 
     var xml  = data.responseXML, 
      graph = [], 
      markers = xml.documentElement.getElementsByTagName("marker"), 
      //create empty datatable 
      data = new google.visualization.DataTable(), 
      options = { 
         title: 'Altitude', 
         curveType: 'function', 
         legend: { position: 'bottom' } 
        }, 
      chart; 
     for(var i = 0; i<markers.length; i++){ 
     graph.push(//a single array(row) with 2 items(columns) 
        [ 
        //column 0, id(index) of the marker 
        i, 
        //column 1, alt-attribute, converted to float 
        parseFloat(markers[i].getAttribute("alt")) 
        ] 
       ); 
     } 
     //first add columns to the datatable 
     data.addColumn('number', 'id'); 
     data.addColumn('number', 'Altitude'); 
     //then add the rows 
     data.addRows(graph); 

     chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
     chart.draw(data, options); 
    }); 
} 

Answer 2

Credo che tu stia utilizzando arrayToDataTable o che il tuo input sia formattato in modo errato.

Se si guarda documentation for arrayToDataTable, l'array deve contenere i nomi delle colonne ecc. E non si dovrebbe utilizzare data.addCoulmn().

formato corretto della serie dovrebbe essere:

array = [ 
    [{label:'ID', type:'number'},{label:'Altitude',type:'number'}], 
    [1,15], 
    [2,23] 
]