jQuery लोड Google विज़ुअलाइज़ेशन एपीआई AJAX

Question

एक समस्या है जिसे मैं हल नहीं कर सकता, मैं इंटरनेट पर बहुत कुछ देख रहा हूं लेकिन कुछ भी नहीं मिला।

मेरे पास यह जावास्क्रिप्ट है जिसका उपयोग PHP द्वारा अजाक्स अनुरोध करने के लिए किया जाता है। जब अनुरोध किया जाता है, तो यह एक फ़ंक्शन को कॉल करता है जो डेटा को प्रस्तुत करने के लिए एनोटेटेडटाइमलाइन खींचने के लिए Google विज़ुअलाइज़ेशन API का उपयोग करता है।

स्क्रिप्ट AJAX के बिना बहुत अच्छा काम करती है, अगर मैं इन सब कुछ इनलाइन करता हूं तो यह बहुत अच्छा काम करता है, लेकिन जब मैं AJAX के साथ ऐसा करने की कोशिश करता हूं तो यह काम नहीं करता !!!

मुझे जो त्रुटि मिलती है वह Google डेटा डेवलपर टूल्स में "डेटा" डेटाटेबल की घोषणा में है, मुझे Uncaught TypeError: Cannot read property 'DataTable' of undefined मिलता है।

जब स्क्रिप्ट त्रुटि में हो जाती है, पृष्ठ पर सबकुछ साफ़ हो जाता है, यह केवल एक खाली पृष्ठ दिखाता है।

इसलिए मुझे नहीं पता कि इसे कैसे काम करना है।

$(document).ready(function(){    
    // Get TIER1Tickets     
    $("#divTendency").addClass("loading"); 

    $.ajax({ 
     type: "POST", 
     url: "getTIER1Tickets.php", 
     data: "", 
     success: function(html){ 
      // Succesful, load visualization API and send data  
      google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
      google.setOnLoadCallback(drawData(html));             
     } 
    });  
}); 


function drawData(response){    
    $("#divTendency").removeClass("loading"); 

    // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted> 
    // So it has to be split first by * then by , 
    var dataArray = response.split("*"); 
    var dataTickets = dataArray[0]; 
    var dataDates = dataArray[1]; 
    var dataCount = dataArray[2]; 

    // The comma separation now splits the ticket counts and the dates 
    var dataTicketArray = dataTickets.split(","); 
    var dataDatesArray = dataDates.split(","); 

    // Visualization data        
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Tickets'); 
    data.addRows(dataCount);              

    var dateSplit = new Array(); 
    for(var i = 0 ; i < dataCount ; i++){ 
     // Separating the data because must be entered as "new Date(YYYY,M,D)" 
     dateSplit = dataDatesArray[i].split("-"); 
     data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0])); 
     data.setValue(i, 1, parseInt(dataTicketArray[i])); 
    }    

    var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency')); 
    annotatedtimeline.draw(data, {displayAnnotations: true});        
} 

Answer 1

मुझे याद है जब मैं एक गूगल एपीआई यह स्पष्ट रूप से पहले बंद लोड प्रारंभ करने कहा करते थे। तो शायद AJAX से बाहर google.load समारोह रखने के लिए, और फिर बस सफलता पर अपने समारोह के दूसरे भाग बुला रखें:

//Straight Away! 
google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){ 
    // Get TIER1Tickets     
    $("#divTendency").addClass("loading"); 

    $.ajax({ 
     type: "POST", 
     url: "getTIER1Tickets.php", 
     data: "", 
     success: function(html){ 
      // Succesful, load visualization API and send data 
      google.setOnLoadCallback(drawData(html)); 
     } 
    }); 
}); 

Answer 2

क्या आपने इसे एक सिंक्रोनस AJAX अनुरोध के रूप में करने का प्रयास किया है? नीचे async सेटिंग पर ध्यान दें।

$.ajax({ 
    type: "POST", 
    async: false, 
    url: "getTIER1Tickets.php", 
    data: "", 
    success: function(html){ 
     // Succesful, load visualization API and send data  
     google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
     google.setOnLoadCallback(drawData(html));             
    } 
}); 

Answer 3

मैं बिल्कुल गूगल API से परिचित नहीं हूँ, लेकिन मैं अनुमान है कि कॉलबैक में 'एचटीएमएल' वास्तव में json या स्क्रिप्ट है, तो आप $ .ajax कोशिश कर सकते हैं 'डेटाप्रकार' विकल्प:

$.ajax({ 
    type: "POST", 
    url: "getTIER1Tickets.php", 
    dataType: "json",//"script" 
    data: "", 
    success: function(html){ 
     // Succesful, load visualization API and send data  
     google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
     google.setOnLoadCallback(drawData(html));             
    } 
}); 

अधिक जानकारी: http://api.jquery.com/jQuery.ajax/

Answer 4

यह अंधेरे में एक शॉट का एक सा है:

google.setOnLoadCallback(function() { drawData(html) });

