Wykresy Google - Wykres jest pusty

Question

Użycie mysql/php/js do wypróbowania i wyświetlenia wykresu krzywych - obecnie wykres jest wyświetlany, ale jest pusty.

google.load('visualization', '1.0', {'packages':['corechart']}); 

     google.setOnLoadCallback(drawChart); 


     function drawChart() { 

     var graph = Array(); 
     downloadUrl("map.php", function (data){ 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for(var i =0; i<markers.length; i++){ 
      graph.push([i], [markers[i].getAttribute["alt"]]); 
     } 

    }); 

     var data = google.visualization.arrayToDataTable(graph); 
     data.addColumn('number', 'id'); 
     data.addColumn('number', 'Altitude'); 

     var options = { 
      title: 'Altitude', 
      curveType: 'function', 
      legend: { position: 'bottom' } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

     chart.draw(data, options); 
     } 

downloadURL to metoda, która pobiera informacje z mojej bazy danych - poszukuje informacji o wysokości i po prostu ją wykreśla. Metoda na pewno działa dobrze, ponieważ używam jej również do dodawania znaczników do mapy google ...

Answer 1

Istnieje kilka kwestii (dodatkowo do odpowiedzi Henrik)

1. trzeba narysować wykres w zwrotnego z downloadURL
2. getAttribute jest metodą, musi być markers[i].getAttribute("alt")
3. musisz przekonwertować wysokość na liczbę, obecnie jest to ciąg znaków (atrybuty xml są alw Ays typu string)
4. używasz push w niewłaściwy sposób, dla każdego markera dodać 2 wierszy, 1 dla id 1, na wysokości

kod Poprawiono:

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

Uważam, że albo używasz błędnie błędnie wprowadzonego arrayToDataTable, albo dane wejściowe są źle sformatowane.

Patrząc na documentation for arrayToDataTable tablica powinna zawierać nazwy kolumn itp., A użytkownik nie powinien w ogóle korzystać z data.addCoulmn().

Prawidłowy format tablicy powinno być:

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