Google चार्ट - ग्राफ खाली है

Question

एक वक्र चार्ट को आज़माने और प्रदर्शित करने के लिए mysql/php/js का उपयोग करना - वर्तमान में चार्ट प्रदर्शित हो रहा है लेकिन यह खाली है।

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

डाउनलोडURL एक तरीका है जो मेरे डेटाबेस से जानकारी प्राप्त करता है - ऊंचाई को पुनर्प्राप्त करने और बस इसे साजिश करने के लिए देख रहा है। विधि निश्चित रूप से ठीक काम करती है क्योंकि मैं इसे Google मानचित्र पर मार्कर जोड़ने के लिए भी उपयोग कर रहा हूं ...

Answer 1

वहाँ कई मुद्दों

1. आप downLoadUrl
की
2. getAttribute कॉलबैक में चार्ट बनाना होगा (अतिरिक्त हेनरिक द्वारा जवाब देने के लिए कर रहे हैं) एक विधि है, यह markers[i].getAttribute("alt")
3. होना चाहिए, आपको ऊंचाई को एक संख्या में परिवर्तित करना होगा, वर्तमान में यह एक स्ट्रिंग है (xml-विशेषताएँ alw हैं प्रकार स्ट्रिंग की ays)
4. आप push गलत तरीके से उपयोग कर रहे हैं, प्रत्येक मार्कर के लिए आप ऊंचाई के लिए आईडी एक 1 के लिए 2 पंक्तियाँ, 1 जोड़

फिक्स्ड कोड:

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

मेरा मानना ​​है कि आप या तो arrayToDataTable गलत हैं या आपके इनपुट को गलत बना दिया गया है।

documentation for arrayToDataTable पर देखकर सरणी में आपके कॉलम नाम आदि होना चाहिए, और आपको data.addCoulmn() का उपयोग नहीं करना चाहिए।

सरणी के सही स्वरूप होना चाहिए:

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