हो सकता है कि एचटीएमएल के संदर्भ में खो दिया है, और एक बंद की आवश्यकता है।

Answer 5

क्या आप लौटाए गए डेटा का नमूना प्रदान कर सकते हैं? आप सीधे drawData (html) कह सकते हैं:

$.ajax({ 
type: "POST", 
async: false, 
url: "getTIER1Tickets.php", 
data: "", 
success: function(html){ 
    // Succesful, load visualization API and send data  
    google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
    //You are already in a callback function, better like this ? 
    drawData(html);             
}}); 

Answer 6

मैं एक AJAX आधारित टैब प्रणाली का उपयोग कर रहा हूँ और में गूगल के इंटरएक्टिव लाइन चार्ट विज़ुअलाइज़ेशन मेरी परियोजनाओं में से एक और एक समान ईंट की दीवार में भाग गया।

क्रॉस-डोमेन स्क्रिप्टिंग के AJAX के अंतर्निहित अवरोध के कारण, आप Google जावास्क्रिप्ट API (http://www.google.com/jsapi) या किसी अन्य बाहरी संसाधन को लोड नहीं कर सकते हैं।

और चूंकि Google की सेवा की शर्तों को ऑफ़लाइन प्रतिबंधित किया गया है (उर्फ "Google पर होस्ट नहीं किया गया है) उनके विज़ुअलाइजेशन एपीआई का उपयोग करते हैं, तो आप कानूनी रूप से स्क्रिप्ट की एक प्रति प्राप्त नहीं कर सकते हैं और आवश्यकतानुसार स्वयं को होस्ट कर सकते हैं।

मैंने अपने टैब में "visualization_page.php" के बजाय "get_vis.php" नामक फ़ाइल को शामिल करने की एक हैकी वर्कअराउंड की कोशिश की; जहां "get_vis.php" की सामग्री को है:

<?php 
echo file_get_contents('http://domain.com/path/to/visualization_page.php'); 
?> 

लेकिन, कोई भाग्य, यह एपीआई ठीक से लोड करने के लिए एक ही रास्ता है सुरक्षा सेटिंग्स समायोजित करने के लिए इतनी के रूप में Google के सर्वर के साथ बातचीत की अनुमति देने के लिए लगता है। मुझे नहीं पता कि यह मदद करता है, लेकिन शुभकामनाएं।

Answer 7

मुझे पता है कि यह एक पुराना धागा है लेकिन इससे दूसरों की मदद मिल सकती है।
मैं अब एक ही समस्या हुई है और यह बहुत समान है (अगर एक ही नहीं) मैं एक सीएमएस के साथ पहले था:

<div id='targetdiv'></div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#targetdiv').load('...some url...'); 
}); 
</script> 

स्क्रिप्ट का हिस्सा लोड: पेज पर

कोड AJAX के साथ:

<script type="text/javascript"> 
    document.write("hello"); 
</script> 

परिणाम "हैलो" टेक्स्ट वाला एक पृष्ठ है जो ऐसा लगता है कि यह अभी भी लोड हो रहा है। यह document.write विधि के कारण होता है। चूंकि स्क्रिप्ट पहले से समाप्त और बंद दस्तावेज़ में लोड हो चुकी है, इसलिए ब्राउज़र एक नया खुलता है और मुझे लगता है कि जावास्क्रिप्ट इंजन कोड की अगली पंक्ति के लिए इंतजार कर रहा है जो कभी भी एक नए दस्तावेज़ को खोलने के रूप में कभी नहीं पहुंच पाएगा जिसे निष्पादित किया जा रहा है।

Answer 8

मैं जानता हूँ कि यह एक पुराने पोस्ट है, लेकिन कुछ google.load डॉक्स के माध्यम से खुदाई के बाद, मैं आप चाहते हैं मामले में एक async विकल्प गतिशील libs लोड करने के लिए मिला:

function loadMaps() { 
    google.load("visualization", "2", {"callback" : function(){ alert(4); }}); 
} 

Answer 9

यह मेरे लिए काम करता है

google.load("visualization", "1", { packages: ["corechart"] }); 

      var chart ; 
      var data ; 
      var options; 
     function Change(s) 
     { 
       // s in json format  
       google.setOnLoadCallback(reDraw(s)); 
       function reDraw(s) { 
        console.log(new Function("return " + s)().length); // to test if json is right 
        data = google.visualization.arrayToDataTable(new Function("return "+s)()); 

        options = { 
        title: 'Product Scanes', 
        vAxis: { title: '', titleTextStyle: { color: 'red'} }   
       }; 

       }   
       chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
     } 
     function requestDate() // cal the method when you want to draw the chart 
     { 

      $.ajax({ 
       type: "POST", // CHANGED 
       // contentType: "application/json; charset=utf-8", 
       url: "something.php", 
       data: { parameters you wanna pass }, 
       success: function (d) { 
       Change(d); 


       } 
      });  
     } 
}