Google Visualization API und Prototype (Javascripte überschreiben sich gegenseitig?)

nCL

nCL

Grünschnabel
Hallo,

ich entwickle momentan einen URL-Short-Dienst wie bit.ly oder tiny.cc und verwende dafür Prototype.
Für die Statistiken verwende ich die Google Visualization API. Diese verwendet aber anscheinend jQuery konstrukte, da sie nicht zusammen mit meiner Prototype-Lib funktionieren. Es funktioniert immer nur eins von beiden entweder Prototype oder die Google Visualization API.

Ich habe mich diesbezüglich natürlich auch selbst schon darüber informiert wie man evtl. beide Libs benutzen könnte. Es hieß immer wieder man sollte die $-Funktion überschreiben indem man
Code: 
 jQuery.noConflict()
aufruft. Aber das hat bei mir nicht wirklich was gebracht. Außerdem weiß ich ja auch nicht wirklich genau was Google alles in der API verwendet, weil sie es ja auch sehr stark kapseln und es nicht grade direkt einsehbar ist, ob sie jetzt z.B. Prototype oder jQuery nutzen.

Ich hoffe das ich hier auf den einen oder anderen Experten treffe der mir entweder direkt helfen kann oder mir evtl. sagen kann wo ich Hilfe finden könnte.

Vielen Dank im Vorraus für jegliche Hilfe!

PS: Bei der Suche nach dieser Problemstellung habe ich in diesem Forum bisher nichts gefunden und ich hoffe auch das ich hier nicht vollkommen falsch mit dem Thema bin. Ansonsten tut es mir leid und entschuldige mich dafür.
 
Moin,

ich hab das mal getestet, und keine grundlegenden Konflikte entdeckt, es geht beides.

Hier mal mein Testobjekt:
Code: 
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

    <script type="text/javascript">
      window.onload=function()
      {
        $('proto').show();
      }
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['piechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create our data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows([
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div id="proto" style="display:none">Prototype geht</div>
    
  </body>
</html>

Zeig doch mal ein bissl was von deinem Code, vielleicht ergibt sich die Wechselwirkung erst bei deinen Anweisungen.
 
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Prototype Google API Test</title>
  
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script src="prototype.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task');
      data.addColumn('number', 'Hours per Day');
      data.addRows(5);
      data.setValue(0, 0, 'Work');
      data.setValue(0, 1, 11);
      data.setValue(1, 0, 'Eat');
      data.setValue(1, 1, 2);
      data.setValue(2, 0, 'Commute');
      data.setValue(2, 1, 2);
      data.setValue(3, 0, 'Watch TV');
      data.setValue(3, 1, 2);
      data.setValue(4, 0, 'Sleep');
      data.setValue(4, 1, 7);

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
    }
  </script>

  </head>
  <body>
      <h1>Diagramm Test</h1>
      <div id="chart_div"></div>
  </body>
</html>

Wenn ich die Prototype Lib nicht einbinde funktioniert das Diagramm!
Ich hab die Lib und diese Testdatei mal mit in den Anhang gesetzt.
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück