Google图表 - 图表为空白

Question

Using mysql/php/js to try and display a curve chart - currently the chart is displaying but it is blank.

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 is a method that retrieves information from my database - looking to retrieve altitude and simply plot it. The method definitely works ok as I'm also using it for adding markers to a google map...

Answer 1

I believe you're either using arrayToDataTable wrong or your input is formatted wrong.

Looking at documentation for arrayToDataTable the array should contain your column names etc, and you shouldn't be using data.addCoulmn() at all.

Correct format of array should be:

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

Answer 2

There are several issues(additionally to the answer by Henrik)

1. you must draw the chart in the callback of downLoadUrl
2. getAttribute is a method, it must be markers[i].getAttribute("alt")
3. you must convert the altitude to a number, currently it's a string(xml-attributes are always of type string)
4. you are using push the wrong way, for each marker you add 2 rows, 1 for the id an 1 for the altitude

Fixed code:

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);   
  });
}