Wie laden Sie zwei Google Liniendiagramme auf einer Seite?

Question

Ich hatte einen tiefen Blick auf etwas ähnliche Fragen gestellt here und here. Ich habe ihre Implementierung versucht. Es hat nicht funktioniert!

Dann habe ich mir folgenden Link von Google angesehen: tow charts in one page. Befolgte das gleiche Verfahren, zeigte aber immer noch nur eine Grafik auf einmal.

Unten ist mein Code:

<script type = "text/javascript" src = "https://www.google.com/jsapi" ></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <!--Load the Ajax API--> 

    <script type="text/javascript"> 

     google.load("visualization", "1", {packages:["line"]});   
     google.setOnLoadCallback(drawChart);  
     google.setOnLoadCallback(drawOutputChart); 

     function drawChart() { 
      var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>); 
      var options = { 
       chart: { 
        title: ' Data ', 
        is3D: 'true' 
       }, 
       width: 550, 
       height: 350, 

      };  
      var chart = new google.charts.Line(document.getElementById('analogchart')); 
      chart.draw(data, options); 
     } 

     function drawOutputChart(){ 
      var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>); 
      var options2 = { 
       chart: { 
        title: ' Data ', 
        is3D: 'true' 
       }, 
       width: 550, 
       height: 350, 

      }; 

      var chart2 = new google.charts.Line(document.getElementById('outputChart')); 
      chart2.draw(data2, options2); 
     } 


    </script> 

** HTML-Code zu nennen: **

<table> 
      <tr> 
       <td> 
        <div id="analogchart" > 

        </div> 
       </td> 
       <td> 
        <div id="outputChart" > 

        </div> 
       </td> 

      </tr> 
     </table> 

Ich habe ernsthaft keine Ahnung, was falsch läuft, wie es in der Lage ist, ein Diagramm zu zeigen, zu einer Zeit, aber nicht beides!

Answer 1

empfiehlt es sich loader.js gegen die ältere Bibliothek jsapi
zu verwenden und beide nicht für eine Line Chart

auch benötigen, setOnLoadCallback sollte nur einmal pro Seite
genannt werden, die in die aufgenommen werden können load Anweisung, wie im folgenden Beispiel

versuchen so etwas wie dieses ...

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 

    google.charts.load('current', { 
    callback: function() { 
     drawChart(); 
     drawOutputChart(); 
    }, 
    packages: ['line'] 
    }); 

    function drawChart() { 
    var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>); 
    var options = { 
     chart: { 
     title: ' Data ', 
     is3D: 'true' 
     }, 
     width: 550, 
     height: 350, 
    };  
    var chart = new google.charts.Line(document.getElementById('analogchart')); 
    chart.draw(data, options); 
    } 

    function drawOutputChart(){ 
    var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>); 
    var options2 = { 
     chart: { 
     title: ' Data ', 
     is3D: 'true' 
     }, 
     width: 550, 
     height: 350, 
    }; 

    var chart2 = new google.charts.Line(document.getElementById('outputChart')); 
    chart2.draw(data2, options2); 
    } 

</script>